Bootstrap grid place div next to div in a row

Question

I want div 4 next to div 1 and below div 2 and 3 like the image below the code. How can I do that? Actual Code:

       <div class="container-fluid">
          <div class="row">
             <div class="col-md-4 col_trainings">1</div>
             <div class="col-md-3 col_downloads">2</div>
             <div class="col-md-3 col_project">3</div>
             <div class="col-sm-6 col_contact">4</div>
          </div>
       </div>

Kiloumap Mrz · Accepted Answer · 2017-12-08T09:52:15.463

0

You can use mx-auto class to your 4th div.

   <div class="container-fluid">
      <div class="row">
         <div class="col-md-4 col_trainings">1</div>
         <div class="col-md-3 col_downloads">2</div>
         <div class="col-md-3 col_project">3</div>
         <div class="col-sm-6 mx-auto col_contact">4</div>
      </div>
   </div>

This property will set your last block on the 5th column of bootstrap ;)

Have a look to this post. Enjoy !

edited Dec 08 '17 at 09:52

answered Dec 08 '17 at 09:18

Kiloumap Mrz

2,133
1
9
18

Thank you for the fast response. Nothing changes when I add col-offset-4. – lrefopam Dec 08 '17 at 09:22
Ok, with bootstrap 4 offset doesn't exist anymore. You can replace it by mx-auto I edit my response. – Kiloumap Mrz Dec 08 '17 at 09:51
Nothing changes. – lrefopam Dec 08 '17 at 09:59
What is your current bootstrap version ? – Kiloumap Mrz Dec 08 '17 at 10:06
It's version 4.0.0 – lrefopam Dec 08 '17 at 11:05
that weird, it's working for me with bootstrap v4.0.0 Are you sure to have'nt any style who's can overload it ? – Kiloumap Mrz Dec 08 '17 at 15:34

score 0 · Answer 2 · answered Dec 08 '17 at 09:30

0

There is a library for this. "Lightweight and independent Pinterest-like cascading grid layout library" http://bricklayer.js.org

answered Dec 08 '17 at 09:30

Bootstrap grid place div next to div in a row

2 Answers2