Enhancing Alerts in Bootstrap 5.1+: Tweaking Text, Background, and Border Colors for Alert-Warning Messages using custom _variables.scss

Question

Enhancing Alerts in Bootstrap 5.1+: Tweaking Text, Background, and Border Colors for Alert-Warning Messages using custom _variables.scss

Incorporating a custom _variables.scss file into my codebase is crucial for my project, and the way I import it is as follows:

@import url('https://fonts.googleapis.com/css?family=Nunito');
@import 'variables';
@import 'bootstrap/scss/bootstrap';
@import "custom";

Attempting to modify the alert color using the code snippet below has produced no visible change:

$alert-color: $orange;
$alert-bg: $orange;
$alert-border-color: $orange;

While I am aware that utilizing CSS variables is an alternative method to achieve this, I prefer having a centralized location for managing custom modifications whenever possible.

Presently, my Bootstrap version is 5.1; however, the solution should remain viable for 5.2 as I plan to update soon.

css colors alert bootstrap-5

Answer 1

Answer №1

Currently, in Bootstrap, the variables $alert-color, $alert-bg, and $alert-border-color do not exist.

These values are defined in the Bootstrap source code as:

.alert {
  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;

  color: var(--#{$prefix}alert-color);
  background-color: var(--#{$prefix}alert-bg);
  border: var(--#{$prefix}alert-border);
}

If you want to modify colors, consider using CSS variables instead. For example, to change the color of all alerts to orange:

.alert {
  --#{$prefix}alert-color: #{$orange}; // or --bs-alert-color: #{$orange};
}

Another approach is to add a new theme color for each component:

$custom-colors: (
  "custom-color": #f61
);

$theme-colors: map-merge($theme-colors, $custom-colors);

Then, you can use the custom color like this:

<div class="alert alert-custom-color" role="alert">
  A simple custom color alert—check it out!
</div>

Or for buttons:

<button type="button" class="btn btn-custom-color">Primary</button>

Lastly, you can create your own class to modify the rendering for specific alerts:

.alert-custom-color { 
  @include alert-variant(green, violet, yellow);
}

Answer 2

Currently, in Bootstrap, the variables $alert-color, $alert-bg, and $alert-border-color do not exist.

These values are defined in the Bootstrap source code as:

.alert {
  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;

  color: var(--#{$prefix}alert-color);
  background-color: var(--#{$prefix}alert-bg);
  border: var(--#{$prefix}alert-border);
}

If you want to modify colors, consider using CSS variables instead. For example, to change the color of all alerts to orange:

.alert {
  --#{$prefix}alert-color: #{$orange}; // or --bs-alert-color: #{$orange};
}

Another approach is to add a new theme color for each component:

$custom-colors: (
  "custom-color": #f61
);

$theme-colors: map-merge($theme-colors, $custom-colors);

Then, you can use the custom color like this:

<div class="alert alert-custom-color" role="alert">
  A simple custom color alert—check it out!
</div>

Or for buttons:

<button type="button" class="btn btn-custom-color">Primary</button>

Lastly, you can create your own class to modify the rendering for specific alerts:

.alert-custom-color { 
  @include alert-variant(green, violet, yellow);
}

Enhancing Alerts in Bootstrap 5.1+: Tweaking Text, Background, and Border Colors for Alert-Warning Messages using custom _variables.scss

Answer №1

Similar questions

Could you please guide me on resolving the Blazor/Bootstrap 5 CSS problem related to styling "striped" tables?

What is the best way to adjust column sizes, setting one with a minimum width while allowing the other to expand to accommodate its content?

Crafting visually stunning interfaces with Material UI

How can I utilize the LED flash on a Windows Phone using WinJS?

Excess spacing in image on top of CSS background overlay

What is the fastest way to add an email subscription form to my website without needing to configure a database?

Using various alignment options for images on mobile devices

Organizing grid elements within the popper component

Utilizing CSS to incorporate a background image into HTML code

Having trouble with CSS :before pseudo-element and sibling selector?

Resetting the width of a CSS-styled div to its default maximum width

The rendered typeface may vary from the specified font family

PHP library dompdf is having issues when rendering CSS styles

Challenges with organizing content using spans in Bootstrap 3

The footer covers the content when the content fills the entire screen

How can I eliminate the empty spaces around a bar chart in Kendo UI?

Creating tilted divs with dynamic height to perfectly fit the content

Optimizing Image Size According to the Container, Not the Screen Size: A Guide

Is there a way to trigger a modal popup when hovering over a Bootstrap 5 card?

What is the best way to split the children of a parent div into four distinct styling regions using the nth-child selector?