Clever Geek Handbook

Boostrap 3 - col-md-4 to col-sm-6 or 3x2 to 2x3 grid

How do I change the grid from 3x2 to 2x3 without having white space where one line ends and the other starts?

For example:

 <div class="row"> 
     <div class="col-md-4 col-sm-6">
        content
    </div>
    <div class="col-md-4 col-sm-6">
        content
    </div>
    <div class="col-md-4 col-sm-6">
        content
    </div>
</div>
<div class="row"> 
    <div class="col-md-4 col-sm-6">
        content
    </div>
    <div class="col-md-4 col-sm-6">
        content
    </div>
    <div class="col-md-4 col-sm-6">
        content
    </div>
</div>

This is what I want to achieve:

It: enter image description here

For this: enter image description here

But instead I get this: enter image description here

+3


source to share


2 answers


Just put everything on one line - it will automatically fall down.

 <div class="row"> 
     <div class="col-md-4 col-sm-6">
        content 1
    </div>
    <div class="col-md-4 col-sm-6">
        content 2
    </div>
    <div class="col-md-4 col-sm-6">
        content 3
    </div>
    <div class="col-md-4 col-sm-6">
        content 4
    </div>
    <div class="col-md-4 col-sm-6">
        content 5
    </div>
    <div class="col-md-4 col-sm-6">
        content 6
    </div>
</div>


JSFiddle

+6


source


Put them all on one line. See this bootply

how



<div class="row"> 
     <div class="col-md-4 col-sm-6">
        <span class="box">content</span>
    </div>
    <div class="col-md-4 col-sm-6">
      <span class="box">content</span>
    </div>
    <div class="col-md-4 col-sm-6">
        <span class="box">content</span>
    </div>

    <div class="col-md-4 col-sm-6">
        <span class="box">content</span>
    </div>
    <div class="col-md-4 col-sm-6">
        <span class="box">content</span>
    </div>
    <div class="col-md-4 col-sm-6">
        <span class="box">content</span>
    </div>
</div>
+4


source






More articles:


All Articles