Topic: How to style alert premium component bootstrap 5

Evolet free asked 2 years ago

Expected behavior*dismissable X is stylable.*Actual behavior**X is close to words and unable to be moved by css

<div class="alert alert-success alert-dismissible fade show" role="alert">
  You have successfully logged in!
  <button id="close-x" (click)="notificationRef.close()" type="button" class="close" data-dismiss="alert" aria-label="Close">
   <span aria-hidden="true">&times;</span>

Resources (screenshots, code snippets etc.)** #close-x{ position: absolute; top:0px; left: 3px; /margin-right:5px;/ enter image description here }

Arkadiusz Idzikowski staff answered 2 years ago

Here is an example, you need to add these styles globally (to the styles.scss file):

.alert .btn-close {
    right: 50px;

Originally the button has right: 0px style and it should be displayed near the right border (it also has some padding). If in your case this position is different it may be caused by some custom styles.

Evolet free commented 2 years ago

Ok, my styles.scss is mostly empty except for the imports: @import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';@import '~@fortawesome/fontawesome-free/scss/solid.scss';@import '~@fortawesome/fontawesome-free/scss/regular.scss';@import '~@fortawesome/fontawesome-free/scss/brands.scss';

@import '~mdb-angular-ui-kit/assets/scss/mdb.scss';I am using angular ui kit pro essential bootstrap 5. Am I looking in the wrong place? I see scss files for alert.scss in different spots. One for colors and the other for positions. But modifying it there hasn't let me apply the style.

Arkadiusz Idzikowski staff commented 2 years ago

@Evolet You need to add these styles to the src/app/styles.scss after the mentioned import statements (you can also create a new custom scss file, add scss rules there and add this file import to the import statements list).

Grzegorz Bujański staff answered 2 years ago

We need more information. Where exactly do you add these styles - to the global styles, the styles of the alert component, or the component that contains the code that opens the alert? Try to add styles globally or in the alert component.

Evolet free commented 2 years ago

Ok, yeah I was trying in the alert component directly to the divs/elements in the alert.component.html. I am just having trouble overriding the default styles. I can look in the documentation on styling you guys have but could use any additional tips.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 2.1.0
  • Device: Laptop
  • Browser: Google Chrome Dev
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: No