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-15T18:58:04.257

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 '13 at 18:58

answered Jul 15 '13 at 18:30

Stefan

2,961
1
22
34

it didn't work , I can't see any changes . my styling lines are as follows : – thestralFeather7 Jul 15 '13 at 18:41
@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. – Stefan Jul 15 '13 at 18:43
i edited my question again @stefan . can you just check once if the custom.css file is right or not ? – thestralFeather7 Jul 15 '13 at 19:21
unless you are using scss the css you posted won't work use .navbar-inverse .navbar-inner { CSS_HERE } – Stefan Jul 15 '13 at 19:28
nope not really , the color I have chosen is red , so it should be easy to notice ! but nothing so far ! @stefan I just updated the question with the navbar part of code ! – thestralFeather7 Jul 15 '13 at 19:51
Here are two working files check these out and see how they compare to yours: HTML: https://gist.github.com/stfnhrrs/d9eed9fe5b3f05142053 CSS: https://gist.github.com/stfnhrrs/7e75bf1c86d8390900cc You may have to edit the path to your custom.css file, in the html. – Stefan Jul 15 '13 at 19:57
technically where should I put my custom.css file ? should I write a preprocessor or anything for it ? Because , nothing is changing for me :( I am at my wit's end . this is not supposed to be that hard =/ – thestralFeather7 Jul 15 '13 at 20:12
@novice7 for now put custom.css in the same directory as the html – Stefan Jul 15 '13 at 20:14
yeap i did that ! it's on my desktop ! – thestralFeather7 Jul 15 '13 at 20:16
1

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 Don't forget to accept this answer too. – Stefan Jul 15 '13 at 20:18

score 3 · Answer 2 · edited May 23 '17 at 11:49

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.

bootstrap custom css file

2 Answers2

Linked