Left align div using bootstrap css

Question

I have following divs that i am trying to align in a certain order. I would like to have them form two rows, with divs aligned to left always.

I have the code of the same here: Code on Plnkr

Here is a snippet of the code:

<div class="col-md-4 col-sm-6 col-xs-12">
    <table class="table">
        <tr class="info"><td><b>Row 1</b></td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td></td></tr>
    </table>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
    <table class="table">
        <tr class="info"><td><b>Row 1</b></td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td></td></tr>
    </table>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
   <table class="table">
        <tr class="info"><td><b>Row 1</b></td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td></td></tr>
    </table>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
    <table class="table">
        <tr class="info"><td><b>I have to be left aligned</b></td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td></td></tr>
    </table>
</div>

Live preview of the same is here: Live preview

What can I do to left align the fourth div.

Might wanna take a look at this http://stackoverflow.com/questions/19196082/bootstrap-how-to-stack-divs-of-different-heights — casraf, Feb 15 '15 at 13:16

score 2 · Answer 1 · answered Feb 15 '15 at 13:17

You can wrap the first three columns in a row and then the last column in another row.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  </head>

  <body>
    <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
        <table class="table">
            <tr class="info"><td><b>Row 1</b></td></tr>
            <tr><td>item</td></tr>
            <tr><td>item</td></tr>
            <tr><td></td></tr>
        </table>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <table class="table">
            <tr class="info"><td><b>Row 1</b></td></tr>
            <tr><td>item</td></tr>
            <tr><td>item</td></tr>
            <tr><td>item</td></tr>
            <tr><td>item</td></tr>
            <tr><td></td></tr>
        </table>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
       <table class="table">
            <tr class="info"><td><b>Row 1</b></td></tr>
            <tr><td>item</td></tr>
            <tr><td>item</td></tr>
            <tr><td></td></tr>
        </table>
    </div>
        </div>
    <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12" style="float:left;">
        <table class="table">
            <tr class="info"><td><b>I have to be left aligned</b></td></tr>
            <tr><td>item</td></tr>
            <tr><td>item</td></tr>
            <tr><td></td></tr>
        </table>
    </div>
    </div>
  </body>

</html>

Here is the plunker: http://plnkr.co/edit/8SSAsT76bHNdSvThhl0v?p=preview

You're welcome! Have a further look to bootstrap's grid. Containers, rows and columns. You will find it really useful for the future! — , Feb 15 '15 at 13:22
That works but mobile view is still not working as expected. When mobile view is using 'col-sm-*' the third div and fourth div get stacked up instead of getting aligned side by side. — jsbisht, Feb 15 '15 at 13:51

score 0 · Answer 2 · answered Feb 15 '15 at 13:56

I got it working with the following code.

<div class="col-md-4 col-sm-6 col-xs-12">
    <table class="table">
        <tr class="info"><td><b>Row 1</b></td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td></td></tr>
    </table>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
    <table class="table">
        <tr class="info"><td><b>Row 1</b></td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td></td></tr>
    </table>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-md-4 col-sm-6 col-xs-12">
   <table class="table">
        <tr class="info"><td><b>Row 1</b></td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td></td></tr>
    </table>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4 col-sm-6 col-xs-12">
    <table class="table">
        <tr class="info"><td><b>I have to be left aligned</b></td></tr>
        <tr><td>item</td></tr>
        <tr><td>item</td></tr>
        <tr><td></td></tr>
    </table>
</div>

Here i am using bootstraps's clear fix selectively to get 'Responsive column resets'. More here Responsive column resets

Left align div using bootstrap css

2 Answers2