Twitter Bootstrap Question posted in

Override Twitter's Bootstrap <hr> styling-Twitter bootstrap

I want to change the color and size of a horizontal rule, but there is bootstrap default styling. How can I override it without manually changing bootstrap css?

 hr {
  background-size: 4px;
  border-top: 4px solid #FFF0F2;
  border-color: #FFF0F2;
  border: 4px;

}
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    This problem was solved simply by putting my custom CSS sheet after the Bootstrap library


  2. 0

    There are 3 ways to add your styling to the <hr> element. Check the following. You can override the bootstrap styling from your styling as below.

    PS: This answer is a general answer with all possibilities

    Inline Styling

    <!--bootstrap cdn-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!--Inline styling-->
<hr style="background-size: 4px; border-top: 4px solid #FFF0F2;
  border-color: #FFF0F2;">

    Internal Stylesheet

    <head>
<!--bootstrap cdn-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Internal Style sheet-->
<style>
hr {
  background-size: 4px;
  border-top: 4px solid #FFF0F2;
  border-color: #FFF0F2;
}
</style>
</head>

<body>

<hr>

</body>

    External Stylesheet

    hr {
  background-size: 4px;
  border-top: 4px solid #FFF0F2;
  border-color: #FFF0F2;
  background-color: red;
}
    <!--bootstrap cdn-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<hr>
    Login or Signup to reply.
  3. 0

    Works in bootstrap 4+ if you just want to change the color to use success/danger/etc… use bg-<theme>

    <hr class="bg-success">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search