CODEWITHSUNDEEP
csstwitter-bootstrap-3
sterix24
sterix24

Reputation: 2400

Alignment issue with Bootstrap 3

I have a 2 row layout, with 1 column in the first row, and three columns in the second row. The text is aligned left in the one column, and the three columns in the second row are all center aligned like so:

enter image description here

What I want to do is to somehow align the text in the one column with the left edge of the first item in the 3 column layout, but I'm not sure if this is possible? (at least not without using js). Is there a simple way to do this using the bootstrap classes?

Upvotes: 0

Views: 21

Answers (1)

wezten
wezten

Reputation: 2256

You can put the top text inside the same container as 'Centered 1', and then move it up using position:absolute. See fiddle: https://jsfiddle.net/avgh4x67/.

HTML:

<div id='above'></div>
<div class='container'>
<div class='row'>
  <div class='col-sm-4'>
    <div>
      Centered 1
      <div id='centered-1-aligned'>aligned</div>
    </div>
  </div>
  <div class='col-sm-4'>
    <div>Centered 2</div>
  </div>
  <div class='col-sm-4'>
    <div>Centered 3</div>
  </div>
</div>
</div>

CSS:

#above {height: 80px; border: solid 3px red; margin-bottom: 10px;}
.col-sm-4 {text-align:center; border: solid 3px red; }
.col-sm-4 > div {display:inline-block;}
#centered-1-aligned {text-align: left; position: absolute; top: -80px;}

Upvotes: 1

Related Questions