Combine-layout: Example B

Nested rows/columns using Twitter Bootstrap without combine-layout

by phloe

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="page-header">
    <div class="container">
         <h1>Combine-layout: Example B</h1>
        <h2><small>Nested rows/columns using Twitter Bootstrap without combine-layout</small></h2>

    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-12 col-lg-8">
            <div class="row">
                <div class="col-sm-12">
                    <div class="jumbotron">
                         <h2>Story 1</h2>
        
                        <p>Integer dui massa, pellentesque non hendrerit viverra, imperdiet a diam. Nam sit amet blandit diam.</p>
                        <p><a class="btn btn-primary btn-lg" href="#" role="button">Read more</a>
                        </p>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="media">
                        <div class="media-body">
                             <h4>Story 2</h4>
        
                            <p>Donec sit amet convallis urna.</p>
                            <p><a href="#" role="button">Read more</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="media">
                        <div class="media-body">
                             <h4>Story 3</h4>
        
                            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                            <p><a href="#" role="button">Read more</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="media">
                        <div class="media-body">
                             <h4>Story 4</h4>
        
              ...

CSS

ol.row {
    list-style-type: none;
    padding: 0;
}

.row {
    font-size: 0;
}
.row > * {
    font-size: 1.4rem;
    /*
    can't use 1rem with Bootstrap because
    1rem is 10px (html) while body has
    font-size of 14px...
  */
}

.jumbotron {
    margin-bottom: 0;
}

.media {
    background-color: #F8F8F8;
    padding: 10px;
}

.row > * {
    margin-bottom: 20px;
}