CODEWITHSUNDEEP
csstwitter-bootstrap
Roman Rdgz
Roman Rdgz

Reputation: 13254

Twitter Bootstrap grid:

I want to achieve a grid like the shown below:

enter image description here

I have been looking to Twitter Bootstrap grid system, but since it is oriented to rows, I can't see how to achieve this.

Is there any way of doing it, or should I stick to manually css?

Upvotes: 1

Views: 227

Answers (3)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

Just set 2 parents width col-xs-* with children

main{padding: 20px}
section, article{display: inline}
article, div{border: 4px solid black; margin-bottom: 10px}
article:nth-child(1){height: 80px}
article:nth-child(2){height: 40px}
div:nth-child(1){height: 30px}
div:nth-child(2){height: 90px}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<main class=row>
  <section class="col-xs-8">
    <article></article>
    <article></article>
  </section>
  <aside class="col-xs-4">
    <div></div>
    <div></div>
  </aside>
</main>

Read more about Grid system .

Upvotes: 1

dfsq
dfsq

Reputation: 193261

You can still use Bootstrap grid with some custom styles:

.block {
    border: 3px #222 solid;
    padding: 10px;
    margin-bottom: 10px;
}
.block-1 {
    height: 100px;
}
.block-2 {
    height: 50px;
}
.block-3 {
    height: 50px;
}
.block-4 {
    height: 100px;
}
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <div class="col-xs-8">
            <div class="block block-1">Block 1</div>
            <div class="block block-2">Block 2</div>
        </div>
        <div class="col-xs-4">
            <div class="block block-3">Block 3</div>
            <div class="block block-4">Block 4</div>
        </div>
    </div>
</div>

Upvotes: 2

Johannes Reuter
Johannes Reuter

Reputation: 3547

You can nest Rows and cols:

<div class="row">
  <div class="col-md-9">
    <div class="row">
      <div class="col-md-12">left top</div>
      <div class="col-md-12">left bottom</div>      
    </div>
  </div>
  <div class="col-md-3">
    <div class="row">
      <div class="col-md-12">right top</div>
      <div class="col-md-12">right bottom</div>      
    </div>
  </div>
</div>

See http://getbootstrap.com/css/#grid under "Nesting Columns"

Upvotes: 5

Related Questions