hr tag in Twitter Bootstrap not functioning correctly

Question

Here is my code    lt div class  container  gt   lt div gt   lt h1 gt Welcome TeamName1 lt  h1 gt    asdf    lt hr gt    asdf   lt  div gt   lt  div gt   lt  --  container -- gt    The hr tag does not seem to work as I would expect it  Instead of drawing a line  it creates a gap  like so

User · Answer

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.

User · Answer

You may want one of these  so to correspond to the Bootstrap layout   lt div class  quot col-xs-12 quot  gt       lt hr  gt   lt  div gt    lt  -- or -- gt    lt div class  quot col-xs-12 quot  gt       lt hr style  quot border-style  dashed  border-top-width  2px  quot  gt   lt  div gt    lt  -- or -- gt    lt div class  quot col-xs-12 quot  gt       lt hr class  quot col-xs-1 quot  style  quot border-style  dashed  border-top-width  2px  quot  gt   lt  div gt   Without a DIV grid element included  layout may brake on different devices

User · Answer

It is because Bootstrap s DEFAULT CSS for  lt hr   gt  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  lt hr   gt  margin style in your page you may try something like this      lt hr style  margin-bottom 5px  important  margin-top 5px  important      gt    if you want to change appearance other styles of any particular  lt hr   gt   in your page like color and border type or thickness the you may try something like     lt hr style  border-top  1px dotted  000000  important      gt    for all  lt hr   gt  in your page   lt style gt     hr          border-top  1px dotted  000000  important         margin-bottom 5px  important          margin-top 5px  important        lt  style gt

User · Answer

Instead of writing   lt hr gt    Write   lt hr class  col-xs-12  gt    And it will display full width as normal

User · Answer

I was able to customize the hrTag by editing the inline styling as such    lt div class  row  gt   lt  -- You can also position the row if need be  -- gt   lt div class  col-md-12 col-lg-12  gt  lt  -- set width of column I wanted mine to stretch most of the screen-- gt   lt hr style  min-width 85   background-color  a1a1a1  important  height 1px    gt   lt  div gt    lt  div gt    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

User · Answer

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

User · Answer

I solved this by setting the HR background-color to black like so    lt hr style  width  100   color  black  height  1px  background-color black     gt

User · Answer

the css property of  lt hr gt  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  lt hr gt  is inside a  lt div gt  without class the width depends on the content of the  lt div gt   if you would like the  lt hr gt  to be full width  replace  lt div gt  with  lt div class  row  gt  lt div class  span12  gt   with according closing tags    If you expect something different  describe what you expect by adding a comment

[twitter-bootstrap] <hr> tag in Twitter Bootstrap not functioning correctly?

Examples related to twitter-bootstrap