There is a row which has four col-sm-3
columns. I need to put some text in the center of this row which means the text need to span the 2nd column and the 3rd column.
Here's some 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: To clarify,I need the text to be overlayed on the same line.
Just add
<div class="text-center">Center aligned text.</div>
Before all of those columns like 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 you want something to take only set amount of columns, then you need another row and offset like 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 you want that text to span/float literally over those two spans, then you will need something similar like "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>