96

Here is my code:

<div class="container">
<div>
<h1>Welcome TeamName1</h1>
  asdf
  <hr>
  asdf

</div>
</div> <!-- /container -->

The hr tag does not seem to work as I would expect it. Instead of drawing a line, it creates a gap, like so:

enter image description here

0

8 Answers 8

144

the css property of <hr> are :

hr {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #EEEEEE -moz-use-text-color #FFFFFF;
  border-style: solid none;
  border-width: 1px 0;
  margin: 18px 0;
}

It correspond to a 1px horizontal line with a very light grey and vertical margin of 18px.

and because <hr> is inside a <div> without class the width depends on the content of the <div>

if you would like the <hr> to be full width, replace <div> with <div class='row'><div class='span12'> (with according closing tags).

If you expect something different, describe what you expect by adding a comment.

5
  • 3
    Thanks! Didn't realize you had to include the <hr> inside of a <div>. Odd. Commented Jun 6, 2013 at 17:18
  • 3
    I'm assuming span12 has been removed from Bootstrap at some point in the past two years because I don't have it, but putting my body content and the horizontal rule both in row classes worked for me.
    – Casey
    Commented May 15, 2014 at 13:27
  • 1
    fix border-color: #EEEEEE -moz-use-text-color #FFFFFF; with only border-color: #EEEEEE; Commented Oct 7, 2015 at 13:08
  • 3
    span12 has been replaced by col-sm-12 Commented May 12, 2016 at 11:24
  • This part of your code (border-width: 1px 0;) cause a 2px horizontal line! You should change it to: border-width: 1px 0 0 0; to make a 1px horizontal line. Commented Dec 4, 2016 at 5:04
46

Instead of writing

<hr>

Write

<hr class="col-xs-12">

And it will display full width as normal.

3
  • 8
    <div class="w-100"><hr></div>
    – drzymala
    Commented Oct 11, 2018 at 20:22
  • This is the most elegant solution for Bootstrap, thank you! Commented Apr 17, 2019 at 14:06
  • <hr class="w-100"> seems to be a more self-evident method to set the width. Commented Jul 3, 2020 at 8:59
41

I solved this by setting the HR background-color to black like so:

<hr style="width: 100%; color: black; height: 1px; background-color:black;" />
5
  • 4
    This is not exactly solving the problem, more like a hack... There are many better ways to over-ride the bootstrap styling than with an inline style.
    – JackDev
    Commented Aug 15, 2015 at 22:03
  • 1
    Please elaborate @DjangoBurger and share your solution.
    – James K
    Commented Aug 16, 2015 at 1:55
  • 1
    I think @DjangoBurger is mostly complaining about inline styles. You could have put this style in a class and assigned the classname here. I modified your solution that way for my own use, so thank you! Commented Dec 29, 2015 at 16:24
  • Agreed - that's an elegant remedy :)
    – James K
    Commented Dec 29, 2015 at 19:03
  • Works perfectly! I am using bootstrap and somehow my <hr> was unusual - it was transparent and not clearly seen.
    – user12465043
    Commented Mar 26, 2020 at 18:08
17

It is because Bootstrap's DEFAULT CSS for <hr /> is ::

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eeeeee;
}

it creates 40px gap between those two lines

so if you want to change any particular <hr /> margin style in your page you may try something like this ::

<hr style="margin-bottom:5px !important; margin-top:5px !important; " />

if you want to change appearance/other styles of any particular <hr /> in your page like color and border type or thickness the you may try something like :

<hr style="border-top: 1px dotted #000000 !important; " />

for all <hr /> in your page

<style>
   hr {
       border-top: 1px dotted #000000 !important;
       margin-bottom:5px !important; 
       margin-top:5px !important;
   }
</style>
5

By default, the hr element in Twitter Bootstrap CSS file has a top and bottom margin of 18px. That's what creates a gap. If you want the gap to be smaller you'll need to adjust margin property of the hr element.

In your example, do something like this:

.container hr {
margin: 2px 0;
}
3

I think it would look better if we add border-color : transparent as per below:

<hr style="width: 100%; background-color: black; height: 1px; border-color : transparent;" />

If you don't put the border transparent it will be white and i don't think that is good all time.

2

I was able to customize the hrTag by editing the inline styling as such:

<div class="row"> <!-- You can also position the row if need be. -->
<div class="col-md-12 col-lg-12"><!-- set width of column I wanted mine to stretch most of the screen-->
<hr style="min-width:85%; background-color:#a1a1a1 !important; height:1px;"/>
</div>
 </div>

The hrTag is now thicker and more visible; it's also a darker gray color. The bootstrap code is actually very flexible. As the snippet demonstrates above, you can use inline styling or your own custom code. Hope this helps someone.

1

You may want one of these, so to correspond to the Bootstrap layout:

<div class="col-xs-12">
    <hr >
</div>

<!-- or -->

<div class="col-xs-12">
    <hr style="border-style: dashed; border-top-width: 2px;">
</div>

<!-- or -->

<div class="col-xs-12">
    <hr class="col-xs-1" style="border-style: dashed; border-top-width: 2px;">
</div>

Without a DIV grid element included, layout may brake on different devices.

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.