CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Matt Gibson
Matt Gibson

Reputation: 38238

Simple grid layout in Bootstrap 3?

I'm using Bootstrap 3's grid system (for the first time) to prototype a site. One of the pages should end up laid out like this:

Desired layout

My initial markup is along these lines (I've added <div>s to group elements into what I think I'll want to turn into blocks of grid content.)

<body>
  <h1>Plays</h1>
  <h2>The Chair</h2>
  <div id="intro">
    <h3>Intro</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis, dolor felis eleifend diam, nec convallis orci libero eget augue. Vestibulum quis pretium tellus. Morbi nulla nulla, tempus congue viverra id, iaculis ultricies lorem.</p>
  </div>
  <div class="excerpt" id="excerpt-1">
    <h3>Excerpt 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis</p>
    <p>Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis</p>
    <p>...</p>
  </div>
  <div class="excerpt" id="excerpt-2">
    <h3>Excerpt 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis</p>
    <p>Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis</p>
    <p>...</p>
  </div>
</body>

I'm pretty much a beginner with grid-based designs in general, and I'm a little lost as to how I would mark this up with Bootstrap's rows and columns.

The key things in my mind are: 1) #excerpt-2 starts at the same height as #intro, and 2) the start height of #excerpt-1 is before the end height of #excerpt-2. How do I cope with this in a Bootstrap 3 grid? Am I missing an obvious trick? Is there a way of laying this out without changing the document source order?

Upvotes: 0

Views: 557

Answers (1)

Muhammad Reda
Muhammad Reda

Reputation: 27023

This code sample will get you started:

<div class="container">
    <div id="row-1st" class="row">
        <div class="col-xs-12">
            <h1>Header</h1>
        </div>
    </div>

    <div id="row-2nd" class="row">
        <div class="col-xs-12">
            <h1>Header Second</h1>
        </div>
    </div>

    <div id="row-3rd" class="row">
        <div class="col-xs-12">
            <div class="row">
                <div class="col-sm-6 col-xs-12">
                    <div class="row">
                        <div class="col-xs-12">
                            <h1>Intro</h1>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-12">
                            Excerpt 1
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-xs-12">
                    Excerpt 2
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions