Why is inline styling OK with bootstrap?

Question

I am doing an online course on frontend, I have just started getting to know bootstrap 4 and flexbox. As far as I understand, to do inline styling is something that is considered bad practice. What I mean is this:

<button style="color: white; border: 5px solid red;"> Press me! </button>

And I like that the good practice is to not do this, mainly because of readability. What I don't understand is why the button above is not a good practice but the code here is considered good practice

<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>

Just to clarify I do understand that the style that I used in the example doesn't do the same thing as the one using bootstrap. I am just interested in why one is OK and the other one is not.

The only thing that I have come up with is that since bootstrap is using class="" it's probably not inline styling.

Answer 1

The first instance is inline styling:

<button style="color: white; border: 5px solid red;"> Press me! </button>

and the second has several classes that are styled in a separate css file:

<button class="btn btn-primary btn-lg d-flex justify-content-center> Press me! </button>

One of the main reasons that it is bad practice to use inline styles is because they can override the styles that exist in the separate CSS file and become hard to track once your CSS becomes more complex. Also, your code becomes more difficult to maintain when you use inline styles. For example, if you had several buttons in your HTML that were each individually styled with inline styles and you decided to change one of the styles you would then have to change the style for each individual button, whereas if you gave them all the same class and styled that class in a separate CSS file, then you can change the color once and it will update all of your buttons.

For example (bad practice):

HTML

<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>
<button style="background-color: dodgerblue;">Click here</button>

vs (good practice):

HTML

<button id="btn-one" class="button">Click here</button>
<button id="btn-two" class="button">Click here</button>
<button id="btn-three" class="button">Click here</button>
<button id="btn-four" class="button">Click here</button>

CSS

.button {
    background-color: dodgerblue;
}

You can read more about CSS styling here.