Bootstrap: Suggestion: Color names instead of danger, warning, success, info

[Luc45]

For semanthics, my suggestion is to replace success, info, danger and warning for their respective colors.

For example, if Facebook used Bootstrap, it would use "label-danger" to display it's notifications, where it is not trully a danger. "label-red" would be better in that case.

So, instead of success, info, danger and warning, we would have green, blue, red and orange.

label-blue instead of label-info
label-orange instead of label-warning
label-red instead of label-danger
label-green instead of label-success

And so on...

[IamManchanda]

No!

Here is some code from bootstrap's sass files

// Start with assigning color names to specific hex values.
$white:  #fff !default;
$black:  #000 !default;
$red:    #d9534f !default;
$orange: #f0ad4e !default;
$yellow: #ffd500 !default;
$green:  #5cb85c !default;
$blue:   #0275d8 !default;
$teal:   #5bc0de !default;
$pink:   #ff5b77 !default;
$purple: #613d7c !default;

// Create grayscale
$gray-dark:                 #292b2c !default;
$gray:                      #464a4c !default;
$gray-light:                #636c72 !default;
$gray-lighter:              #eceeef !default;
$gray-lightest:             #f7f7f9 !default;

// Reassign color vars to semantic color scheme
$brand-primary:             $blue !default;
$brand-success:             $green !default;
$brand-info:                $teal !default;
$brand-warning:             $orange !default;
$brand-danger:              $red !default;
$brand-inverse:             $gray-dark !default;

Hope you understand now that why its like this and not the vice versa

Rest on @mdo to decide!!

[IamManchanda]

for eg,
You make a website in blue color as primary color .... now your boss says to change it in red.

Now what would be the best option of the two ? .....

1. $brand-primary

$red:    #d9534f !default;
$blue:   #0275d8 !default

$brand-primary: $red

1. $blue

$blue:  #d9534f !default;

d9534f is a red color and $blue is surely not the best answer for it

[bardiharborow]

In a similar way to how <strong> is prefered over <b>, users should use the .label-* that conveys the correct semantic meaning and override the corresponding $brand-* Sass variable. It is an unfortunate reality that some people are going to simply import bootstrap.min.css without modifications and use .label-danger incorrectly as you suggest, but we cannot really cater to these users. I'm closing this as a WontFix. Feel free to ask any further questions.

[IamManchanda]

@bkdotcom i dont think ..... the author of this issue deserved a thumbs down ..... its normal for folks to not understand such semantics, specifically as a beginner level
But it may be just me

[mz-works]

Also you can find Bootstrap 4 colors palette and export to SCSS/LESS variables file
https://colorswall.com/palette/3