CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Shtarley
Shtarley

Reputation: 391

Correct way to make custom changes in bootstrap?

I am learning bootstrap, and I am busy going through the training material on W3Schools. However, I'm confused about something:

Let's say I am adding a button to my site using this code:

<button type="button" class="btn">Basic</button>

But lets say that I want this button pink instead of grey... Does Bootstrap have a specific way that I am supposed to make minor changes like colors etc? Or will it be correct if I were to add a custom class to the button and change the colors through my custom stylesheet?

Like so:

HTML

<button type="button" class="btn mypinkbutton">Basic</button>

CSS

.mypinkbutton {background:#FFC0CB;}

Basically... Do I just make any changes that I want like I would normally do in my style.css or does it work differently in bootstrap?

Upvotes: 1

Views: 64

Answers (2)

daGUY
daGUY

Reputation: 28753

The "correct" way to do this would be to use Bootstrap theming.

Bootstrap includes a number of color variables and, for buttons (and many other components), a bunch of pre-made classes that can be used to apply these colors. For example, a "primary" button looks like this:

<button type="button" class="btn btn-primary">Primary</button>

The .btn-primary class applies the "primary" color from the $theme-colors Sass map, which is #007bff by default (blue). To change that color, you can either change the hex value directly or (even better) create a custom Sass file and then modify the map with your own colors.

All that said, there's technically nothing "wrong" with how you've done it in your question – that'll still work if all you want to do is change the color in that particular case. But the whole advantage of Bootstrap is that it's a framework that makes managing and maintaining things like this much easier across a large project, so best practice is to use what it provides for these situations.

Upvotes: 0

Krzysztof Raciniewski
Krzysztof Raciniewski

Reputation: 4924

In bootstrap 3 and 4 you should customize all components in sass/less and compile all sources: https://getbootstrap.com/docs/4.0/getting-started/theming/

It's best way to customize bootrap.

You can also generate custom bootstrap resources here(for bootstrap 3): https://getbootstrap.com/docs/3.3/customize/ However, it's not flexible solution.

Upvotes: 1

Related Questions