Personalizing Bootstrap 5 button designs and attributes for a customized look

Question

Personalizing Bootstrap 5 button designs and attributes for a customized look

In my project, I've set up my custom.scss file with the following code:

$primary: #e84c22;

$theme-colors: (
  primary: $primary,
);

@import "~bootstrap/scss/bootstrap.scss";

Currently, the color looks like this:

https://i.sstatic.net/lbLMK.png

However, I am not happy with the text appearance inside the btn-primary class. It is currently dark and regular font, but I want it to be white and bold without having to add the classes text-light and fw-bold to each button element. My desired look is like this:

https://i.sstatic.net/Go3yy.png

How can I achieve this by making changes to the custom.scss file?

Additional information:
In contrast to the btn-danger class
https://i.sstatic.net/ixBlc.png
which has white text by default. There should be a way to adjust the text color based on the brightness of the background color in bootstrap.

html css twitter-bootstrap sass bootstrap-5

Answer 1

Answer №1

"There should be a feature that automatically adjusts text color based on the brightness of the background in bootstrap."

Absolutely, Bootstrap utilizes the WCAG 2.0 algorithm as detailed here. The shade of red you've chosen triggers the transition of text color to dark following the WCAG protocol.

Buttons are engineered through mixins (refer to: Buttons in the documentation). In this scenario, the 3rd argument of the button-variant mixin $color is described as:

$color: color-contrast($background, $color-contrast-dark, $color-contrast-light, $min-contrast-ratio)

Thus, the button's text color is either $color-contrast-dark or $color-contrast-light, contingent upon the WCAG 2.0 computation using the $min-contrast-ratio.

Hence, tweaking the custom red color slightly darker would switch the text color to white...

$primary: #d73b11;

@import "bootstrap";

Alternatively, you can retain the original custom color and enforce white bold text on btn-primary like so...

$primary: #e84c22;

@import "bootstrap";

.btn-primary {
    color: #fff;
    font-weight: bold;    
}

Demo

Or,

You can adjust the value of the $min-contrast-ratio variable (3, 4.5, and 7 are the accepted values) as demonstrated in this provided solution

Furthermore, note that by overwriting the theme-color map in the manner you are doing, you are erasing all other theme colors. Simply amending the $primary value will change the primary theme color.

Answer 2

"There should be a feature that automatically adjusts text color based on the brightness of the background in bootstrap."

Absolutely, Bootstrap utilizes the WCAG 2.0 algorithm as detailed here. The shade of red you've chosen triggers the transition of text color to dark following the WCAG protocol.

Buttons are engineered through mixins (refer to: Buttons in the documentation). In this scenario, the 3rd argument of the button-variant mixin $color is described as:

$color: color-contrast($background, $color-contrast-dark, $color-contrast-light, $min-contrast-ratio)

Thus, the button's text color is either $color-contrast-dark or $color-contrast-light, contingent upon the WCAG 2.0 computation using the $min-contrast-ratio.

Hence, tweaking the custom red color slightly darker would switch the text color to white...

$primary: #d73b11;

@import "bootstrap";

Alternatively, you can retain the original custom color and enforce white bold text on btn-primary like so...

$primary: #e84c22;

@import "bootstrap";

.btn-primary {
    color: #fff;
    font-weight: bold;    
}

Demo

Or,

You can adjust the value of the $min-contrast-ratio variable (3, 4.5, and 7 are the accepted values) as demonstrated in this provided solution

Furthermore, note that by overwriting the theme-color map in the manner you are doing, you are erasing all other theme colors. Simply amending the $primary value will change the primary theme color.

Answer 3

Answer №2

To ensure the integrity of all bootstrap colors, the recommended method is to create your color map and incorporate it into the existing bootstrap setup.

First, you must include the necessary functions and variables in your custom.scss file.

Step 1

Begin by importing the functions and variables

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

Step 2

Create your custom color map instead of using the default $theme colors to prevent overwriting existing colors

