Bootstrap Box Spanning with div

Question

enter image description here

I want to divide the web page area like the pic shown. I have tried this approach. To some extent it is right. Would appreciate to clear my doubts.

<div class="row">
   <div class="col-md-8">
       <div class="well">
           <div class="row">
               <div class="col-md-12"><div class="well">canvas</div></div>
           </div>
           <div class="row">
               <div class="col-md-8"><div class="well">edit text</div></div>
               <div class="col-md-4"><div class="well">Button</div></div>
           </div>
       </div>
   </div>
   <div class="col-md-4"><div class="well" >Control panel</div></div>
</div>

What version of Bootstrap you are using and what is the problem with your current approach? Also do you want it to be responsive? — jsalonen, Jun 07 '14 at 14:38
Also please fix indents in your HTML. Its very hard to follow and may even contain some hanging tags. — jsalonen, Jun 07 '14 at 14:39
no its not working. Can you please tell me where i am making the mistake? — Koushik Saha, Jun 07 '14 at 14:46
First, fix your HTML markup. You still have like 4 unclosed div tags and I don't know where you want them closed. Then we can debug further. — jsalonen, Jun 07 '14 at 14:47
can you upload your code to http://jsfiddle.net so we can see the problem? — Jere, Jun 07 '14 at 15:01
Can you explain what is the problem with this code? because your code is as per your requirement. — tejashsoni111, Jun 07 '14 at 17:00

score 1 · Answer 1 · answered Jun 07 '14 at 14:57

Try out this one.. it will work fine...

<div class="row">
<div class="col-md-8">
    <div class="well">

        <div class="row">
            <div class="col-md-12"><div class="well">canvas</div></div>
        </div>

        <div class="row">
                <div class="col-md-8"><div class="well">edit text</div></div>
                <div class="col-md-4"><div class="well">Button</div></div>
        </div>
    </div>   
</div>
<div class="col-md-4"><div class="well">Control panel</div></div></div>

no, it is not working properly. The right side column is coming half way. see my edited question for screenshot — Koushik Saha, Jun 07 '14 at 16:25

pankaj · Accepted Answer · 2014-06-08T08:50:57.037

1

This is what I tried in jsfiddle and is working for me (without the well class)

<div class="container">
    <div class="row">
         <div class="col-xs-8">
             <div class="row">
                 <div class="col-xs-12">
                      Canvas
                 </div>
             </div>
             <div class="row">
                 <div class="col-xs-8">Edit Text</div>
                 <div class="col-xs-4">Button</div>
             </div>
         </div>
         <div class="col-xs-4">Control panel</div>
    </div>
</div>

http://jsfiddle.net/aJ9ne/

edited Jun 08 '14 at 08:50

answered Jun 07 '14 at 20:37

pankaj

1,316
3
16
27

well its the same way that i have written also. But do i adjust the height of the section called "Control Panel"? – Koushik Saha Jun 08 '14 at 06:21
See the update jsfiddle link. I have taken up the solution to adjust the height of "control panel" and make it same as that of left column from here - http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height – pankaj Jun 08 '14 at 08:53

Bootstrap Box Spanning with div

2 Answers2