CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user1379533
user1379533

Reputation:

Twitter Bootstrap grid layout

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

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>

Upvotes: 2

Views: 82

Answers (5)

Karl Gjertsen
Karl Gjertsen

Reputation: 4928

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.

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122105

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>

Upvotes: 1

DennisJ
DennisJ

Reputation: 7

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>

Upvotes: 0

Craveiro
Craveiro

Reputation: 503

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>

Upvotes: 0

Arash Hatami
Arash Hatami

Reputation: 5571

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

Upvotes: 0

Related Questions