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:
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:
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.
border-color: #EEEEEE -moz-use-text-color #FFFFFF;
with only border-color: #EEEEEE;
– Slowaways
Oct 7 '15 at 13:08
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.
– RAM
Dec 4 '16 at 5:04
I solved this by setting the HR background-color to black like so:
<hr style="width: 100%; color: black; height: 1px; background-color:black;" />
Instead of writing
<hr>
Write
<hr class="col-xs-12">
And it will display full width as normal.
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>
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;
}
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.
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.