Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Achieving a complex grid in bootstrap

Would it be possible to achieve the attached grid in bootstrap? Each of the squares would probably be an image... or perhaps text!

I've had a go, but hit a wall when it comes to the top-left box for example that spans over two rows.

Grid:

enter image description here

like image 947
kingprawn123 Avatar asked Jun 05 '14 12:06

kingprawn123


People also ask

How many tiers does Bootstrap 5 grid system includes for building complex responsive layouts?

Bootstrap's grid includes five tiers of predefined classes for building complex responsive layouts.

How do I customize Bootstrap grid?

The Bootstrap grid allows 12 columns with 30 px wide gutters by default, but these numbers can be adjusted. Just check the Grid System block on the Customize page. The @grid-columns field allows to set a different number of columns, and the @grid-gutter-width field lets you change the gutter width.

Is Bootstrap a complex?

In Bootstrap we can design a responsive website or webpages. CSS is more complex than Bootstrap because there is no pre-defined class and design. Bootstrap is easy to understand and it has much pre-design class.

What is the highest number of grids allowed in Bootstrap?

Bootstrap's grid system allows up to 12 columns across the page.


2 Answers

Use nested blocks whenever you need your grid to span several rows. Something like this:

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

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

Then you can set the height for your blocks and your grid is good to go.

like image 170
Eternal1 Avatar answered Oct 17 '22 03:10

Eternal1


A newbie here. So I was learning to make nested grids when I stumble on this question.

My Rules for making nested grids:

1.The entire grid will be in parent container .row (parent wrapper) 2.Columns are always nested in columns, however all nested columns must have a .row(column wrapper) wrapper to align items horizontally e.g.:

<div class='col-md-12'>
    <div class='row'>This is the column wrapper.
           <div class='col-md-9'></div>
           <div class='col-md-3'></div>
        </div>
</div>

3.Breakpoints are very key 4.You may have to use custom css to fine tune your grid.

This is my solution to the problem:

  <div class='row parent-wrap'>
        <div class='col-sm-6 big-left'>Top Left big</div>
        <div class='col-sm-6 quarter-grid'>
            <div class='row top-wrap'>
            <div class='col-sm-6 top-left'>top-left</div>
            <div class='col-sm-6 top-right'>top-right</div>
         <div class='col-sm-6 bottom-left'>bottom-left</div>
       <div class='col-sm-6 bottom-right'>bottom-right</div>
            </div>
        </div>

        <div class='col-sm-12'>
            <div class='row mid-wrap'>
          <div class='col-sm-3 mid-start'>mid-start</div>
        <div class='col-sm-6 mid-center'>mid-center</div>
        <div class='col-sm-3 mid-end'>mid-end</div>
        </div>

    <div class='col-sm-9'>
        <div class='row bottom-wrap'>
       <div class='col-sm-8 bottom-start'>bottom-start</div>
     <div class='col-sm-4 bottom-center'>bottom-center</div> 
        </div>
    </div>

</div>

Rudimentary custom css:

 .parent-wrap{
        margin:100px;
    }

    .big-left{
        background-color: aqua;
        height:300px;
    }
    .top-left{
        background-color:black;
        height:150px;
    }
    .top-right{
        background-color: blue;
        height:150px;
    }
    .bottom-left{
        background-color:brown;
        height:150px;
    }
    .bottom-right{
        background-color:crimson;
        height:150;
    }
    .mid-start{
        background-color:grey;
        height:200px;
    }
    .mid-center{
        background-color: red;
        height:200px;
    }
    .mid-end{
        background-color: pink;
        height:400px;
    }
    .bottom-start{
        background-color:blueviolet;
        margin-left:-15px;
        height:200px;
        margin-top:-200px;
    }
    .bottom-center{
        background-color:burlywood;
        height:200px;
        margin-top:-200px;
    }
like image 41
Dr. Ayilara Avatar answered Oct 17 '22 03:10

Dr. Ayilara