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 stackoverflow.com/questions/19196082/… — casraf
– casraf, Commented Feb 15, 2015 at 13:16

user4567954 · Accepted Answer · 2015-02-15 13:17:22Z

2

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

answered Feb 15, 2015 at 13:17

user4567954

Sign up to request clarification or add additional context in comments.

4 Comments

jsbisht Over a year ago

Plain and simple. Thanks

user4567954 Over a year ago

You're welcome! Have a further look to bootstrap's grid. Containers, rows and columns. You will find it really useful for the future!

jsbisht Over a year ago

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 Over a year ago

found a solution to the problem. Added the same here.

jsbisht · Accepted Answer · 2015-02-15 13:56:14Z

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

Collectives™ on Stack Overflow

Left align div using bootstrap css

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related