Overriding Bootstrap classes in Bootstrap

How to override Bootstrap CSS classes behavior?

In previous post, we learnt how to customize Bootstrap while downloading fromt the official website. In this post, we shall learn how to customize / override default Bootstrap CSS classes behavior.

Let's take an example of a Label class in Bootstrap.

Write following code in the web page that is using Bootstrap .css file

<label class="label-default">This is default label.</label>

The output will be something like

Bootstrap custom label

Now, add following CSS style to the page after the Bootstrap.css file reference.

<style>
    .label-default{
        background-color:#b6ff00;
    }
</style>
<h2>Customize Bootstrap</h2>

<label class="label-default">This is default label.</label>

The output will be like this

Bootstrap custom label

This happens because the default property of Boostrap.css file for .label-default class is overridden by the above .css class .label-default declared inside the <style>.

Important points

The above css <style> block can be kept in the same file where the HTML code for <label> is kept just before this element.
The above css class can be kept inside a custom .css file however this .css file must be referenced after the Bootstrap.css file; keeping the custom.css file after the bootstrap.css overrides all matching .css classes declared in the bootstrap.css that exists in custom.css. (We can also keep our own css class into this file.)
```
<head>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
    <link href="/Content/custom.css" rel="stylesheet"/>
</head>
```

Note: It is not advisable to change the .css classes declared in the bootstrap.css, this helps to rollback the changes easily and focus on custom.css file for any change rather than going through original bootstrap.css.

Views: 19600 | Post Order: 7

Bootstrap > Overview

Overriding Bootstrap classes in Bootstrap

How to override Bootstrap CSS classes behavior?

Important points

Related Posts

Utility Tools