How to style Bootstrap?

Question

I am having hard time understanding bootstrap (http://getbootstrap.com/ ). You guys might laugh but it's true :)

I know how to add navigation and almost any components that they provide

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Copy and Pasting can do the job but how do we style it? Is it pure Overriding the class?

.navbar {
    my override style
}

.navbar-default {
    my override style
}

or we create our own class maybe if i have blog i call it blog-nav and then style to make it looks like what I preffer?

<nav class="navbar navbar-default blog-nav">

</nav>

I can't get and wrap with the idea of styling in Bootstrap, I know that bootstrap follow OOCSS (Object Oriented CSS) Architecture and I found out this idea can be super effective when styling.

So back to the question How to style bootstrap? For example i want to create an interactive panel in a page

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-default></div>
        </div>
        <div class="col-md-3">
            ...
        </div>
        <div class="col-md-3">
            ...
        </div>
    </div>
</div>

How can I customize the panel?.. Do I have to override the panel class, or create a new class and add it beside panel?

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-default my-panel<!-- Like this? -->></div>
        </div>
    </div>
</div>

And how can I follow the OOCSS, I get the concept already but separating class means each class will have specific style and the other class will work/styled based on the parent class(base/object) . How can I identify each class have this and that styling? This is hard for me :(

If anyone have tips regarding this and best practices on how to style bootstrap or anything related please share it with me :) and Peace.

Thank you

Just make sure that the Style sheet with your custom code is called after the Bootstrap style sheet, and you'll be fine. Good Luck. — induprakash, Feb 12 '16 at 05:06

score 1 · Accepted Answer · answered Feb 12 '16 at 04:59

The basic idea of customizing the bootstrap is by overriding the bootstrap classes.

So in your html file you first call the bootstrap.css or bootstrap.min.css file. Do not edit this file at all.

If you want to modify a specific class, make your own style.css file and create a class with the same name in it. Now you can add all styles you want in this class.

Now when you call the style.css, make sure it's always beneath the bootstrap.min.css class for the overriding to take effect.

So your head section of html page would look like:

<head>
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
   <link href="/css/style.css" rel="stylesheet" type="text/css">
</head>

Eg: if you want to modify the style of a .panel class, in your style.css file,

.panel{
//Your styles. The class name will be exactly same as the bootstrap class name. 
}

But what if i want different variaton of panel? if i style the .panel it would apply to all panel right.. — postsrc, Feb 12 '16 at 06:08
Yes it will apply to all panel. You can create custom classes and add it along with your bootstrap class in html — Jilson Thomas, Feb 12 '16 at 06:31

score 0 · Answer 2 · answered Feb 12 '16 at 05:53

What you need to do here is. Make your custom stylesheet and put after the bootstrap style sheet. like this

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/customstyle.css" rel="stylesheet">

I prefer to make your own custom class and put it with bootstrap class so if in future if you want to change your bootstrap version then it don't affect your changes.

Other thing you need to be follow is :

Try to avoid !important property as much as possible if it is not necessary
Don't touch bootstrap style or js files. make your changes in your custom style
Put media-queries after your custom style.

So basically it's better to add my own class after the bootstrap class? for examaple — postsrc, Feb 12 '16 at 06:06

How to style Bootstrap?

2 Answers2