发表新帖
发表新帖

How can I override Bootstrap CSS styles?

前端 未结
关注
12 1061
囚心锁ツ
囚心锁ツ 2020-11-22 05:35

I need to modify bootstrap.css to fit my website. I feel it\'s better to create a separate custom.css file instead of modifying bootstrap.css

相关标签:
12条回答
  • 日久生厌
    2020-11-22 06:03

    In the head section of your html place your custom.css below bootstrap.css.

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

    Then in custom.css you have to use the exact same selector for the element you want to override. In the case of legend it just stays legend in your custom.css because bootstrap hasn't got any selectors more specific.

    legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

    But in case of h1 for example you have to take care of the more specific selectors like .jumbotron h1 because

    h1 {
  line-height: 2;
  color: #f00;
}

    will not override

    .jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

    Here is a helpfull explantion of specificity of css selectors which you need to understand to know exactly which style rules will apply to an element. http://css-tricks.com/specifics-on-css-specificity/

    Everything else is just a matter of copy/paste and edit styles.

    0 讨论(0)
  • 抹茶落季
    2020-11-22 06:03

    A bit late but what I did is I added a class to the root div then extends every bootstrap elements in my custom stylesheet:

    .overrides .list-group-item {
    border-radius: 0px;
}
.overrides .some-elements-from-bootstrap { 
    /* styles here */
}

    <div class="container-fluid overrides">
    <div class="row">
        <div class="col-sm-4" style="background-color: red">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">Hey</a></li>
                <li class="list-group-item"><a href="#">I was doing</a></li>
                <li class="list-group-item"><a href="#">Just fine</a></li>
                <li class="list-group-item"><a href="#">Until I met you</a></li>
                <li class="list-group-item"><a href="#">I drink too much</a></li>
                <li class="list-group-item"><a href="#">And that's an issue</a></li>
                <li class="list-group-item"><a href="#">But I'm okay</a></li>
            </ul>
        </div>
        <div class="col-sm-8" style="background-color: blue">
            right
        </div>
    </div>
</div>
    0 讨论(0)
  • 予麋鹿
    2020-11-22 06:04

    Give ID to legend and apply css. Like add id hello to legend() the css is as follw:

    #legend  legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}
    0 讨论(0)
  • 佛祖请我去吃肉
    2020-11-22 06:06

    Using !important is not a good option, as you will most likely want to override your own styles in the future. That leaves us with CSS priorities.

    Basically, every selector has its own numerical 'weight':

    • 100 points for IDs
    • 10 points for classes and pseudo-classes
    • 1 point for tag selectors and pseudo-elements
    • Note: If the element has inline styling that automatically wins (1000 points)

    Among two selector styles browser will always choose the one with more weight. Order of your stylesheets only matters when priorities are even - that's why it is not easy to override Bootstrap.

    Your option is to inspect Bootstrap sources, find out how exactly some specific style is defined, and copy that selector so your element has equal priority. But we kinda loose all Bootstrap sweetness in the process.

    The easiest way to overcome this is to assign additional arbitrary ID to one of the root elements on your page, like this: <body id="bootstrap-overrides">

    This way, you can just prefix any CSS selector with your ID, instantly adding 100 points of weight to the element, and overriding Bootstrap definitions:

    /* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
  line-height: 1;
  color: inherit;
}

/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
  line-height: 1;
  color: inherit;
}

/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
  line-height: 1;
  color: inherit;
}
    0 讨论(0)
  • 野的像风
    2020-11-22 06:06

    If you are planning to make any rather big changes, it might be a good idea to make them directly in bootstrap itself and rebuild it. Then, you could reduce the amount of data loaded.

    Please refer to Bootstrap on GitHub for the build guide.

    0 讨论(0)
  • 南笙
    2020-11-22 06:15

    To reset the styles defined for legend in bootstrap, you can do following in your css file:

    legend {
  all: unset;
}

    Ref: https://css-tricks.com/almanac/properties/a/all/

    The all property in CSS resets all of the selected element's properties, except the direction and unicode-bidi properties that control text direction.

    Possible values are: initial, inherit & unset.

    Side note: clear property is used in relation with float (https://css-tricks.com/almanac/properties/c/clear/)

    0 讨论(0)
 看不清?
提交回复
热议问题