Overwriting Bootstrap CSS classes

bootstrapcss

We have an Angular JS app for which we use Bootstrap CSS. We are currently using pure Bootstrap with the default CSS files. However, we need to style the app in my companies corporate design sooner or later. What's the best/recommended way to do this?

We already thought of the following possibilities:

1 # Simply overwrite the Bootstrap classes:

.btn {
    background-color: blue
}

2 # Modify the Bootstrap LESS files and compile Bootstrap.

3 # Introduce own CSS classes to overwrite Bootstrap:

<button class="btn my-btn">

.my-btn {
   background-color: blue
}

I personally would prefer #1 as it sounds easy. We have nearly no experience with LESS, so we don't prefer #2. However, my colleague prefers #3 as he don't want to touch Bootstrap's classes. But my opinion is that we should blot the HTML with our own classes while still using Bootstrap classes.

Is there any recommendation?

Best Answer

There is no "best" way to do it, as it depends on your context. There is a recommended way to do it, though.

Be aware that if you go with 1) or 3) you'll end depending on the order your CSS files are imported, which might get messy in a big system.

The officially recommended way to do it is to use LESS and modify the colors used by the framework. You don't even need to add it to your workflow, as they provide a very helpful customizer - you can modify it online and download the results. There's even a config.json to re-import it on the customizer if you need further modifications.

Related Topic