What is the best way to change the default info color in bootstrap 5.0 to match the info color in bootstrap 3?

Back in the days of bootstrap 3, the sweet info color was #d9edf7. Whenever you used bg-info or alert-info, that trusty old background color was #d9edf7 like clockwork. I'm on a mission to make bootstrap 5.0 behave the same way with the info color.

So, I've got this custom scss file to twist bootstrap to my will:

When I set the info or cyan variable to #d9edf7, my .bg-info elements look on point but the .alert-info elements end up lightened by 60%.

$info: #d9edf7;
@import "../scss/bootstrap.scss";

However, when I switch things up and set the info or cyan variable to #40a4d7, suddenly my .alert-info elements are turning heads and looking just right, but the .bg-info elements are 40% darker than #d9edf7.

$info: #40a4d7;
@import "../scss/bootstrap.scss";

How can I crack the code and override bootstrap to bring my vision to life? Basically, any element using the info color should rock a background color of #d9edf7.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07656868737473756677473229372935">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>

<div class="bg-info" style="width:100%; height:60px;">
This should have the same background color because they're both using the 'info' color
</div>

csssassbootstrap-5

Answer №1

Enhanced Bootstrap 5.0.2 Version

Due to the innovative color "scaling" technique implemented in version 5.0, it is necessary to regenerate the alert-info class by inputting the appropriate colors into the alert-variant mixin...

@import "functions";
@import "mixins";

$info: #d9edf7;

@import "variables";
@import "bootstrap";

.alert-info {
    @include alert-variant($info, $info, shift-color($info, $alert-color-scale));
}

In this scenario, I have continued to utilize the scaling for the (foreground) color, but you have the option to utilize $body-color instead...

@include alert-variant($info, $info, $body-color);

Check out the demonstration here

Upgraded Bootstrap 5.3.0 Version

As detailed in the documentation...

"The Sass mixin is now deprecated. Alert variants have their CSS variables overridden through a Sass loop"

Therefore, there are distinct color variables for the alert text, background color, links, and more... In your specific case, it is recommended to override $info-bg-subtle for the background color:

$info: #d9edf7;
$info-bg-subtle: #d9edf7;

@import "bootstrap";

View the SASS demo here

Answer №2

Upon thorough investigation, it seems that the culprit causing the issue in Bootstrap 5.0 is the SASS variable called $alert-bg-scale. This variable is defined in the _variables.scss file with an initial value of -80%.

$alert-bg-scale: 0%;
$info: #d9edf7;

@import "bootstrap.scss";

Regrettably, achieving the desired behavior may not be as straightforward as you had anticipated. Modifying this value will result in a darker background color for ALL alerts. However, it seems that this issue has been resolved in later versions, as mentioned in Carol Skelly's response.

There are a few potential workarounds that come to mind:

Utilize the .alert-info class instead of .bg-info

This class only alters the border and text color in addition to the background-color.

Implement an override for the .bg-info class

If you strongly oppose the idea of using the border and text color defined by the previous suggestion, this method can be effective. However, I would advise against it as it would deviate from the expected Bootstrap behavior. Alternatively, you could create a custom class for this purpose.

$info: #d9edf7;

@import "bootstrap.scss";

