More Than 12 Cols Per Row in Bootstrap

bootstrap allows more than 12 columns in a row.

Layoutit code generator

Use the above code generator which will give you an easy way to nest columns. Start by deleting the Hello World jumbotron, then add a 6 6 grid(from the grid system side menu) then a nested 4 4 4 grid in each. The downloadable output code will show the nesting which is easy to see. Note the clearfix tags are just clearing any floating commands used in surrounding code, the grid divisions menu choices(in the side bar itself) can be over written ie the 2nd one down is 6 6 so just delete them and add 3 3 3 3 (with space as the divider), if you then add this to the two 6's as initially given above you end up with 8 columns of 1.5 width great.

Also in Chrome browser, you can right click and inspect elements (CTRL+Shift+I) and see padding and margins in a diagram on the right hand side which I find very cool.

More than 12 cols per row in bootstrap

The image is giving you the answer.

See, Bootstrap floats the columns to the left, just as you say. The float model means that the element will be floated to the left blocking the flow of the next element. Thus, in your first picture, see how your second column, first row is slightly longer and probably has some margin and padding which is blocking the flow of the element in that following row. In the second picture you don't see it because the long element is at the side. And the best description of a symptom was given by yourself:

I am generating this content through a wordpress loop in a custom
shortcode, and I noticed that somehow if I remove this line in the
Shortcode function the columns float just fine as in this jsFiddle:

$output .= '<p>' . get_the_excerpt() . '</p>';

There you have. The excerpt is somehow 'randomish' in the length of the containing block, so your problem is something that happens almost every single day to any WP developer. There are many different ways to solve it, but the easiest one is this:

.col-md-4{min-height:400px /* test the height you need to enable normal flow of the floats */}

And voilá, problem solved!

More than 12 bootstrap columns with a horizontal scroll

Four tricks with the Bootstrap grid

1) 8 columns

You can use nested grids. Without any tables or customizations. For example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid">  <div class="row">    <div class="col-md-3">      <div class="row text-center">        <div class="col-md-6"><b>Field 1</b></div>        <div class="col-md-6"><b>Field 2</b></div>      </div>    </div>    <div class="col-md-3">      <div class="row text-center">        <div class="col-md-6"><b>Field 3</b></div>        <div class="col-md-6"><b>Field 4</b></div>      </div>    </div>    <div class="col-md-3">      <div class="row text-center">        <div class="col-md-6"><b>Field 5</b></div>        <div class="col-md-6"><b>Field 6</b></div>      </div>    </div>    <div class="col-md-3">      <div class="row text-center">        <div class="col-md-6"><b>Field 7</b></div>        <div class="col-md-6"><b>Field 8</b></div>      </div>    </div>  </div></div>

Twitter Bootstrap - Style more than 12 columns in a row?

Define a constant height to "thumbnail" class.

5 columns per row in Bootstrap-4

Updated 2019/12/02

For Bootstrap < 4.4 : Get rid of these Bootstrap columns and just use the magic of flexboxes.

Just add my .w-20 class to your CSS.

See it in action in my fiddle.

For Bootstrap >= 4.4 : Use the brand new row-cols-* classes

Add .row-cols-5 to your .row containing elements. No custom CSS needed.

See the 4.4 doc here : https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

Now play with my fiddle and observe the same results in my fiddle with both techniques :

.w-20 {  -webkit-box-flex: 0;      -ms-flex: 0 0 20% !important;          flex: 0 0 20% !important;  max-width: 20%;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">  <div class="row my-4">    <div class="col">      <div class="jumbotron">        <h1>Bootstrap 4 - How to set 5 columns per row</h1>        <p class="lead">by djibe.</p>        <p class="text-muted">(thx to BS4)</p>        <h2>Tutorial</h2>        <h3>With Bootstrap 4.4+</h3>        <p>Just add <code>row-cols-5</code> to the row containing your elements</p>        <div class="container-fluid">          <div class="row row-cols-5">            <div class="col card card-body">            .col            </div>            <div class="col card card-body">            .col            </div>            <div class="col card card-body">            .col            </div>            <div class="col card card-body">            .col            </div>            <div class="col card card-body">            .col            </div>            <div class="col card card-body">            .col            </div>            <div class="col card card-body">            .col            </div>          </div>        </div>        <hr class="my-5">        <h3>With Bootstrap < 4.4</h3>        <ol>        <li>We gonna use the magic of CSS3 flexboxes ... or just import row-cols-* classes from BS 4.4.</li>        <li>Apply the class .w-20 on each element, it will spread each element on 1/5th of the width or row</li>        <li>Apply the built-in Bootstrap 4 classes d-flex and flex-wrap to the container of these 15 elements</li>        <li>Et voilà</li>        <li>This fiddle is crap so I had to add the !important definition to my CSS class. But you can get rid of them in your project.</li>        </ol>        <div class="d-flex flex-wrap">          <div class="card card-body w-20">          <p>          Card 1          </p>          <p>          Extra long content compared to the cards of the same row but all the elements will have the same height          </p>          </div>          <div class="card card-body w-20">          Card 2          </div>          <div class="card card-body w-20">          Card 3          </div>          <div class="card card-body w-20">          Card 4          </div>          <div class="card card-body w-20">          Card 5          </div>          <div class="card card-body w-20">          Card 6          </div>          <div class="card card-body w-20">          Card 7          </div>          <div class="card card-body w-20">          Card 8          </div>          <div class="card card-body w-20">          Card 9          </div>          <div class="card card-body w-20">          Card 10          </div>          <div class="card card-body w-20">          Card 11          </div>          <div class="card card-body w-20">          Card 12          </div>          <div class="card card-body w-20">          Card 13          </div>          <div class="card card-body w-20">          Card 14          </div>          <div class="card card-body w-20">          Card 15          </div>        </div>      </div>    </div>  </div></div>