0

Is it possible to do this in Bootstrap 3, and if so, how? (the boxes being divs)

enter image description here

CaptSaltyJack
  • 15,283
  • 17
  • 70
  • 99
  • Bootstrap is css and jQuery that you can add to or take from. There is no design pattern precisely like this. This is an equal height 2 column grid with two internal boxes in the right side. You can extend Bootstrap, but why don't you google for equal height Bootstrap columns, try some out, and then once you choose one (don't choose the padding bottom approach) then make the two boxs 50% height – Christina Nov 03 '14 at 04:14

1 Answers1

3

I created this because the other answer, now deleted, was so really wrong. Here is one of many ways of doing this. I use jQuery usually. This assumes that this is a responsive layout. Hopefully, I say to myself, I won't answer questions that don't have any effort put into them. If you have a desired layout pattern and you don't see it in the documentation or examples on the GetBootstrap.com website, it likely doesn't come with the framework.

DEMO: http://jsbin.com/wuwis/1/

http://jsbin.com/wuwis/1/edit

HTML:

<div class="container">
   <div class="row equal-heights">
      <div class="col-sm-6">
         Primary Box put something in here that will accomodate the height of the other two boxes
      </div>
      <!--/.col-X-6 -->
      <div class="col-sm-6">
         <div class="box">
            Secondary Box
         </div><!--/.box -->
         <div class="box">
            Tertiary Box
         </div><!--/.box -->
      </div>
      <!--/.col-X-6 -->
   </div>
   <!--/.row -->
</div>
<!--/.container -->  

CSS:

.row.equal-heights [class*="col-"] {
    border: 1px solid red;
    padding:0;
}
.box {
    border: 1px solid green
}
@media (min-width:768px) { 
    .row.equal-heights {
        width: 100%;
        margin: 0 auto;
        height: 600px;
        display: table;
        /* unless you have content that keeps this open */
    }
    .row.equal-heights [class*="col-"] {
        height: 100%;
        float: none;
        display: table-cell;
    }
    .row.equal-heights .box {
        height: 50%
    }
}
Community
  • 1
  • 1
Christina
  • 34,296
  • 17
  • 83
  • 119
  • Cool, thanks for the detailed response! Pardon my ignorance, but why can't I just do something like this: http://pastebin.com/L3T9QKUK – CaptSaltyJack Nov 03 '14 at 05:31
  • If you paste a picture that looks like what you did, then this is the answer. If you are using images then look at this: http://jsbin.com/gacegu/1/edit -- you don't need nested rows or columns and the image class needs to be added plus the sizes of the images need to be the right widths – Christina Nov 03 '14 at 05:38
  • Now see the img-fluid class (custom non-bootstrap class) and the images and the grid flows from the min-width of that column class and up. http://jsbin.com/gacegu/2/edit – Christina Nov 03 '14 at 05:41
  • Well, it's not so much about the content in the divs. Just the divs themselves. – CaptSaltyJack Nov 03 '14 at 06:33
  • Then you just create two columns and then you create a couple of divs (not col-X1-12) in the right column, you can put two .well or some other div or create your own, but you don't need to have a lot of html and nest the grid system again. Take a look at the examples on GetBootstrap.com, Bootsnipp.com, StartBootstrap. – Christina Nov 03 '14 at 13:44