<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<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>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>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 @@
<hrclass="featurette-divider">
<divclass="row featurette">
<divclass="col-md-7">
<divclass="col col-md-7">
<h2class="featurette-heading">First featurette heading. <spanclass="text-muted">It'll blow your mind.</span></h2>
<pclass="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>
<h2class="featurette-heading">Oh yeah, it's that good. <spanclass="text-muted">See for yourself.</span></h2>
<pclass="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>
<h2class="featurette-heading">And lastly, this one. <spanclass="text-muted">Checkmate.</span></h2>
<pclass="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>
<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>
<divclass="row">
<divclass="col-xs-4">.col-xs-4</div>
<divclass="col-xs-4">.col-xs-4</div>
<divclass="col-xs-4">.col-xs-4</div>
<divclass="col col-xs-4">.col .col-xs-4</div>
<divclass="col col-xs-4">.col .col-xs-4</div>
<divclass="col col-xs-4">.col .col-xs-4</div>
</div>
<divclass="row">
<divclass="col-sm-4">.col-sm-4</div>
<divclass="col-sm-4">.col-sm-4</div>
<divclass="col-sm-4">.col-sm-4</div>
<divclass="col col-sm-4">.col .col-sm-4</div>
<divclass="col col-sm-4">.col .col-sm-4</div>
<divclass="col col-sm-4">.col .col-sm-4</div>
</div>
<divclass="row">
<divclass="col-md-4">.col-md-4</div>
<divclass="col-md-4">.col-md-4</div>
<divclass="col-md-4">.col-md-4</div>
<divclass="col col-md-4">.col .col-md-4</div>
<divclass="col col-md-4">.col .col-md-4</div>
<divclass="col col-md-4">.col .col-md-4</div>
</div>
<divclass="row">
<divclass="col-lg-4">.col-lg-4</div>
<divclass="col-lg-4">.col-lg-4</div>
<divclass="col-lg-4">.col-lg-4</div>
<divclass="col col-lg-4">.col .col-lg-4</div>
<divclass="col col-lg-4">.col .col-lg-4</div>
<divclass="col col-lg-4">.col .col-lg-4</div>
</div>
<divclass="row">
<divclass="col-xl-4">.col-xl-4</div>
<divclass="col-xl-4">.col-xl-4</div>
<divclass="col-xl-4">.col-xl-4</div>
<divclass="col col-xl-4">.col .col-xl-4</div>
<divclass="col col-xl-4">.col .col-xl-4</div>
<divclass="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>
<divclass="row">
<divclass="col-md-4">.col-md-4</div>
<divclass="col-md-4">.col-md-4</div>
<divclass="col-md-4">.col-md-4</div>
<divclass="col col-md-4">.col .col-md-4</div>
<divclass="col col-md-4">.col .col-md-4</div>
<divclass="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>
<divclass="row">
<divclass="col-md-3">.col-md-3</div>
<divclass="col-md-6">.col-md-6</div>
<divclass="col-md-3">.col-md-3</div>
<divclass="col col-md-3">.col .col-md-3</div>
<divclass="col col-md-6">.col .col-md-6</div>
<divclass="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>
<divclass="row">
<divclass="col-md-8">.col-md-8</div>
<divclass="col-md-4">.col-md-4</div>
<divclass="col col-md-8">.col .col-md-8</div>
<divclass="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>
<divclass="row">
<divclass="col-md-8">
<divclass="col col-md-8">
.col-md-8
<divclass="row">
<divclass="col-md-6">.col-md-6</div>
<divclass="col-md-6">.col-md-6</div>
<divclass="col col-md-6">.col .col-md-6</div>
<divclass="col col-md-6">.col .col-md-6</div>
</div>
</div>
<divclass="col-md-4">.col-md-4</div>
<divclass="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>
<p><ahref="http://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
<divclass="row">
<divclass="col-xs-6 col-sm-3">
<divclass="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.
<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>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>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>
<pclass="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>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>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>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>
<divclass="row">
<divclass="col-xs-6 col-lg-4">
<divclass="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>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>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>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>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>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>
