diff --git a/docs/examples/blog/index.html b/docs/examples/blog/index.html
index a9f9b78ede3a5c39d789bb6c1feb7ada84af4e8e..014e0a6c10e65c09b9e36f9cbba3650445dc7556 100644
--- a/docs/examples/blog/index.html
+++ b/docs/examples/blog/index.html
@@ -43,7 +43,7 @@
<div class="row">
- <div class="col-sm-8 blog-main">
+ <div class="col col-sm-8 blog-main">
<div class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2>
@@ -111,7 +111,7 @@
</div><!-- /.blog-main -->
- <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
+ <div class="col col-sm-3 offset-sm-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html
index 5e01f8df042f46a8ee0e72158c76810923603768..55ecc1953b308912f61e0b2cde93c6abc43666ec 100644
--- a/docs/examples/carousel/index.html
+++ b/docs/examples/carousel/index.html
@@ -98,19 +98,19 @@
<!-- Three columns of text below the carousel -->
<div class="row">
- <div class="col-lg-4">
+ <div class="col col-lg-4">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
- <div class="col-lg-4">
+ <div class="col col-lg-4">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!-- /.col-lg-4 -->
- <div class="col-lg-4">
+ <div class="col col-lg-4">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
@@ -124,11 +124,11 @@
<hr class="featurette-divider">
<div class="row featurette">
- <div class="col-md-7">
+ <div class="col col-md-7">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
- <div class="col-md-5">
+ <div class="col col-md-5">
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
@@ -136,11 +136,11 @@
<hr class="featurette-divider">
<div class="row featurette">
- <div class="col-md-7 col-md-push-5">
+ <div class="col col-md-7 push-md-5">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
- <div class="col-md-5 col-md-pull-7">
+ <div class="col col-md-5 pull-md-7">
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
@@ -148,11 +148,11 @@
<hr class="featurette-divider">
<div class="row featurette">
- <div class="col-md-7">
+ <div class="col col-md-7">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
- <div class="col-md-5">
+ <div class="col col-md-5">
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index a86e3ecb9f0aa277f4c420a3e3bb182031362b34..a956bd4113710e87071137ce17f856061e7ac5d8 100644
--- a/docs/examples/dashboard/index.html
+++ b/docs/examples/dashboard/index.html
@@ -43,7 +43,7 @@
<div class="container-fluid">
<div class="row">
- <div class="col-sm-3 col-md-2 sidebar">
+ <div class="col col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
<li><a href="#">Reports</a></li>
@@ -63,26 +63,26 @@
<li><a href="">Another nav item</a></li>
</ul>
</div>
- <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
+ <div class="col col-sm-9 offset-sm-3 col-md-10 offset-md-2 main">
<h1 class="page-header">Dashboard</h1>
<div class="row placeholders">
- <div class="col-xs-6 col-sm-3 placeholder">
+ <div class="col col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
- <div class="col-xs-6 col-sm-3 placeholder">
+ <div class="col col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
- <div class="col-xs-6 col-sm-3 placeholder">
+ <div class="col col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
- <div class="col-xs-6 col-sm-3 placeholder">
+ <div class="col col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
diff --git a/docs/examples/grid/index.html b/docs/examples/grid/index.html
index 74b5852f5b8231c19b236b566945f2703cf1c42b..c9bcf8b93f00ac6e14fd645469d827a26a12b59f 100644
--- a/docs/examples/grid/index.html
+++ b/docs/examples/grid/index.html
@@ -30,56 +30,56 @@
<p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
<div class="row">
- <div class="col-xs-4">.col-xs-4</div>
- <div class="col-xs-4">.col-xs-4</div>
- <div class="col-xs-4">.col-xs-4</div>
+ <div class="col col-xs-4">.col .col-xs-4</div>
+ <div class="col col-xs-4">.col .col-xs-4</div>
+ <div class="col col-xs-4">.col .col-xs-4</div>
</div>
<div class="row">
- <div class="col-sm-4">.col-sm-4</div>
- <div class="col-sm-4">.col-sm-4</div>
- <div class="col-sm-4">.col-sm-4</div>
+ <div class="col col-sm-4">.col .col-sm-4</div>
+ <div class="col col-sm-4">.col .col-sm-4</div>
+ <div class="col col-sm-4">.col .col-sm-4</div>
</div>
<div class="row">
- <div class="col-md-4">.col-md-4</div>
- <div class="col-md-4">.col-md-4</div>
- <div class="col-md-4">.col-md-4</div>
+ <div class="col col-md-4">.col .col-md-4</div>
+ <div class="col col-md-4">.col .col-md-4</div>
+ <div class="col col-md-4">.col .col-md-4</div>
</div>
<div class="row">
- <div class="col-lg-4">.col-lg-4</div>
- <div class="col-lg-4">.col-lg-4</div>
- <div class="col-lg-4">.col-lg-4</div>
+ <div class="col col-lg-4">.col .col-lg-4</div>
+ <div class="col col-lg-4">.col .col-lg-4</div>
+ <div class="col col-lg-4">.col .col-lg-4</div>
</div>
<div class="row">
- <div class="col-xl-4">.col-xl-4</div>
- <div class="col-xl-4">.col-xl-4</div>
- <div class="col-xl-4">.col-xl-4</div>
+ <div class="col col-xl-4">.col .col-xl-4</div>
+ <div class="col col-xl-4">.col .col-xl-4</div>
+ <div class="col col-xl-4">.col .col-xl-4</div>
</div>
<h3>Three equal columns</h3>
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
<div class="row">
- <div class="col-md-4">.col-md-4</div>
- <div class="col-md-4">.col-md-4</div>
- <div class="col-md-4">.col-md-4</div>
+ <div class="col col-md-4">.col .col-md-4</div>
+ <div class="col col-md-4">.col .col-md-4</div>
+ <div class="col col-md-4">.col .col-md-4</div>
</div>
<h3>Three unequal columns</h3>
<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
<div class="row">
- <div class="col-md-3">.col-md-3</div>
- <div class="col-md-6">.col-md-6</div>
- <div class="col-md-3">.col-md-3</div>
+ <div class="col col-md-3">.col .col-md-3</div>
+ <div class="col col-md-6">.col .col-md-6</div>
+ <div class="col col-md-3">.col .col-md-3</div>
</div>
<h3>Two columns</h3>
<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
<div class="row">
- <div class="col-md-8">.col-md-8</div>
- <div class="col-md-4">.col-md-4</div>
+ <div class="col col-md-8">.col .col-md-8</div>
+ <div class="col col-md-4">.col .col-md-4</div>
</div>
<h3>Full width, single column</h3>
@@ -91,14 +91,14 @@
<p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
<div class="row">
- <div class="col-md-8">
+ <div class="col col-md-8">
.col-md-8
<div class="row">
- <div class="col-md-6">.col-md-6</div>
- <div class="col-md-6">.col-md-6</div>
+ <div class="col col-md-6">.col .col-md-6</div>
+ <div class="col col-md-6">.col .col-md-6</div>
</div>
</div>
- <div class="col-md-4">.col-md-4</div>
+ <div class="col col-md-4">.col .col-md-4</div>
</div>
<hr>
@@ -107,17 +107,17 @@
<p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
<div class="row">
- <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
- <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+ <div class="col col-xs-12 col-md-8">.col .col-xs-12 .col-md-8</div>
+ <div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
</div>
<div class="row">
- <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
- <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
- <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+ <div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
+ <div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
+ <div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
</div>
<div class="row">
- <div class="col-xs-6">.col-xs-6</div>
- <div class="col-xs-6">.col-xs-6</div>
+ <div class="col col-xs-6">.col .col-xs-6</div>
+ <div class="col col-xs-6">.col .col-xs-6</div>
</div>
<hr>
@@ -125,13 +125,13 @@
<h3>Mixed: mobile, tablet, and desktop</h3>
<p></p>
<div class="row">
- <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
- <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
+ <div class="col col-xs-12 col-sm-6 col-lg-8">.col .col-xs-12 .col-sm-6 .col-lg-8</div>
+ <div class="col col-xs-6 col-lg-4">.col .col-xs-6 .col-lg-4</div>
</div>
<div class="row">
- <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
- <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
- <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+ <div class="col col-xs-6 col-sm-4">.col .col-xs-6 .col-sm-4</div>
+ <div class="col col-xs-6 col-sm-4">.col .col-xs-6 .col-sm-4</div>
+ <div class="col col-xs-6 col-sm-4">.col .col-xs-6 .col-sm-4</div>
</div>
<hr>
@@ -139,18 +139,18 @@
<h3>Column clearing</h3>
<p><a href="http://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
<div class="row">
- <div class="col-xs-6 col-sm-3">
+ <div class="col col-xs-6 col-sm-3">
.col-xs-6 .col-sm-3
<br>
Resize your viewport or check it out on your phone for an example.
</div>
- <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+ <div class="col col-xs-6 col-sm-3">.col .col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix hidden-sm-up"></div>
- <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
- <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+ <div class="col col-xs-6 col-sm-3">.col .col-xs-6 .col-sm-3</div>
+ <div class="col col-xs-6 col-sm-3">.col .col-xs-6 .col-sm-3</div>
</div>
<hr>
@@ -158,12 +158,12 @@
<h3>Offset, push, and pull resets</h3>
<p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
<div class="row">
- <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
- <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
+ <div class="col col-sm-5 col-md-6">.col .col-sm-5 .col-md-6</div>
+ <div class="col col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
- <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
- <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
+ <div class="col col-sm-6 col-md-5 col-lg-6">.col .col-sm-6 .col-md-5 .col-lg-6</div>
+ <div class="col col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
diff --git a/docs/examples/jumbotron/index.html b/docs/examples/jumbotron/index.html
index 3e362fb46a7ae781d8f6a7b60325859ba02226e3..1eb5c328648f25b772938fb5ef60570de4635289 100644
--- a/docs/examples/jumbotron/index.html
+++ b/docs/examples/jumbotron/index.html
@@ -47,17 +47,17 @@
<div class="container">
<!-- Example row of columns -->
<div class="row">
- <div class="col-md-4">
+ <div class="col col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
- <div class="col-md-4">
+ <div class="col col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
- <div class="col-md-4">
+ <div class="col col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
diff --git a/docs/examples/justified-nav/index.html b/docs/examples/justified-nav/index.html
index a757a5c9a82b2a6e18c07c302b96dd0ab479002f..08e4808e7c37703c3b2009ad56f82c29d7913717 100644
--- a/docs/examples/justified-nav/index.html
+++ b/docs/examples/justified-nav/index.html
@@ -47,18 +47,18 @@
<!-- Example row of columns -->
<div class="row">
- <div class="col-lg-4">
+ <div class="col col-lg-4">
<h2>Safari bug warning!</h2>
<p class="text-danger">As of v9.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div>
- <div class="col-lg-4">
+ <div class="col col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div>
- <div class="col-lg-4">
+ <div class="col col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
diff --git a/docs/examples/narrow-jumbotron/index.html b/docs/examples/narrow-jumbotron/index.html
index fc55d06488a0a8d10e15c1addb38e5fd8a72bffe..4d7c821ef72c779febd5a542af8b121503b9d4ca 100644
--- a/docs/examples/narrow-jumbotron/index.html
+++ b/docs/examples/narrow-jumbotron/index.html
@@ -45,7 +45,7 @@
</div>
<div class="row marketing">
- <div class="col-lg-6">
+ <div class="col col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
@@ -56,7 +56,7 @@
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
- <div class="col-lg-6">
+ <div class="col col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html
index 16a70b37992ec00d7351247b0c1e223d894a6c98..262df60aaedc2636fe751f56e3b32b54ee17acf0 100644
--- a/docs/examples/offcanvas/index.html
+++ b/docs/examples/offcanvas/index.html
@@ -34,7 +34,7 @@
<div class="row row-offcanvas row-offcanvas-right">
- <div class="col-xs-12 col-sm-9">
+ <div class="col col-xs-12 col-sm-9">
<p class="pull-xs-right hidden-sm-up">
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
</p>
@@ -43,32 +43,32 @@
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
- <div class="col-xs-6 col-lg-4">
+ <div class="col col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
- <div class="col-xs-6 col-lg-4">
+ <div class="col col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
- <div class="col-xs-6 col-lg-4">
+ <div class="col col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
- <div class="col-xs-6 col-lg-4">
+ <div class="col col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
- <div class="col-xs-6 col-lg-4">
+ <div class="col col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div><!--/span-->
- <div class="col-xs-6 col-lg-4">
+ <div class="col col-xs-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
@@ -76,7 +76,7 @@
</div><!--/row-->
</div><!--/span-->
- <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
+ <div class="col col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>