CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Tig21
Tig21

Reputation: 23

Center element in Bootstrap row with two elements at each side

I'm working with Bootstrap 3.0 and I need one row with three elements. I want one fixed at the center and other two at the left and right sides. The following code shows what I have. This works, but it makes three rows. 

 <div class="row-centered">
  <span class="text-left">text</span>
  <div class="center-block" style="width:200px;background-color:#ccc;">...</div>
  <div class="text-right">text</div>
</div>

Upvotes: 1

Views: 1931

Answers (2)

alex
alex

Reputation: 7471

You could use <div class="row"> and <div class="col-sm-4"> (where "col-sm-4" is interchangable with classes like "col-sm-3", "col-md-4", etc.) to put elements in-line on the same row - here's a JSFiddle.

<div class="row">
  <div class="col-xs-4 text-right">text</div>
  <div class="col-xs-4" style="background-color:#ccc;">...</div>
  <div class="col-xs-4 text-left">text</div>
</div>

Upvotes: 1

PseudoNinja
PseudoNinja

Reputation: 2856

try using a tradition row and take advantage of the Bootstrap Grid. Static widths are a bad idea but if you told me specifically what width you are looking to achieve we can better suit it with a column size.

<div class="row">
<div class="col-xs-4 text-left">text</div>
<div class="col-xs-4 text-center" style="background-color:#CCC;">...</div>
<div class="col-xs-4 text-right">text</div>
</div>

Upvotes: 0

Related Questions