list layouts in bootstrap

by Ryan

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div class="container">
    
    <div class="row">
        <div class="col-md-12">
            <h2>List Vertical</h2>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-2">Before</div>
        <div class="col-md-8">
            <ul>
                <li><label>Label 1</label><div class="value">Element 1</div></li>
                <li><label>Label 2</label><div class="value">Element 1</div></li>
                <li><label>Label 3</label><div class="value">Element 1</div></li>
                <li><label>Label 4</label><div class="value">Element 1</div></li>
            </ul>
        </div>
        <div class="col-md-2">After</div>
    </div>



    <div class="row">
        <div class="col-md-12">
            <h2>List Inline</h2>
        </div>
    </div>

    <div class="row">
        <div class="col-md-2">Before</div>
        <div class="col-md-8">
            <ul class="inline">
                <li><label>Label 1</label><div class="value">Element 1</div></li>
                <li><label>Label 2</label><div class="value">Element 1</div></li>
                <li><label>Label 3</label><div class="value">Element 1</div></li>
                <li><label>Label 4</label><div class="value">Element 1</div></li>
            </ul>
            <br class="clearfix"/>
        </div>
        <div class="col-md-2">After</div>
    </div>

</div>

CSS

ul {
   	padding: 0;
	list-style-type: none;
	list-style-position: initial;
	list-style-image: initial;
}
ul li {
	padding-bottom: 8px;
}

ul.inline {
}
ul.inline li {
    padding: 0 12px 0 0;
    float: left;
}

ul label {
	color: #999;
	font-size: 12px;
	text-transform: capitalize;
	font-weight: normal;
	margin-bottom: 2px;
}
ul .value {
	line-height: 20px;
	font-size: 18px;
	font-weight: 300;
}