Altering the Bootstrap Gridsystem

Question

So currently this is how my website layout looks, its of the following order

<div class="container">
    <div class="row">
        <div class="col-md-3">
             col-md-3 left
        </div>
        <div class="col-md-6">
             element 1 
             <br/>
             element 2
        </div>
        <div class="col-md-3">
             col-md-3 right
        </div>
    </div>
</div>

enter image description here

But i want the element 2 to be in a new div of class col-md-6 so that it stacks up perfectly after the col-md-3, this is how i want it to be

<div class="container">
    <div class="row">
        <div class="col-md-3">
             col-md-3 left
        </div>
        <div class="col-md-6">
             element 1 
        </div>
        <div class="col-md-3">
             col-md-3 right
        </div>
    </div>
    <div class="col-md-6 col-md-offset-3">
        element 2
    </div>
</div>

But when i use this code this is what i get.

enter image description here

How would i achieve the pic1 with a div class col-md-6 set to element2

I want the element2 with the class col-md-6 right between the two col-md-3 div's

I'm slightly confused by your question, where exactly do you want element 2 to line up? You said "stacks up perfectly after the col-3" but there are two col-3s on your page. Could you possibly rename them and add a bit of description? — ultifinitus, Mar 15 '14 at 06:16
@ultifinitus : i want the `element2` to come after `col-md-3 right` when i test it on a mobile device, which can only be achieved if i set a separate div to `element2`. But the problem here is the lengths of col-md-3 are more and if i apply a new div to element2 say `col-md-6` it'll start right after the row has ended. — jayeshkv, Mar 15 '14 at 06:22
Oh! Well a `div` is a block element, which means it is meant to have a line all to itself. Give me just a minute and I'll check out a fix for bootstrap. I usually just do my own css so it may take me a minute or two but I've got you covered. — ultifinitus, Mar 15 '14 at 06:32

score 1 · Answer 1 · edited May 23 '17 at 11:49

Alright, so this depends on the makeup of the content of your elements it could be as simple as changing this

<div class="col-md-6">
     element 1 
     <br/>
     element 2
</div>

Into this

<div class="col-md-6">
     <div class="tophalf">
        element 1 
     </div>
     <div class="bottomhalf">
        element 2
     </div>
</div>

Which would successfully divide your elements, however this adds several other issues. Depending on the nature of your elements you could have problems with the col-md-3 content stretching to the bottom of the element 2. To solve this you can set the height of the outside columns (using a #tag in your css and an id="" in your html) there are many many many questions on that topic, here are a couple:

First Stack Question

Second More Popular Question

Another Possibly Relevant Link

I managed to get a quick example up and running if you would like to see the code, but I bet you can figure it out from the info above. Sorry I don't have more information for you- I hope you get another answer that helps more!

need some time to figure this out, Will update the post if it works thx — jayeshkv, Mar 15 '14 at 08:20
could you link me to an example or something ? im kinda lost ! — jayeshkv, Mar 15 '14 at 08:36

score 0 · Accepted Answer · answered May 07 '14 at 03:34

0

Added a custom class with the desired width to the div element2 so that it comes down.

answered May 07 '14 at 03:34

jayeshkv

2,180
4
24
42

Altering the Bootstrap Gridsystem

2 Answers2