bootstrap custom css file

Question

I am using the sample page from twitter bootstrap example templates.

http://twitter.github.io/bootstrap/examples/starter-template.html

I was wondering if I can include a custom css file in it ? to add some customization ?

I saved the starter template files as shared.html and I have the _files folder along with it . How or where should I put a custom.css file ? Can I even do it ? What will be the best way to achieve something like this ?

This is my shared.html file which has the following lines in the styling area :

 <link href="twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet"> 

 <style> 

body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ } 

</style> 

<link href="twitter.github.io/bootstrap/assets/css/… rel="stylesheet">

Here's my navbar part of the code:

<body>    

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

Here's my custom.css file

.navbar-inverse .navbar-fixed-top .navbar-inner {
                background-color: #E01B5D; /* fallback color, place your own */

                /* Gradients for modern browsers, replace as you see fit */
                background-image: -moz-linear-gradient(top, #333333, #222222);
                background-image: -ms-linear-gradient(top, #333333, #222222);
                background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
                background-image: -webkit-linear-gradient(top, #333333, #222222);
                background-image: -o-linear-gradient(top, #333333, #222222);
                background-image: linear-gradient(top, #333333, #222222);
                background-repeat: repeat-x;

                /* IE8-9 gradient filter */
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
              }

Stefan · Accepted Answer · 2013-07-15 18:58:04Z

3

Of course you can, first create custom.css and put it in _files then in shared.html find the line that includes the bootstrap css file add this after:

<link type="text/css" rel="stylesheet" href="_files/custom.css" />

You also need to include http:// for the two bootstrap files and finally check that your using the right selector; to change the colors of .navbar-inner you should be using .navbar-inverse .navbar-inner

edited Jul 15, 2013 at 18:58

answered Jul 15, 2013 at 18:30

Stefan

3,0811 gold badge24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

thestralFeather7 Over a year ago

it didn't work , I can't see any changes . my styling lines are as follows : <link href="twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet"> <style> body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ } </style> <link href="twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="shared_files/custom.css" >

Stefan Over a year ago

@novice7 can you post your custom.css file, and confirm that it is being loaded properly by checking the network tab in web inspector on firebug.

thestralFeather7 Over a year ago

i edited my question again @stefan . can you just check once if the custom.css file is right or not ?

Stefan Over a year ago

unless you are using scss the css you posted won't work use .navbar-inverse .navbar-inner { CSS_HERE }

Stefan Over a year ago

so your issue is with file paths, if you want to put custom.css in _files remember to change the path in the html to <link href="_path/custom.css" rel="stylesheet"> Don't forget to accept this answer too.

|

2 revs · Accepted Answer · 2017-05-23 11:49:12Z

3

Here are 2 great resources on customizing Bootstrap:

1) Twitter Bootstrap Customization Best Practices

2) http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/

If you do define a custom.css make sure it is placed after bootstrap.css in the HTML HEAD.

The 'starter template' is also available at Bootply: http://bootply.com/61937, where you can fiddle with the CSS and preview your changes/customization live.

edited May 23, 2017 at 11:49

community wiki

2 revs
ZimSystem

Collectives™ on Stack Overflow

bootstrap custom css file

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related