CSS Bootstrap overrides my own CSS

Question

I am trying to create a split-button in my website (AS.NET WebForms). So far the only split-button implementation I like is the one from Bootstrap. I am not using any other feature of their framework. However, as soon as I insert:

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

My own css is a mess. I tried to isolate only the classes I would need for splitbutton, but I was not able to successfully do it.

This is my html code for the splitbutton with the requiered classes

<div class="btn-group">
                          <button type="button" onclick="NewPost();return false;" class="btn btn-primary">Enviar</button>
                          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
                          <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Enviar con notificaciones</a></li>
                          </ul>
                    </div>

Does anybody know a way to isolate the desire classes? Or may be point me to another implementation of a splitbutton that is similar to this one and cross-browser? I googled a lot but the only usable one I found was bootstrap.

Answer 1

A good rule of thumb. Always put the stylesheet with the rules you want to be most authoritative last. You probably have

<link rel="stylesheet" href="/css/mystyles.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

So any styles declared in bootstrap css will override yours. instead try

 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/mystyles.css">

This way the rules in your stylesheet have more precedence.

Aside from that, you may be better off not using the minified version of bootstrap so you can remove any conflicting classes easier.

Answer 2

You go to the Customizer on getbootstrap.com http://getbootstrap.com/customize/

Toggle the stuff you need:

Then you download it.

You open it up. Look at the base styles and the global box-sizing:border-box.

Either you change all your CSS to work with box-sizing: border-box (google it), or you put that on the :before, :after, and element on all the bootstrap css that you need for forms, buttons, and the dropdown (they work together).

Answer 3

As mentioned in the other solutions on this page, there are ways like:

1. Creating a custom bootstrap css from the bootstrap website
2. Placing your custom styles that you do not want bootstrap to override, after the bootstrap style tags on the page

According to my experience, creating a custom bootstrap css or editing it to remove unrequired classes or style-rules is not so practical. This is because when a newer version of bootstrap is out, you might need to go through the cumbersome procedure again.

Instead, you could go ahead with overriding the bootstrap styles with your own styles, placed after the bootstrap styles, with another step that will more effectively help you to prevent others from overriding your styles.

You can have a look at specificity of CSS styles at http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ or https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

One example could be, writing a style

.btn {
    background: red;
}

as

#mypage .btn {
    background: red;
}

where, mypage could be an ID of a parent-most element on the page (may be the body tag?). This would make your style rules more specific than the ones that are defined in the bootstrap CSS, they will no longer be able to override yours then.

Please note that the above code snippet is just an illustration, and you could definitely write better styles for the cause.

Answer 4

使您的样式表成为最后导入的 css 文件。

Answer 5

I'm not sure if this will answer your question exactly but what I do in all my BS 3 projects is:

In my header:

<link rel="stylesheet" href="custom.css">

In custom.css

@import boostrap.less // or the fully compiled bootstrap css
// all your custom stuff, overrides, etc. down here

This way we load up boostrap first but anything custom you want to do will be loaded last meaning your chances of overriding are high and won't cause conflicts. Also it's one line and a lot cleaner for your <head>

Answer 6

So simple use less to strip out the BS components you don't need. Compile and minify a bootstrap.min.css file and then import this into your stylesheet using:

@import url("bootstrap.min.css"); at the top. Then in your HTML simply include your CSS and these will be read after.

Answer 7

use '!important' after your css value, for example :

pre {
     white-space: pre-wrap !important; 
}

h1 {
     color: red !important; 
}

Answer 8

A lot of people are talking about adding your custom css after bootstrap. Typically it seems this works, however, I've come across a time, when using the .modal class where it appears to reload the bootstrap overtop my custom css. I don't (yet) know why. In that case I have worked around the problem by either creating a class for my element in my css (and changing my html to use that class) which makes my css more specific/narrowly defined and therefore takes precedence, or by using !important, as mentioned by @kder.

So, try the order, and if for some reason that doesn't work, you have to find a way to force your css to be more specifically targetted or use !important.

Example (code snipped for brevity). In this code I have bootstrap css followed by my tripper.css. If I remove the code at the bottom with class="modal", this works and my body is formatted according to the css in tripper.css. If I leave the modal code at the bottom, I have to add !important to the body selector.

tripper.css

body {
  background-color:#00aaff;
}

html

<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<head>
<title>Gear Closet</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link rel="stylesheet" href="/css/tripper.css">

</head>

<body>
  <div th:replace="fragments.html :: header"></div>
  <div th:replace="fragments.html :: navigation"></div>

  <div class="jumbotron text-center">
...
  </div>

  <div class="jumbotron text-center">
...
  </div>

  <!-- The Modal -->
  <div class="modal" id="importModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div th:replace="fragments.html :: modalHeader(title=#{gear.import.title})"></div>
        
        <!-- Modal body -->
        <div class="modal-body">
          <div th:replace="fragments.html :: loadFile"></div>
        </div>

        <!-- Modal footer -->
        <div th:replace="fragments.html :: modalFooter"></div>
      </div>
    </div>
  </div>
  
  <div class="modal" id="addToBinModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div th:replace="fragments.html :: modalHeader(title=#{gear.addToBin.title})"></div>

        <!-- Modal Footer -->
        <div class="modal-footer">
          <label for="addGearBtn" class="btn btn-primary" th:text="#{navigate.add}">??navigate.add??</label>
          <label class="btn btn-danger" data-dismiss="modal" th:text="#{navigate.close}">??navigate.close??</label>
        </div>
      </div>
    </div>
  </div>

  <div class="modal" id="createBinModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div th:replace="fragments.html :: modalHeader(title=#{gear.createBin.title})"></div>
        



      </div>
    </div>
  </div>
</body>
</html>

Answer 9

As they said before, the bootstrap css importation must be before the custom css. Like this:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/styles.css">

Answer 10

I shifted my CSS code from my external CSS to the internal CSS. I tried to add !important, but it was not helping.

Furthermore, I shifted my custom CSS link below the bootstrap one, but that too didn't help. I know my way is messy, but it worked in my case.

Answer 11

having your custom css file at the end doesn't work.