Views/Home/Columnizer.cshtml
@{
ViewBag.Title = "ColumnizerView"
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container">
<div class="well">
<div class="text-center">
<h2>Responsive Grids</h2>
This is an exercise in Bootstrap's responsive grids. Shrink and expand the page width to see how the layout changes.
</div>
</div>
<div class="row">
<div class="col-sm-12 well">col-sm-12</div>
</div>
<div class="row">
<div class="col-sm-6 well">col-sm-6</div>
<div class="col-sm-6 well">col-sm-6</div>
</div>
<div class="row">
<div class="col-sm-4 well">col-sm-4</div>
<div class="col-sm-4 well">col-sm-4</div>
<div class="col-sm-4 well">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-2 well">col-sm-2</div>
<div class="col-sm-2 well">col-sm-2</div>
<div class="col-sm-2 well">col-sm-2</div>
<div class="col-sm-2 well">col-sm-2</div>
<div class="col-sm-2 well">col-sm-2</div>
<div class="col-sm-2 well">col-sm-2</div>
</div>
<div class="row">
<div class="col-sm-1 well">col-sm-1</div>
<div class="col-sm-1 well">col-sm-1</div>
<div class="col-sm-1 well">col-sm-1</div>
<div class="col-sm-1 well">col-sm-1</div>
<div class="col-sm-1 well">col-sm-1</div>
<div class="col-sm-1 well">col-sm-1</div>
<div class="col-sm-1 well">col-sm-1</div>
<div class="col-sm-1 well">col-sm-1</div>
<div class="col-sm-1 well">col-sm-1</div>
<div class="col-sm-1 well">col-sm-1</div>
<div class="col-sm-1 well">col-sm-1</div>
<div class="col-sm-1 well">col-sm-1</div>
</div>
<div class="row">
<div class="col-md-12 well">col-md-12</div>
</div>
<div class="row">
<div class="col-md-6 well">col-md-6</div>
<div class="col-md-6 well">col-md-6</div>
</div>
<div class="row">
<div class="col-md-4 well">col-md-4</div>
<div class="col-md-4 well">col-md-4</div>
<div class="col-md-4 well">col-md-4</div>
</div>
<div class="row">
<div class="col-md-2 well">col-md-2</div>
<div class="col-md-2 well">col-md-2</div>
<div class="col-md-2 well">col-md-2</div>
<div class="col-md-2 well">col-md-2</div>
<div class="col-md-2 well">col-md-2</div>
<div class="col-md-2 well">col-md-2</div>
</div>
<div class="row">
<div class="col-md-1 well">col-md-1</div>
<div class="col-md-1 well">col-md-1</div>
<div class="col-md-1 well">col-md-1</div>
<div class="col-md-1 well">col-md-1</div>
<div class="col-md-1 well">col-md-1</div>
<div class="col-md-1 well">col-md-1</div>
<div class="col-md-1 well">col-md-1</div>
<div class="col-md-1 well">col-md-1</div>
<div class="col-md-1 well">col-md-1</div>
<div class="col-md-1 well">col-md-1</div>
<div class="col-md-1 well">col-md-1</div>
<div class="col-md-1 well">col-md-1</div>
</div>
<div class="row">
<div class="col-lg-12 well">col-lg-12</div>
</div>
<div class="row">
<div class="col-lg-6 well">col-lg-6</div>
<div class="col-lg-6 well">col-lg-6</div>
</div>
<div class="row">
<div class="col-lg-4 well">col-lg-4</div>
<div class="col-lg-4 well">col-lg-4</div>
<div class="col-lg-4 well">col-lg-4</div>
</div>
<div class="row">
<div class="col-lg-2 well">col-lg-2</div>
<div class="col-lg-2 well">col-lg-2</div>
<div class="col-lg-2 well">col-lg-2</div>
<div class="col-lg-2 well">col-lg-2</div>
<div class="col-lg-2 well">col-lg-2</div>
<div class="col-lg-2 well">col-lg-2</div>
</div>
<div class="row">
<div class="col-lg-1 well">col-lg-1</div>
<div class="col-lg-1 well">col-lg-1</div>
<div class="col-lg-1 well">col-lg-1</div>
<div class="col-lg-1 well">col-lg-1</div>
<div class="col-lg-1 well">col-lg-1</div>
<div class="col-lg-1 well">col-lg-1</div>
<div class="col-lg-1 well">col-lg-1</div>
<div class="col-lg-1 well">col-lg-1</div>
<div class="col-lg-1 well">col-lg-1</div>
<div class="col-lg-1 well">col-lg-1</div>
<div class="col-lg-1 well">col-lg-1</div>
<div class="col-lg-1 well">col-lg-1</div>
</div>
</div>