I was looking back over my bootstrap code and realized it didn’t make much sense to me how the “btn-primary” class makes a button blue rather than something like"btn-blue". Can someone please explain to me the reasoning behind this?
It’s often a good idea to name classes based on what it means rather than what it is. It doesn’t really matter if the button is blue or green or flashing hundreds of colors per second. You want to communicate to other programmers (and yourself) that this button is the button that performs the primary action on your form. The color can be changed quite easily.
To expand on @PortableStick’s answer - consider a situation where you use a class like .btn-blue for all of your primary buttons, but later decide that you don’t actually want them to be blue - you want them orange or green. However, you’re also using .btn-blue classes elsewhere on things you want to remain blue. This makes a global search and replace operation out of the question. You also can’t edit the .btn-blue class to define a color other than blue (it would no longer match the name and the items you want to remain blue would now be a different color). To fix this, you have to search your markup and examine each instance of .btn-blue to see if it’s an element that needs to have it’s class changed to .btn-green or.btn-orange`.
Not fun. Or efficient. And very prone to error.
Instead, you define the properties to an overall class according to the meaning. Then, if you want to change the color of your primary buttons, you change the color definition on .btn-primary and the change only affects items that are associated with that meaning. You then repeat the pattern for other meanings (whatever you come up with).
Below is all of the CSS from bootstrap that references .btn-primary. It controls its background color, border color, font color in various states (focused, active, disabled, etc.)
All without defining any aspect of appearance in the name of the class - just the role of the button.
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
.btn-primary:focus,
.btn-primary.focus {
color: #fff;
background-color: #286090;
border-color: #122b40;
}
.btn-primary:hover {
color: #fff;
background-color: #286090;
border-color: #204d74;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
color: #fff;
background-color: #286090;
border-color: #204d74;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
color: #fff;
background-color: #204d74;
border-color: #122b40;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-image: none;
}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
background-color: #337ab7;
border-color: #2e6da4;
}
.btn-primary .badge {
color: #337ab7;
background-color: #fff;
}
3 Likes
What I don’t get here is that in the lesson where the btn-primary class is introduced, it’s only introduced as something to change the button’s color. If I’m understanding your reply correctly, the fact that it defaults to blue is incidental, yes? It could just as easily be Lannister Crimson, it’s just a button that has this primary class and the primary button class is blue unless and until you change it to something else because why the heck not blue. But if that’s the case, why introduce this btn-primary class as if its main function is to change the color? Maybe I’m just being nit-picky and disgruntled. 
1 Like
My understanding is that that is just a convention that Bootstrap chose: “default” is white, “primary” is blue, “success” is green, “info” is light blue, “warning” is orange, and “danger” is red.
Yes, blue seems arbitrary, but if we take into account that the success, warning, and danger colors seem logical, there wasn’t many simple, popular colors left that look good on a screen. Blue seems like a good choice.
@Elencha To start, don’t focus too much on how and why Bootstrap or any front-end framework implements a particular feature. Learn how use the features and all their capabilities. You can always create a custom theme to change the look and feel of Bootstrap.
There is nothing wrong with it being blue, in fact, the color is irrelevant, if I understand correctly. My question isn’t “why does this bootstrap class default to blue” my question is: Why does codecademy introduce this class as something with which to change a color? In fact, I found this thread because I just got to that lesson and it said something to the effect of “okay let’s make this thing blue by giving it the btn-primary class”. Which left me wondering why a class so named would have such a purpose. Except, thanks to this thread, I now know that that isn’t its purpose, just an irrelevant property of the class.