27

I am trying to create a split-button in my website (ASPNET 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.

10 Answers 10

44

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.

3
  • Your solution doesn't work when there is no button style defined in your own css (in case you want to use browser's default button style).
    – Alex G
    Apr 17, 2017 at 2:00
  • @AlexG Right, it only works when you want to override styles, like what the OP was having trouble with.
    – Bryan
    May 8, 2017 at 22:37
  • 2
    This solution doesn't work for me. I have bootstrap.css two lines before style.css and it still overrides. May 12, 2020 at 18:17
12

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

Toggle the stuff you need:

enter image description here

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).

6

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.

1
  • This answer covers an important concept of CSS specificity which other answers didn't. For further reading on this, check out a nice article written by Amelia Wattenberger from here. Feb 28, 2021 at 18:20
3

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>
1
  • Bootstrap was overriding my color on a built-in nav-link class. Adding !important solved the issue. a.nav-link-main { color: #ffffff !important; }
    – joym8
    Apr 4, 2021 at 12:41
2

make your stylesheet the last imported css file.

1
  • 4
    How is it wrong? Style sheets cascade. Hence Cascading Style Sheets. Adding your own custom css last will over-ride properties in TBS.
    – ndesign11
    Oct 2, 2014 at 7:22
2

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.

1

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>

1

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">
1

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

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

h1 {
     color: red !important; 
}
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.