Submitted by jsantos65 on Thu, 02/21/2019 - 21:07

This is a little basic at the moment but the plan is to build up a massive copy/paste sheet with all the block variants that I use often and hate retyping. I'm THAT lazy. Variants to be included:

Basic grids

Push, pull, reorders

Form elements with present IDs

 

Example sources

 

Three Equal Columns

.col-sm-4
.col-sm-4
.col-sm-4

 

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

 

Column Reordering

.col-sm-4 .col-sm-push-8
.col-sm-8 .col-sm-pull-4

 

  <div class="row">
    <div class="col-sm-4 col-sm-push-8" >.col-sm-4 .col-sm-push-8</div>
    <div class="col-sm-8 col-sm-pull-4" >.col-sm-8 .col-sm-pull-4</div>
  </div>
 
 
 
 

Box 1

Box 2

Box 3

 

Box 4

Box 5

Box 6

 

Box 7

Box 8

Box 9

 

Box 10

Box 11

Box 12

 
            <div class="col-sm-6 col-md-4"><p>Box 1</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 2</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 4</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 5</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 6</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 7</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 8</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 10</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 11</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 12</p></div>
        </div>