Question posted in 
Im getting started with bootstrap and I wanted to make simple select using boostrap but somehow it ruins my page. I thought boostrap will override my own css but its not happening, why?
<link rel="stylesheet" type="text/css" href="bootstrap-select.min.css"/>
<script href="jquery-3.2.1.min.js"></script>
<script href="bootstrap.min.js"></script>
<script href="bootstrap-select.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
After swaping places(used links to make sure they are correct):
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" media="screen" href="bootstrap-select/dist/css/bootstrap-select.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="bootstrap-select/dist/css/bootstrap.min.css"/>
Select looks like:
https://i.imgur.com/VaAT9sW.png
4
Answers
This is due to the order you have your imports set. Imports further down get priority (overwrite) over imports prior to them.
Should be changed to:
(put the file you want to have less priority first)
Move all your JS at the bottom css on the top and try to remove the “screen” in the css part
< link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen” />
to
< link rel=”stylesheet” type=”text/css” href=”style.css”/>
Hope this help.
The order of external style sheets only matters if all the sheets have styles with same selectors, properties, weights, and specificity. That’s unlikely to be true.
So what I would do is first disable your sheet and view your web page with just Bootstrap. Press F12 in the browser and pull up the actual style cascade window and see which rules are being applied. I can tell you that you likely have a mush of styles in Bootstrap being inherited by the select element. Bootstrap starts by trying to change the core "select" element’s margins, fonts, and line-heights. It then layers over custom styles via classes it applies over those. Then look at the wrapper div or block element holding it. Bootstrap loves floats which break elements out of the page and blocks holding them.
Now add your sheet back in and look at what was cascaded down that added to Bootstrap’s styles.
Even if their classes cascaded over your styles, your styles might be changing properties Bootstrap does not affect. So I would turn off all styles in your sheet that affect "select" elements, then carefully bolt in your own select styles to ADD not change Bootstrap’s styles. I would only change simple effects like colors or the outer block level elements the "select" sits in.
you can override with
!importanteg:color: red!