Smack Smack - 1 month ago 17
CSS Question

Bootstrap - 4 column grid

I can not get thet rows on the page. I'm always page halved into two horizontal section and I want four vertical sections.

Here is PICTURE:
PICTURE:

Here is fiddle of my code that you can easy know that what I want FIDDLE.

I only need that middle content to be like on picture.. 4 vertical columns and in that columns that i have 2 blocks.

Here is my try :

<div class="col-md-12">
<div class="pane border-right">
<div>
<div style="float: left;">
</div>
</div>
<div class="col-md-6 specifica ">
<div class="col-sm-3 border-right-dotted">

a

</div>
<div class="col-sm-3 border-right-dotted">

b

</div>

</div>
<div class="col-md-3 specifica ">
<div class="col-sm-3 border-right-dotted">

c

</div>
<div class="col-sm-3 ">

d

</div>
</div>

Answer

With this code you can create 2 rows with 4 columns like the picture, example: http://jsfiddle.net/ignaciocorreia/rc2E7/1/

<div class="row">
    <div class="col-sm-3 col-md-3">a</div>
    <div class="col-sm-3 col-md-3">b</div>
    <div class="col-sm-3 col-md-3">c</div>
    <div class="col-sm-3 col-md-3">d</div>
</div>

----

<div class="row">
    <div class="col-sm-3 col-md-3">a</div>
    <div class="col-sm-3 col-md-3">b</div>
    <div class="col-sm-3 col-md-3">c</div>
    <div class="col-sm-3 col-md-3">d</div>
</div>