2016/08/25 Bootstrap Rows

by Jason Butz

HTML

<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.css">
<!-- This is an example w/ 2 task lists -->
<div class="row">
    <div class="col-xs-12">
        <!-- ko foreach: taskLists -->
        <div class="row">
            <div class="col-xs-2 highlight1">
                &nbsp;
            </div>
            <div class="col-xs-10 highlight2">
                &nbsp;
            </div>
        </div>
        <!-- /ko -->
        <!-- ko foreach: taskLists -->
        <div class="row">
            <div class="col-xs-2 highlight1">
                &nbsp;
            </div>
            <div class="col-xs-10 highlight2">
                &nbsp;
            </div>
        </div>
        <!-- /ko -->
    </div>
</div>
<hr />
<!-- Same thing, just no outside col-*-12 -->
<div class="row">
    <div class="col-xs-2 highlight1">
        &nbsp;
    </div>
    <div class="col-xs-10 highlight2">
        &nbsp;
    </div>
</div>
<!-- /ko -->
<!-- ko foreach: taskLists -->
<div class="row">
    <div class="col-xs-2 highlight1">
        &nbsp;
    </div>
    <div class="col-xs-10 highlight2">
        &nbsp;
    </div>
</div>
<!-- /ko -->

CSS

.highlight1 {
    background-color: #C8C8C8;
}

.highlight2 {
    background-color: #8C8C8C;
}