<imgsrc="assets/img/responsive-illustrations.png"alt="Responsive devices"style="float: right; margin: 0 0 20px 20px;">
<p>Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
<ul>
<li>Modify the width of column in our grid</li>
<li>Stack elements instead of float wherever necessary</li>
<li>Resize headings and text to be more appropriate for devices</li>
</ul>
<p>Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.</p>
<h2>Supported devices</h2>
<p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
<tableclass="table table-bordered table-striped">
...
...
@@ -2376,7 +2366,7 @@ For example, <code><section></code> should be wrapped as inlin
<h2>Responsive utility classes</h2>
<p>For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in <code>responsive.less</code>.</p>
<p>For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device).</p>
<imgsrc="assets/img/responsive-illustrations.png"alt="Responsive devices"style="float: right; margin: 0 0 20px 20px;">
<p>{{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.{{/i}}</p>
<ul>
<li>{{_i}}Modify the width of column in our grid{{/i}}</li>
<li>{{_i}}Stack elements instead of float wherever necessary{{/i}}</li>
<li>{{_i}}Resize headings and text to be more appropriate for devices{{/i}}</li>
</ul>
<p>{{_i}}Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.{{/i}}</p>
{{! Supported }}
<h2>{{_i}}Supported devices{{/i}}</h2>
<p>{{_i}}Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}</p>
...
...
@@ -2323,7 +2312,7 @@
{{! Responsive utility classes }}
<h2>{{_i}}Responsive utility classes{{/i}}</h2>
<p>{{_i}}For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in <code>responsive.less</code>.{{/i}}</p>
<p>{{_i}}For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device).{{/i}}</p>
