Alignment in Bootstrap

When working with the framework, Bootstrap usually encounters three main problems:

1. How to put content at the bottom of the column?
2. How to create a multi-row gallery of columns of the same height in one .row?
3. How to center several columns horizontally if their total width is less than 12 units and the remaining width is odd?

To solve the first two problems, you need to download a small plugin .

The solution to the third problem is peeped here .

Common code

<style> [class*=col-] {position: relative} .row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0} .row-centered {text-align:center} .row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top} </style> <script src="assets/conformity/conformity.js"></script> <script> $(document).ready(function () { $('.row-conformity > [class*=col-]').conformity(); $(window).on('resize scroll', function() { $('.row-conformity > [class*=col-]').conformity(); }); }); </script> 

1. How to put content at the bottom of the column?

 <div class="row row-conformity"> <div class="col-sm-3"> <br><br><br> </div> <div class="col-sm-3"> <div class="to-bottom">    </div> </div> </div> 

2. Multiple gallery of columns of the same height in one .row

 <div class="row row-conformity"> <div class="col-sm-4">...</div> <div class="col-sm-4">...</div> <div class="col-sm-4">...</div> <div class="col-sm-4">...</div> <div class="col-sm-4">...</div> <div class="col-sm-4">...</div> </div> 

3. Horizontal centering of several columns if their total width is less than 12 units and the remaining width is odd

 <div class="row row-centered"> <div class="col-sm-3">...</div> <div class="col-sm-4">...</div> </div> 

Both classes can work together.

 <div class="row row-conformity row-centered"> ... </div>