Override bootstrap class with custom css

Sometimes we come across situation when we want to make changes in bootstrap css class, In bootstrap framework, we have class for every html tag and attribute, so by default when we add reference of bootstrap framework to any web page, all default designed is applied to all those tags, but sometimes we want to make changes in some of those classes.

For example, we often see following class “jumbotron” in index page when we create any new project using mvc framework, where bootstrap css reference is added by default.

<div class="jumbotron">
  <h1 class="h1Home">Change the default header style</h1>
</div>

Now “jumbotron” class has some attribute set for “h1” tag in bootstrap.css file, that may not match with your page theme or layout design, so you may want to make changes in that “h1” tag design.

Update bootstrap class with custom css

One simple way to make changes in “h1” tag attribute, open the bootstrap css file, find the jumbotron class, and make changes there.

However, that has some disadvantage, which will be very difficult to keep track of all those type of changes, when you update bootstrap framework to newer version.

The best way to make changes, create a custom css class and override those design attributes.

Create a new css file with name "custom.css", write the following code.

.jumbotron h1,
.jumbotron .h1 {
    font-family: Verdana;
    font-size: 28px;
    color: #005dac;
    text-decoration: none;
}

Now add both files reference in your web page.

<link href="~/content/bootstrap.css" rel="stylesheet" />
<link href="~/content/custom.css" rel="stylesheet" /> 

Now, if you define “h1” tag inside the “jumbotron” class, you see the design as you specified in custom class, not as defined in base class.

 
override or change bootstrap class with css
bootstrap css tutorial with examples
Bootstrap Examples | Join CSS Course