Twitter Bootstrap grid layout

Question

I'm guite new to bootstrap and I'm trying to create a bootstrap grip that should look something like this:

Is it possible to have the blue primary box in the same grid as the rest, but only using the HTML tags? Or do I have to create my own CSS rules to achive this?

I have tried nesting the rows etc. But so far, I have not been able to achieve a good looking result.

 <div class="col-md-9"> <div class="panel panel-default"> <div class="panel-heading"> Panel 1 </div> <div class="panel-body"> content body </div> </div> </div> 

Answer 1

You can do this, but you have to use Flexbox to get right panel same height as left side panels

Fiddle

@media(min-width: 992px) {
  .content {
    display: flex;
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .right .panel {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .right .panel .panel-body {
    flex: 1;
  }
}

<div class="content">
  <div class="col-md-9 left">

    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            Panel 1
          </div>
          <div class="panel-body">
            content body
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            Panel 1
          </div>
          <div class="panel-body">
            content body
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            Panel 1
          </div>
          <div class="panel-body">
            content body
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            Panel 1
          </div>
          <div class="panel-body">
            content body
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            Panel 1
          </div>
          <div class="panel-body">
            content body
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            Panel 1
          </div>
          <div class="panel-body">
            content body
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            Panel 1
          </div>
          <div class="panel-body">
            content body
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-3 right">
    <div class="panel panel-info">
      <div class="panel-heading">
        Panel 1
      </div>
      <div class="panel-body">
        content body
      </div>
    </div>
  </div>
</div>

Answer 2

Use panel-primary class of bootstrap instead of panel-default

Also you should use col-md-3 to fix this panel on right side

for example

<div class="row">
    <div class="col-md-9">
        <!--something here-->
    </div>
    <div class="col-md-3">
       <div class="panel panel-primary">
           <div class="panel-heading">Panel 1</div>
           <div class="panel-body">Content Body</div>
       </div>
    </div>
</div>

See official doc for other informations

Answer 3

Yes, it's possible. You should start by creating one row with two columns. The first column will have 3 rows inside it and then more columns inside. Keep in mind the grid layout works from 1-12, so if your left part has a size of 9 then your panel on the right should take the remaining 3 for its column size.

It goes something like this:

 <div class="row"> <div class "col-md-9"> <div class="row"> <div class="col-md-4"> *insert panel here* </div> <div class="col-md-4"> *insert panel here* </div> <div class="col-md-4"> *insert panel here* </div> </div> <div class="row"> <div class="col-md-4"> *insert panel here* </div> <div class="col-md-4"> *insert panel here* </div> <div class="col-md-4"> *insert panel here* </div> </div> <div class="row"> <div class "col-md-4"> *insert panel here* </div> <div class="col-md-4"> *insert panel here* </div> <div class="col-md-4"> *insert panel here* </div> </div> </div> <div class="col-md-3"> *insert panel here* </div> </div> 

Answer 4

You will need to add two columns, then place the panels within these columns. The first columns' sizing will be 9 and 3.

The "Standard" panels will go inside the first column and the "Blue" panel will go into the second panel.

<div class="col-md-3">

  // Standard panels.
  <div class="col-md-9">

    // First row.
    <div class="col-md-12">
      // Wide panel
    </div>

    // Second row.
    <div class="col-md-4">
      // smaller panel
    </div>
    <div class="col-md-4">
      // smaller panel
    </div>
    <div class="col-md-4">
      // smaller panel
    </div>

  </div>

  // Blue panel
  <div class="col-md-3">
    <div class="panel panel-primary">
      <div class="panel-heading">Panel with panel-primary class</div>
      <div class="panel-body">Panel Content</div>
    </div>

  </div>

Inside the first column, the standard panels have been sized as 12 for the full width panel and 4 for each of the smaller panels. This is because the sizing is relative to the parent. The parent column has a width of 9 and so the child column sizing will be sized in 12th's of that 9. Hope this makes sense.

Answer 5

When using Bootstrap Grid It should as simple as to add style="float: right;" to the

  <div class="container"> <div class="col-md-9"> <div class="panel panel-default"> <div class="panel-heading"> Panel 1 </div> <div class="panel-body"> content body </div> </div> </div> <div class="col-md-3" style="float:right;"> <div class="panel panel-default"> <div class="panel-heading"> Panel 1 </div> <div class="panel-body" style="height: 300px;"> content body </div> </div> </div> <div class="col-md-9"> <div class="panel panel-default"> <div class="panel-heading"> Panel 1 </div> <div class="panel-body"> content body </div> </div> </div> <div class="col-md-9"> <div class="panel panel-default"> <div class="panel-heading"> Panel 1 </div> <div class="panel-body"> content body </div> </div> </div> <div class="col-md-9"> <div class="panel panel-default"> <div class="panel-heading"> Panel 1 </div> <div class="panel-body"> content body </div> </div> </div> </div>