- <!-- Glyphicons icon font
- ================================================== -->
- <div class="bs-docs-section">
- <div class="page-header">
- <h1 id="glyphicons">Glyphicons</h1>
- </div>
- <p class="lead">With the launch of Bootstrap 3, icons have been moved to a <a href="https://github.com/twbs/bootstrap-glyphicons">separate repository</a>. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.</p>
- <p class="lead">
- <a href="http://glyphicons.getbootstrap.com/" class="btn btn-default btn-lg">Visit Glyphicons for Bootstrap</a> or <a href="https://github.com/twbs/bootstrap-glyphicons">download from GitHub</a>
- </p>
- </div>
-
-
-
<!-- Grid system
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="grid">Grid system</h1>
</div>
- <p class="lead">Bootstrap includes a responsive, mobile
-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
+ <p class="lead">Bootstrap includes a responsive, mobile
first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
<h3 id="grid-media-queries">Media queries</h3>
<p>We use the following media queries to create the key breakpoints in our grid system.</p>
<h3 id="grid-options">Grid options</h3>
<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
- <div class="bs-table-scrollable">
- <table class="table table-bordered table-striped bs-table">
+ <div class="table-responsive">
+ <table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<tr>
<th>Max container width</th>
<td>None (auto)</td>
- <td>720px</td>
- <td>940px</td>
- <td>1140px</td>
+ <td>750px</td>
+ <td>970px</td>
+ <td>1170px</td>
</tr>
<tr>
<th>Class prefix</th>
<p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
</div>
<div class="row show-grid">
- <div class="col-md-8">8</div>
- <div class="col-md-4">4</div>
+ <div class="col-md-8">.col-md-8</div>
+ <div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
- <div class="col-md-4">4</div>
- <div class="col-md-4">4</div>
- <div class="col-md-4">4</div>
+ <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>
<div class="row show-grid">
- <div class="col-md-6">6</div>
- <div class="col-md-6">6</div>
+ <div class="col-md-6">.col-md-6</div>
+ <div class="col-md-6">.col-md-6</div>
</div>
</div>
{% highlight html %}
<div class="row">
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
- <div class="col-md-1">1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
- <div class="col-md-8">8</div>
- <div class="col-md-4">4</div>
+ <div class="col-md-8">.col-md-8</div>
+ <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
- <div class="col-md-4">4</div>
- <div class="col-md-4">4</div>
- <div class="col-md-4">4</div>
+ <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>
<div class="row">
- <div class="col-md-6">6</div>
- <div class="col-md-6">6</div>
+ <div class="col-md-6">.col-md-6</div>
+ <div class="col-md-6">.col-md-6</div>
</div>
{% endhighlight %}
<p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
- <div class="col-xs-12 col-md-8">8</div>
- <div class="col-xs-6 col-md-4">4</div>
+ <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>
<div class="row show-grid">
- <div class="col-xs-6 col-md-4">4</div>
- <div class="col-xs-6 col-md-4">4</div>
- <div class="col-xs-6 col-md-4">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-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row show-grid">
- <div class="col-xs-6 col-md-6">6</div>
- <div class="col-xs-6 col-md-6">6</div>
+ <div class="col-xs-6">.col-xs-6</div>
+ <div class="col-xs-6">.col-xs-6</div>
</div>
</div>
{% highlight html %}
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
- <div class="col-xs-12 col-md-8">8</div>
- <div class="col-xs-6 col-md-4">4</div>
+ <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>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
- <div class="col-xs-6 col-md-4">4</div>
- <div class="col-xs-6 col-md-4">4</div>
- <div class="col-xs-6 col-md-4">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-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
- <div class="col-xs-6 col-md-6">6</div>
- <div class="col-xs-6 col-md-6">6</div>
+ <div class="col-xs-6">.col-xs-6</div>
+ <div class="col-xs-6">.col-xs-6</div>
</div>
{% endhighlight %}
<p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
- <div class="col-md-4">4</div>
- <div class="col-md-4 col-md-offset-4">4 offset 4</div>
- </div><!-- /row -->
+ <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
+ </div>
<div class="row show-grid">
- <div class="col-md-3 col-md-offset-3">3 offset 3</div>
- <div class="col-md-3 col-md-offset-3">3 offset 3</div>
- </div><!-- /row -->
+ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+ </div>
<div class="row show-grid">
- <div class="col-md-6 col-md-offset-3">6 offset 3</div>
- </div><!-- /row -->
+ <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
+ </div>
</div>
{% highlight html %}
<div class="row">
- <div class="col-md-4">...</div>
- <div class="col-md-4 col-md-offset-4">...</div>
+ <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
- <div class="col-md-3 col-md-offset-3">3 offset 3</div>
- <div class="col-md-3 col-md-offset-3">3 offset 3</div>
+ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
- <div class="col-md-6 col-md-offset-3">...</div>
+ <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
{% endhighlight %}
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<div class="row show-grid">
<div class="col-md-9">
- Level 1: 9 columns
+ Level 1: .col-md-9
<div class="row show-grid">
<div class="col-md-6">
- Level 2: 6 columns
+ Level 2: .col-md-6
</div>
<div class="col-md-6">
- Level 2: 6 columns
+ Level 2: .col-md-6
</div>
</div>
</div>
{% highlight html %}
<div class="row">
<div class="col-md-9">
- Level 1: 9 columns
+ Level 1: .col-md-9
<div class="row">
<div class="col-md-6">
- Level 2: 6 columns
+ Level 2: .col-md-6
</div>
<div class="col-md-6">
- Level 2: 6 columns
+ Level 2: .col-md-6
</div>
</div>
</div>
<h3 id="grid-column-ordering">Column ordering</h3>
<p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p>
<div class="row show-grid">
- <div class="col-md-9 col-md-push-3">9</div>
- <div class="col-md-3 col-md-pull-9">3</div>
+ <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
+ <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
{% highlight html %}
<div class="row">
- <div class="col-md-9 col-md-push-3">9</div>
- <div class="col-md-3 col-md-pull-9">3</div>
+ <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
+ <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
{% endhighlight %}
<table class="table">
<tbody>
<tr>
- <td><h1>Bootstrap heading</h1></td>
- <td>Semibold 38px</td>
+ <td><h1>h1. Bootstrap heading</h1></td>
+ <td>Semibold 36px</td>
</tr>
<tr>
- <td><h2>Bootstrap heading</h2></td>
- <td>Semibold 32px</td>
+ <td><h2>h2. Bootstrap heading</h2></td>
+ <td>Semibold 30px</td>
</tr>
<tr>
- <td><h3>Bootstrap heading</h3></td>
+ <td><h3>h3. Bootstrap heading</h3></td>
<td>Semibold 24px</td>
</tr>
<tr>
- <td><h4>Bootstrap heading</h4></td>
+ <td><h4>h4. Bootstrap heading</h4></td>
<td>Semibold 18px</td>
</tr>
<tr>
- <td><h5>Bootstrap heading</h5></td>
+ <td><h5>h5. Bootstrap heading</h5></td>
<td>Semibold 14px</td>
</tr>
<tr>
- <td><h6>Bootstrap heading</h6></td>
+ <td><h6>h6. Bootstrap heading</h6></td>
<td>Semibold 12px</td>
</tr>
</tbody>
{% endhighlight %}
<h3>Inline</h3>
- <p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
+ <p>Place all list items on a single line with <code>display: inline-block;</code> and some light padding.</p>
<div class="bs-example">
<ul class="list-inline">
<li>Lorem ipsum</li>
{% endhighlight %}
-
<h2 id="tables-contextual-classes">Contextual classes</h2>
<p>Use contextual classes to color table rows or individual cells.</p>
- <div class="bs-table-scrollable">
- <table class="table table-bordered table-striped bs-table">
+ <div class="table-responsive">
+ <table class="table table-bordered table-striped">
<colgroup>
<col class="col-lg-1">
<col class="col-lg-7">
</tr>
{% endhighlight %}
+
+ <h2 id="tables-responsive">Responsive tables</h2>
+ <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
+ <div class="bs-example">
+ <div class="table-responsive">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ </tbody>
+ </table>
+ </div><!-- /.table-responsive -->
+
+ <div class="table-responsive">
+ <table class="table table-bordered">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ </tbody>
+ </table>
+ </div><!-- /.table-responsive -->
+ </div><!-- /example -->
+{% highlight html %}
+<div class="table-responsive">
+ <table class="table">
+ ...
+ </table>
+</div>
+{% endhighlight %}
+
</div>
{% endhighlight %}
<h3>.pull-left</h3>
- <p>Float an element left</p>
+ <p>Float an element left with a class. Can also be used as a mixin.</p>
{% highlight html %}
<div class="pull-left">...</div>
{% endhighlight %}
{% highlight css %}
.pull-left {
- float: left;
+ float: left !important;
}
{% endhighlight %}
<h3>.pull-right</h3>
- <p>Float an element right</p>
+ <p>Float an element right with a class. Can also be used as a mixin.</p>
{% highlight html %}
<div class="pull-right">...</div>
{% endhighlight %}
{% highlight css %}
.pull-right {
- float: right;
+ float: right !important;
}
{% endhighlight %}
<h3>.clearfix</h3>
- <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
+ <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
{% highlight html %}
<div class="clearfix">...</div>
{% endhighlight %}
<h1>Responsive utilities</h1>
</div>
<p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
+ <p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. <strong>Responsive utilities are currently only available for block and table toggling.</strong> Use with inline and table elements is currently not supported.</p>
- <h3>Responsive classes</h3>
- <div class="bs-table-scrollable">
+
+ <h2 id="responsive-utilities-classes">Available classes</h2>
+ <p>Use a single or combination of the available classes for toggling content across viewport breakpoints.</p>
+ <div class="table-responsive">
<table class="table table-bordered table-striped responsive-utilities">
<thead>
<tr>
</table>
</div>
- <h3>Print classes</h3>
- <div class="bs-table-scrollable">
+
+ <h2 id="responsive-utilities-print">Print classes</h2>
+ <p>Similar to the regular responsive classes, use these for toggling content for print.</p>
+ <div class="table-responsive">
<table class="table table-bordered table-striped responsive-utilities">
<thead>
<tr>
</table>
</div>
- <h3>When to use</h3>
- <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning <code>display: none;</code> or <code>display: block;</code>. Use with inline and table elements is currently not supported.</p>
- <h3>Test case</h3>
+ <h2 id="responsive-utilities-tests">Test cases</h2>
<p>Resize your browser or load on different devices to test the responsive utility classes.</p>
- <h4>Visible on...</h4>
+
+ <h3>Visible on...</h3>
<p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
<div class="row responsive-utilities-test visible-on">
<div class="col-xs-6 col-sm-3">
<span class="visible-lg">✔ Visible on large</span>
</div>
</div>
- <h4>Hidden on...</h4>
+ <div class="row responsive-utilities-test visible-on">
+ <div class="col-xs-6 col-sm-6">
+ <span class="hidden-xs hidden-sm">Extra small and small</span>
+ <span class="visible-xs visible-sm">✔ Visible on x-small and small</span>
+ </div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="hidden-md hidden-lg">Medium and large</span>
+ <span class="visible-md visible-lg">✔ Visible on medium and large</span>
+ </div>
+ <div class="clearfix visible-xs"></div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="hidden-xs hidden-md">Extra small and medium</span>
+ <span class="visible-xs visible-md">✔ Visible on x-small and medium</span>
+ </div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="hidden-sm hidden-lg">Small and large</span>
+ <span class="visible-sm visible-lg">✔ Visible on small and large</span>
+ </div>
+ <div class="clearfix visible-xs"></div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="hidden-xs hidden-lg">Extra small and large</span>
+ <span class="visible-xs visible-lg">✔ Visible on x-small and large</span>
+ </div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="hidden-sm hidden-md">Small and medium</span>
+ <span class="visible-sm visible-md">✔ Visible on small and medium</span>
+ </div>
+ </div>
+
+ <h3>Hidden on...</h3>
<p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
<div class="row responsive-utilities-test hidden-on">
<div class="col-xs-6 col-sm-3">
<span class="hidden-lg">✔ Hidden on large</span>
</div>
</div>
+ <div class="row responsive-utilities-test hidden-on">
+ <div class="col-xs-6 col-sm-6">
+ <span class="visible-xs visible-sm">Extra small and small</span>
+ <span class="hidden-xs hidden-sm">✔ Hidden on x-small and small</span>
+ </div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="visible-md visible-lg">Medium and large</span>
+ <span class="hidden-md hidden-lg">✔ Hidden on medium and large</span>
+ </div>
+ <div class="clearfix visible-xs"></div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="visible-xs visible-md">Extra small and medium</span>
+ <span class="hidden-xs hidden-md">✔ Hidden on x-small and medium</span>
+ </div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="visible-sm visible-lg">Small and large</span>
+ <span class="hidden-sm hidden-lg">✔ Hidden on small and large</span>
+ </div>
+ <div class="clearfix visible-xs"></div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="visible-xs visible-lg">Extra small and large</span>
+ <span class="hidden-xs hidden-lg">✔ Hidden on x-small and large</span>
+ </div>
+ <div class="col-xs-6 col-sm-6">
+ <span class="visible-sm visible-md">Small and medium</span>
+ <span class="hidden-sm hidden-md">✔ Hidden on small and medium</span>
+ </div>
+ </div>
</div>
projects / bootswatch / blobdiff