Using CSS with Bootstrap framework

Question

How can I get access to my own CSS styles only in specified fragment of code in HTML if I using also Bootstrap framework?

For example I have defined style:

 ul {
            float: left;
            width: 140px;
    }

Bootstrap have also defined style for ul and I have conflict in view of my site because I am using both.

you already have answers, but for further reading here is an answer regarding this subject: http://stackoverflow.com/a/29269359/3448527 — dippas, Nov 24 '15 at 00:19

score 3 · Accepted Answer · answered Nov 23 '15 at 23:44

CSS applies precedence to the most specific identifier, so you can override bootstrap by being more specific, for example:

ul.mylist {
        float: left;
        width: 140px;
}

or

div.mystuff ul { 
        float: left;
        width: 140px;
}

This in html:

<ul class="mylist">

or

<div class="mystuff">
    <ul>

score 1 · Answer 2 · answered Feb 13 '17 at 16:38

First of all apply bootstrap.css on the page head and after than add link to your website's css. In this way your website css will take preference.

So when you apply your css it will take preference.

See How to Use Bootstrap - here.

Moreover you can give the "ul" element some id and apply the css with that id like this

ul#myul {
        float: left;
        width: 140px;
}

score 0 · Answer 3 · answered Nov 23 '15 at 23:45

0

Use id or class.

HTML

<ul class="my-ul">
  <!-- some li -->
</ul>

CSS

ul.my-ul {
  // your style
}

Example here : http://www.bootply.com/IhYhahzZAZ

if you are using id,

HTML

<ul id="myul">
  <!-- some li-->
</ul>

CSS

#my-ul {
  // some style
}

answered Nov 23 '15 at 23:45

Saehun Sean Oh

2,103
1
21
41

score 0 · Answer 4 · answered Nov 23 '15 at 23:47

If you want to override default bootstrap rules, load your mystyle.css AFTER including the bootstrap css, this way your the ul will become under the cotnrol of your CSS not bootstrap.

If you want to add specific css rule to a specific one element or bunch of them but not all, give it a unique #id - in case of more than one element give them a unique .class name - and freely control them according to your css rules

*Always remember that the most lower CSS rule in your css code will override above rules with same naming

score 0 · Answer 5 · answered Nov 23 '15 at 23:47

I would recommend using a preprocessor like SASS which allows you to easily override existing styles and do something like this below. Easy to read, maintain and extend in the long run.

custom_styling {
 ul {
  font-size:10px;
  color:tomato;
 }
}

You can then wrap your container with the class custom_styling. Overriding from there is simple.

score -1 · Answer 6 · answered Nov 23 '15 at 23:44

-1

Add the !important atthe end fo duplicated styles.

ul {
        float: left !important;
        width: 140px !important;
}

or customize your bootstrap style.

answered Nov 23 '15 at 23:44

Ruslan López

4,433
2
26
37

I didnt -1 you but it's poor practice to customize the bootstrap stylesheet. It's best to have your custom styles in a separate stylesheet – shredMER Nov 23 '15 at 23:48
`!important` rules – Feb 13 '17 at 16:40

Using CSS with Bootstrap framework

6 Answers6