/*
  By placing this snippet after importing Bootstrap, you gain access to all the
  SASS functions, particularly `shift-color()`
*/
.bg-info {
    background-color: shift-color($info, $alert-bg-scale) !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Scale up the font size for all text on the website uniformly

Recently, I decided to switch a website's font to a non-web typeface. However, I quickly realized that the font was extremely thin and difficult to read. I attempted a simple CSS fix using * { font-size:125% }, but unfortunately, it did not have the d ...

javascriptjquerycssfontsfont-face

What method can I use to incorporate a custom CSS code in Formfacade to conceal the back button on a Google Form?

Looking for a way to hide the back button on my custom questionnaire created with Google Forms? While there is no built-in option to do this directly on Google Forms, I decided to embed my form into Formfacade. However, I am struggling to find the CSS co ...

csshidegoogle-formsback-button

The web typography appears fuzzy or has incorrect thickness, lacks consistency across pages and even within a single page

The font (ProggyCleanSZBP.ttf from 1.1.5 release) appears to be intermittently thick and blurry. If you compare with , you'll notice that the latter displays as desired in most cases, but there are instances where the issue occurs, such as the first ...

htmlcssfonts

What is the best way to arrange these badges in a row?

I'm struggling to horizontally align these badges next to each other, as inline-block isn't working and they keep stacking vertically instead of side by side. How can I achieve the alignment shown in the image below? This is the desired appeara ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for spinning the background of a button without rotating the button itself

I'm encountering an issue while trying to rotate the background-image within my button. Instead of showing the specified background image, only the background color is visible. The photo includes a transparent section to achieve an arch-like appearanc ...

htmlcsstwitter-bootstrap-3backgroundbackground-image

What is the process for setting a linear gradient border color on a table row's border?

Currently, I am attempting to apply a linear gradient border color to the table row. Below are the codes for the table: td:first-child { border-left: 1px solid black; border-bottom-left-radius: 50px; border-top-left-radius: 50px; } td:last-child { bor ...

csshtml-table

Having trouble adjusting the outer margin of a PDF generated with html/css in a Flutter iOS app

I am currently facing an issue with the PDF generated from Html/css in my flutter iOS app. While the layout appears fine on Android, there seems to be a problem with left margins when it comes to iOS, as illustrated in the attachment provided. For referen ...

htmlioscssflutterpdf-generation

Having trouble with the Wordpress JS CSS combination not functioning properly and unable to determine the cause

I recently set up a page on my WordPress site using the Twenty Seventeen theme. At the top of the page, I created a toolbar for users to easily adjust the font size and background color. Check out the image below for reference: See Image for Bar Here&apo ...

javascriptjquerycsswordpress

The fillOpacity and opacity properties appear to be malfunctioning

Note: While I understand that image masking can solve my issue, I prefer not to use it as it would require me to use my image as a background and could present accessibility challenges. I am specifically looking for solutions involving clip-path. Issue: T ...

htmlcssimagesvgstyling

Fixed Element Transitioning from Starting Position on Scroll

Check out the JSFiddle example here I'm currently working on a website utilizing Bootstrap 3. I have an image that sticks to the page when scrolling by changing its position to fixed. While this functionality works, the image tends to shift slightly ...

javascriptjqueryhtmlcsstwitter-bootstrap

Animating a background image to slide in from the bottom to the top using CSS transition

Here is a link to a codepen example: https://codepen.io/jon424/pen/XWzGNLe The current effect in this example involves covering an image with a white square, moving from top to bottom when the "toggle" button is clicked. I am interested in reversing this ...

javascripthtmlcss

The challenge of applying flex property in React Native JSX

I'm facing a challenge while trying to implement form field validation in various forms within a React Native mobile application. The problem arises when the error message, which should appear below the text input field, ends up occupying half of the ...

cssreact-nativemobile

Is there a way to adjust the height of an image to be responsive in tailwind css?

<!-- this is the section with the services description and an image of an egg --> <!-- this is the first section with the description --> <div class="flex flex-1 flex-col items-center lg:items-start p-4"> &l ...

htmlcsstailwind-css

"Enhance Your Design With CSS3 Styling for Labels and

HTML <div class="select"> <div> <label for="kitty" class="kitty-label kitty-label-1 l-center"> </label> <input type="checkbox" name="cats" value="1"> <label>Kitty One</label> ...

htmlcss

CSS - Discovering the reason behind the movement of text post generation (animation)

I have a question regarding CSS animation, specifically the typewriting effect. I was able to successfully achieve the typewriting effect using animation. However, I noticed that even though I did not set any animation for transforming, once the text is g ...

javascripthtmlcssanimationdata-visualization

What is the best way to ensure that circles only touch each other by their edges?

Trying to align three circles touching each other has been a challenge for me. Although I have successfully managed to make two touch, the third one remains elusive. How can I ensure that all three circles are in contact with each other, especially when th ...

javascripthtmlcss

Is there a way to ensure that the border of a textarea matches the border of a text input?

My goal is to make the textarea fields in my form have the same appearance as the text input fields, regardless of the browser being used. I am interested in achieving this without imposing a customized style, but instead by leveraging the standard style w ...

htmlcss

In Bootstrap 5, the Col elements do not behave as inline elements

I have been attempting to create a column with 3 elements in a row: 2 buttons and 1 select dropdown Initially, I was able to achieve this layout with three buttons. However, when I replaced one button with a select dropdown, it stopped functioning properl ...

htmlcsstwitter-bootstrapbootstrap-5

Having trouble displaying images in my 360-degree rotation slider

I am completely new to java script, so I have been copying and pasting code. However, it seems like the images are not loading properly. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" ...

jquerycss

Challenge with the positioning of HTML output layout

Is there a way to center the output/result of the HTML code below both horizontally and vertically on the web page using CSS? I have tried the following code but it only centers the output horizontally. Vertical alignment is not working properly. Can someo ...

htmlcss