CODEWITHSUNDEEP
csstwitter-bootstrap-3vertical-alignment
drizzy
drizzy

Reputation: 139

Bootstrap containers/columns/rows out of place

I'm having a little trouble with row and column alignment using Bootstrap.

<div class="container">
    <div class="col-md-3">
        <img src="/assets/images/home/youth.jpg">" alt="...." class="img-responsive"></img>
    </div>
    <div class="row">
        <div class="col-md-2 col-sm-2 front-col">
            col-md-2
        </div>
        <div class="col-md-2 col-sm-2 front-col">
            col-md-2
        </div>
        <div class="col-md-2 col-sm-2 front-col">
            col-md-2
        </div>
    </div> <!-- ./row -->

    <div class="row"><!-- Row 2 -->
        <div class="col-md-2 col-sm-2 front-col">
            col-md-2
        </div>
    </div>

My issue here is that the column in the second row (near the bottom of the code) isn't appear below my first row, it's appearing below the image. I.e. I have an image in a column on the left-hand side, and to the right of this I have a row with 3 row columns. After closing this row, I want another row directly below it, however, the row appears below the image.

(The 'front-col' selector isn't relevant [I believe] -- it sets padding-left on the 3 columns to 5px)

Thanks in advance for any help.

Smiths

Upvotes: 0

Views: 1903

Answers (1)

davidpauljunior
davidpauljunior

Reputation: 8338

You haven't wrapped the first .col-md-3 inside a .row. If you do that your second row will appear below it rather than next to it.

<div class="row">
  <div class="col-md-3">
    <img src="http://placehold.it/100x100" alt="...." class="img-responsive">
  </div>
</div>

As a side note:

  • Image tags don't have closing tags, like </img>. See my correction above.
  • You've missed the closing container div tag </div>.
  • If you use class="col-sm-2 you don't need to also have col-md-2. Only add that if they number of columns is different for the larger screen.
  • You shouldn't mess around with the padding or margins on grid structure divs. You mentioned that your .front-col changes the padding, but that is likely to break the grid.

Here's a demo.

Upvotes: 2

Related Questions