'Override Twitter's Bootstrap <hr> styling

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;

}
csstwitter-bootstrap


Solution 1:[1]

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>

Solution 2:[2]

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

Solution 3:[3]

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

<hr class="bg-success">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 barskyn
Solution 3 Brett Green

Related Questions