css - How to put some text in the center of a bootstrap row? -
there row has 4 col-sm-3
columns. need put text in center of row means text need span 2nd column , 3rd column.
here bootply
here's code:
<div class="row"> <div class="col-md-3" style="background-color:yellow">123</div> <div class="col-md-3" style="background-color:green">456</div> <div class="col-md-3" style="background-color:red">789</div> <div class="col-md-3" style="background-color:grey">000</div> </div>
plus: clarify,i need text overlayed on same line.
just add
<div class="text-center">center aligned text.</div>
before of columns this
<div class="row"> <div class="text-center">center aligned text.</div> <div class="col-md-3" style="background-color:yellow">123</div> <div class="col-md-3" style="background-color:green">456</div> <div class="col-md-3" style="background-color:red">789</div> <div class="col-md-3" style="background-color:grey">000</div> </div>
but if want take set amount of columns, need row , offset this
<div class="row"> <div class="col-md-offset-3 col-md-6"> <div class="text-center">center aligned text.</div> </div> </div> <div class="row"> <div class="col-md-3" style="background-color:yellow">123</div> <div class="col-md-3" style="background-color:green">456</div> <div class="col-md-3" style="background-color:red">789</div> <div class="col-md-3" style="background-color:grey">000</div> </div>
edit: if want text span/float literally on 2 spans, need similar "shawn taylor" suggested
<div class="row"> <div class="col-md-3" style="background-color:yellow">123</div> <div class="col-md-6" style="position:relative;"> <div style="position: absolute; z-index: 2; left: 0; top: 0; width: 100%;" class="text-center">center aligned text.</div> <div class="row"> <div class="col-md-6" style="background-color:green">456</div> <div class="col-md-6" style="background-color:red">789</div> </div> </div> <div class="col-md-3" style="background-color:grey">000</div> </div>
Comments
Post a Comment