0

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?

  • I prefer to load the custom css below the original bootsrap css..:) – Adarsh Mohan Feb 4 '16 at 6:07
2

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.

2

Number 1 is very easy, but try to imagine what will happen if the company decides to upgrade libraries in this project?

I vote for #3, because it is really annoying when something doesn't work in a way you expect it to work (this is actually what you expect from libraries and frameworks, right?).

1

I think #2 is technically the preferred method. They even offer a web page that lets you specify a ton of the constants that you might want to customize then download a "clean" Bootstrap.css.

On the other hand, #3 has a certain appeal for two reasons:

  1. Complete isolation from the base Bootstrap files, meaning that you could consume any new versions without worrying too much about your extensions being overwritten.

  2. Ability to use a CDN to serve the main Bootstrap files independently from your extended classes.

That being said, I wouldn't do #3. I would do #4 (I'm adding this as I type) which is slightly different:

  1. Include the original base Bootstrap.css file. Use a CDN if you want.

  2. Add your own .css file that contains CSS selectors that are more specific than the original Bootstrap selectors, so that your extended styles are given precedence during cascades.

For example, if the original Bootstrap definition looks like this:

.btn {
    background-color: blue
}

...then you'd add a new definition that looks like this:

.custom .btn {
    background-color: red
}

This means that the custom selector won't fire unless it's for an element embedded in an a parent element with a class of "custom".

Then in each of your pages, where you want to use the custom styles and not the base styles, add this to your body element:

<BODY class="custom">

Because .custom .btn is more specific than .custom, the CSS cascading logic will always choose your style over the base style. So you can have custom styles without modifying the Bootstrap files and without worrying about the order they are loaded.

0

Well being practical, as a web dev you should keep the originals commented and then define yourself. If you are sure that your boss will upgrade libraries for sure, then yes sure define external css. Else, just comment out older one and DIY then :).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.