Bootstrap CSS Grid Example

by Ryan Briscall

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<h2>Example 1</h2>
<p>
2-column grid, using Bootstrap CSS Grid (12-column grid).  <strong>col-sm-4, col-sm-8</strong>
</p>
<hr>
<div class="container" style="margin:0 auto;">
	<div class="row">
		<div class="col-sm-4">
			<img alt="DDP"  style="width:140px; height:60px;" src="logo.png" />
		</div>
		<div class="col-sm-8">
			<h1>Monitoring Engineering Dashboard</h1>
		</div>
	</div>
</div>
<hr>

<h2>Example 2</h2>
<p>
2-column grid.  Tip: Adjust your browser window to see in real-time the side-by-side layout activate, for col-md-* grid sizing.  This also means that if your browser window is anything under 991px, then the column layout will display the columns as stacked blocks (rows).  <strong>col-md-4, col-md-8</strong>
</p>
<hr>
<div class="container" style="margin:0 auto;">
	<div class="row">
		<div class="col-md-4">
			<img alt="DDP"  style="width:140px; height:60px;" src="logo.png" />
		</div>
		<div class="col-md-8">
			<h1>Monitoring Engineering Dashboard</h1>
		</div>
	</div>
</div>
<hr>

<h2>Example 3</h2>
<p>
2-column grid, flipped.  <strong>col-sm-8, col-sm-4</strong>
</p>
<hr>
<div class="container" style="margin:0 auto;">
	<div class="row">
		<div class="col-sm-8">
			<h1>Monitoring Engineering Dashboard</h1>
		</div>
		<div class="col-sm-4">
			<img alt="DDP"  style="width:140px; height:60px;" src="logo.png" />
		</div>
	</div>
</div>
<hr>