Combine-layout: Example B

Twitter Bootstrap w/o 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>Twitter Bootstrap w/o combine-layout</small></h2>

    </div>
</div>
<div class="container">
    <ol class="row">
        <li class="col-sm-12 col-lg-8">
            <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>
        </li>
        <li class="col-sm-6 col-md-3 col-lg-4">
            <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>
        </li>
        <li class="col-sm-6 col-md-3 col-lg-4">
            <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>
        </li>
        <li class="col-sm-12 col-md-6 col-lg-8">
            <div class="media">
                <div class="media-body">
                     <h4>Story 4</h4>

                    <p>Fusce tempor, nisi id tincidunt rhoncus, massa diam ornare nisl, id imperdiet nunc nisi a magna.</p>
                    <p><a href="#" role="button">Read more</a>
                    </p>
                </div>
            </div>
        </li>
        <li class="col-sm-12 col-md-6 col-lg-4">
            <div...

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;
}