<hr> tag in Twitter Bootstrap not functioning correctly?

twitter-bootstrap
Henry Henrinson picture Henry Henrinson · Jul 20, 2012 · Viewed 395k times · Source

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

Answer

baptme picture baptme · Jul 20, 2012

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.

Related questions

Center a column using Twitter Bootstrap 3

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3? I want a div, with a class .centered to be centered within the container. I may use a row if there are multiple …

Read More
How to open a Bootstrap modal window using jQuery?

I'm using Twitter Bootstrap modal window functionality. When someone clicks submit on my form, I want to show the modal window upon clicking the "submit button" in the form. <form id="myform" class="form-wizard"> <h2 class="form-wizard-heading"&…

Read More
vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link: The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using …

Read More