$mycolors: (
  "primary": #e84c22,
);

Step 3

Merge your custom colors with the existing theme-colors using map-merge()

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

Step 4

Lastly, import the bootstrap file

@import "../node_modules/bootstrap/scss/bootstrap";

Final code

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$mycolors: (
  "primary": #e84c22,
);
$theme-colors: map-merge($theme-colors, $mycolors);

@import "../node_modules/bootstrap/scss/bootstrap";

Output

https://i.sstatic.net/TMitXzJj.png

Why is the text color not changing?

If the button background color lacks contrast with the text, the text color will not change accordingly.

You can use the following site () to verify the contrast levels. Take note of the Fail indication for the Small Text for AA

https://i.sstatic.net/fzeycao6.png

Adjusting the Lightness slider for better contrast ratio resolves the issue.

Observe the Pass indication for the Small Text

https://i.sstatic.net/ANX4xC8J.png

Implementing the new color scheme will automatically update the text color

$custom: (
    "orange": #C52B03
);

Voilà!

https://i.sstatic.net/Kn1qRj9G.png

Answer 4

To ensure the integrity of all bootstrap colors, the recommended method is to create your color map and incorporate it into the existing bootstrap setup.

First, you must include the necessary functions and variables in your custom.scss file.

Step 1

Begin by importing the functions and variables

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

Step 2

Create your custom color map instead of using the default $theme colors to prevent overwriting existing colors

$mycolors: (
  "primary": #e84c22,
);

Step 3

Merge your custom colors with the existing theme-colors using map-merge()

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

Step 4

Lastly, import the bootstrap file

@import "../node_modules/bootstrap/scss/bootstrap";

Final code

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$mycolors: (
  "primary": #e84c22,
);
$theme-colors: map-merge($theme-colors, $mycolors);

@import "../node_modules/bootstrap/scss/bootstrap";

Output

https://i.sstatic.net/TMitXzJj.png

Why is the text color not changing?

If the button background color lacks contrast with the text, the text color will not change accordingly.

You can use the following site () to verify the contrast levels. Take note of the Fail indication for the Small Text for AA

https://i.sstatic.net/fzeycao6.png

Adjusting the Lightness slider for better contrast ratio resolves the issue.

Observe the Pass indication for the Small Text

https://i.sstatic.net/ANX4xC8J.png

Implementing the new color scheme will automatically update the text color

$custom: (
    "orange": #C52B03
);

Voilà!

https://i.sstatic.net/Kn1qRj9G.png

Personalizing Bootstrap 5 button designs and attributes for a customized look

Answer №1

Answer №2

Step 1

Step 2

Step 3

Step 4

Final code

Output

Why is the text color not changing?

Similar questions

Is it necessary to treat headings within figure elements as document headings?

Issue with if statement when checking element.checked

Ways to show alternative data from a database in Laravel 8

I'm currently experiencing a challenge with a project I'm tackling that specifically deals with chart.js

Is there a way to identify if you are at the bottom row of a column defined by CSS styling?

What is the best method for creating thumbnail URLs for video files in HTML with JavaScript?

Using React Redux to Calculate the Grand Total Price of all Products Added to Cart

Incapable of stacking one canvas on top of another

Designing HTML columns to adapt to different screen resolutions

Presenting XML data in HTML using a customized CSS stylesheet

Tips for stopping the background color from affecting the text color

What could be causing the data-* prefix to malfunction in Angular 9?

Exploring the Intersection of HTML5 File API and AJAX Chunked Uploads

Conditionals in Angular 2 using Sass

JS How can I generate individual buttons in a loop that trigger separate actions?

Tips for aligning the first row of a table with a line of text

Integrate a PHP link into a Gatsby/React project

AngularJS's ng-click function seems to be malfunctioning

Unable to include checkout and clear cart buttons in popover within bootstrap 5

Ways to showcase a collection of divs in a dual-column layout while minimizing any unnecessary vertical spacing