CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
jsbisht
jsbisht

Reputation: 9649

Left align div using bootstrap css

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.

Upvotes: 0

Views: 213

Answers (2)

jsbisht
jsbisht

Reputation: 9649

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

Upvotes: 0

user4567954
user4567954

Reputation:

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

Upvotes: 2

Related Questions