Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
css.html 96.9 KB
Newer Older
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1
2
3
4 
---
layout: default
title: CSS
---
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
5
6
7 

<!-- Subhead
================================================== -->
Mark Otto's avatar
Change .jumbotron usage in docs layout to .bs-docs-jumbotron    
Mark Otto committed
8 
<header class="bs-docs-jumbotron subhead">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
9
10
11
12
13
14
15
16
17
18
19
20
21
22 
  <div class="container">
    <h1>CSS</h1>
    <p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
  </div>
</header>


  <div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav">
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
23
24
25 
          <li><a href="#global"><i class="glyphicon glyphicon-chevron-right"></i> Global settings</a></li>
          <li><a href="#typography"><i class="glyphicon glyphicon-chevron-right"></i> Typography</a></li>
          <li><a href="#code"><i class="glyphicon glyphicon-chevron-right"></i> Code</a></li>
Mark Otto's avatar
Update some links and rename #gridsystem to #grid-system    
Mark Otto committed
26 
          <li><a href="#grid-system"><i class="glyphicon glyphicon-chevron-right"></i> Grid system</a></li>
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
27
28
29
30
31
32 
          <li><a href="#tables"><i class="glyphicon glyphicon-chevron-right"></i> Tables</a></li>
          <li><a href="#forms"><i class="glyphicon glyphicon-chevron-right"></i> Forms</a></li>
          <li><a href="#buttons"><i class="glyphicon glyphicon-chevron-right"></i> Buttons</a></li>
          <li><a href="#images"><i class="glyphicon glyphicon-chevron-right"></i> Images</a></li>
          <li><a href="#icons"><i class="glyphicon glyphicon-chevron-right"></i> Glyphicons</a></li>
          <li><a href="#responsive-utilities"><i class="glyphicon glyphicon-chevron-right"></i> Responsive utilities</a></li>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
33
34
35
36
37
38
39
40
41
42
43
44 
        </ul>
      </div>
      <div class="span9">



        <!-- Global Bootstrap settings
        ================================================== -->
        <section id="global">
          <div class="page-header">
            <h1>Global settings</h1>
          </div>
Mark Otto's avatar
Move grid/container styles to grid.less; update docs; add offsetting back    
Mark Otto committed
45 
          <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
46
47
48 

          <h3>Requires HTML5 doctype</h3>
          <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
49
50
51
52 

{% highlight html linenos %}
<!DOCTYPE html>
<html lang="en">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
53 
  ...
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
54
55 
</html>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
56
Mark Otto's avatar
Move grid/container styles to grid.less; update docs; add offsetting back    
Mark Otto committed
57
58 
          <h3>Mobile first</h3>
          <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
Mark Otto's avatar
clean up responsive docs and global css styles    
Mark Otto committed
59 
          <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
60
61
62
63 

{% highlight html linenos %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% endhighlight %}
Mark Otto's avatar
Move grid/container styles to grid.less; update docs; add offsetting back    
Mark Otto committed
64
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
65
66
67
68
69
70
71
72
73
74 
          <h3>Typography and links</h3>
          <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
          <ul>
            <li>Remove <code>margin</code> on the body</li>
            <li>Set <code>background-color: white;</code> on the <code>body</code></li>
            <li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li>
            <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
          </ul>
          <p>These styles can be found within <strong>scaffolding.less</strong>.</p>
Mark Otto's avatar
update docs regarding normalize and clearfix    
Mark Otto committed
75
76 
          <h3>Normalize reset</h3>
          <p>For improved cross-browser rendering, we use <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
77
78
79
80
81
82
83
84
85
86
87
88
89 

        </section>




        <!-- Typography
        ================================================== -->
        <section id="typography">
          <div class="page-header">
            <h1>Typography</h1>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
90 
          <!-- Headings -->
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
91
92 
          <h2 id="headings">Headings</h2>
          <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
Mark Otto's avatar
try out new table-based type example    
Mark Otto committed
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125 

          <div class="bs-docs-example bs-docs-example-type">
            <table class="table">
              <tbody>
                <tr>
                  <th><h1>Bootstrap heading</h1></th>
                  <td>Semibold 38px</td>
                </tr>
                <tr>
                  <th><h2>Bootstrap heading</h2></th>
                  <td>Semibold 32px</td>
                </tr>
                <tr>
                  <th><h3>Bootstrap heading</h3></th>
                  <td>Semibold 24px</td>
                </tr>
                <tr>
                  <th><h4>Bootstrap heading</h4></th>
                  <td>Semibold 18px</td>
                </tr>
                <tr>
                  <th><h5>Bootstrap heading</h5></th>
                  <td>Semibold 16px</td>
                </tr>
                <tr>
                  <th><h6>Bootstrap heading</h6></th>
                  <td>Semibold 12px</td>
                </tr>
              </tbody>
            </table>
          </div>

<!--           <div class="bs-docs-example">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
126
127
128
129
130
131
132 
            <h1>h1. Heading 1</h1>
            <h2>h2. Heading 2</h2>
            <h3>h3. Heading 3</h3>
            <h4>h4. Heading 4</h4>
            <h5>h5. Heading 5</h5>
            <h6>h6. Heading 6</h6>
          </div>
Mark Otto's avatar
try out new table-based type example    
Mark Otto committed
133 
 -->
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
134 
          <!-- Body copy -->
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
135
136
137
138
139
140
141 
          <h2 id="body-copy">Body copy</h2>
          <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
          <div class="bs-docs-example">
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
142
143
144 
{% highlight html linenos %}
<p>...</p>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
145
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
146 
          <!-- Body copy .lead -->
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
147
148
149
150
151 
          <h3>Lead body copy</h3>
          <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
          <div class="bs-docs-example">
            <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
152
153
154 
{% highlight html linenos %}
<p class="lead">...</p>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
155
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
156 
          <!-- Using LESS -->
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
157
158
159
160 
          <h3>Built with Less</h3>
          <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@font-size-base</code> and <code>@line-height-base</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
161 
          <!-- Emphasis -->
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
162
163
164
165
166
167
168
169 
          <h2 id="emphasis">Emphasis</h2>
          <p>Make use of HTML's default emphasis tags with lightweight styles.</p>

          <h3><code>&lt;small&gt;</code></h3>
          <p>For de-emphasizing inline or blocks of text, <small>use the small tag.</small></p>
          <div class="bs-docs-example">
            <p><small>This line of text is meant to be treated as fine print.</small></p>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
170
171
172
173 
{% highlight html linenos %}
<small>This line of text is meant to be treated as fine print.</small>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
174
175
176
177
178
179 

          <h3>Bold</h3>
          <p>For emphasizing a snippet of text with a heavier font-weight.</p>
          <div class="bs-docs-example">
            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
180
181
182 
{% highlight html linenos %}
<strong>rendered as bold text</strong>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
183
184
185
186
187
188 

          <h3>Italics</h3>
          <p>For emphasizing a snippet of text with italics.</p>
          <div class="bs-docs-example">
            <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
189
190
191 
{% highlight html linenos %}
<em>rendered as italicized text</em>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
192
Mark Otto's avatar
Drop labels from the docs    
Mark Otto committed
193 
          <p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
194
Mark Otto's avatar
Add text alignment utility classes    
Mark Otto committed
195
196
197
198
199
200
201 
          <h3>Alignment classes</h3>
          <p>Easily realign text to components with text alignment classes.</p>
          <div class="bs-docs-example">
            <p class="text-left">Left aligned text.</p>
            <p class="text-center">Center aligned text.</p>
            <p class="text-right">Right aligned text.</p>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
202
203
204
205
206 
{% highlight html linenos %}
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
{% endhighlight %}
Mark Otto's avatar
Add text alignment utility classes    
Mark Otto committed
207
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
208
209
210
211
212
213
214
215 
          <h3>Emphasis classes</h3>
          <p>Convey meaning through color with a handful of emphasis utility classes.</p>
          <div class="bs-docs-example">
            <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
            <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
            <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
216 
{% highlight html linenos %}
Mark Otto's avatar
fix inaccurate text classes code    
Mark Otto committed
217
218
219
220 
<p class="muted">...</p>
<p class="text-warning">...</p>
<p class="text-error">...</p>
<p class="text-success">...</p>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
221 
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
222
223
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
224 
          <!-- Abbreviations -->
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
225
226
227
228
229
230
231
232 
          <h2 id="abbreviations">Abbreviations</h2>
          <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>

          <h3><code>&lt;abbr&gt;</code></h3>
          <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute.</p>
          <div class="bs-docs-example">
            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
233
234
235 
{% highlight html linenos %}
<abbr title="attribute">attr</abbr>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
236
237
238
239
240
241 

          <h3><code>&lt;abbr class="initialism"&gt;</code></h3>
          <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
          <div class="bs-docs-example">
            <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
242
243
244 
{% highlight html linenos %}
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
245
246
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
247 
          <!-- Addresses -->
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264 
          <h2 id="addresses">Addresses</h2>
          <p>Present contact information for the nearest ancestor or the entire body of work.</p>

          <h3><code>&lt;address&gt;</code></h3>
          <p>Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
          <div class="bs-docs-example">
            <address>
              <strong>Twitter, Inc.</strong><br>
              795 Folsom Ave, Suite 600<br>
              San Francisco, CA 94107<br>
              <abbr title="Phone">P:</abbr> (123) 456-7890
            </address>
            <address>
              <strong>Full Name</strong><br>
              <a href="mailto:#">first.last@example.com</a>
            </address>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280 
{% highlight html linenos %}
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>
{% endhighlight %}


          <!-- Blockquotes -->
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
281
282
283
284
285
286
287
288
289
290 
          <h2 id="blockquotes">Blockquotes</h2>
          <p>For quoting blocks of content from another source within your document.</p>

          <h3>Default blockquote</h3>
          <p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p>
          <div class="bs-docs-example">
            <blockquote>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            </blockquote>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
291
292
293
294
295 
{% highlight html linenos %}
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
296
297
298
299
300
301
302
303
304
305
306
307 

          <h3>Blockquote options</h3>
          <p>Style and content changes for simple variations on a standard blockquote.</p>

          <h4>Naming a source</h4>
          <p>Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
          <div class="bs-docs-example">
            <blockquote>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
            </blockquote>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
308
309
310
311
312
313 
{% highlight html linenos %}
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
314
315
316
317
318
319
320
321
322 

          <h4>Alternate displays</h4>
          <p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p>
          <div class="bs-docs-example" style="overflow: hidden;">
            <blockquote class="pull-right">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
            </blockquote>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
323
324 
{% highlight html linenos %}
<blockquote class="pull-right">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
325 
  ...
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
326
327 
</blockquote>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353 


          <!-- Lists -->
          <h2 id="lists">Lists</h2>

          <h3>Unordered</h3>
          <p>A list of items in which the order does <em>not</em> explicitly matter.</p>
          <div class="bs-docs-example">
            <ul>
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetur adipiscing elit</li>
              <li>Integer molestie lorem at massa</li>
              <li>Facilisis in pretium nisl aliquet</li>
              <li>Nulla volutpat aliquam velit
                <ul>
                  <li>Phasellus iaculis neque</li>
                  <li>Purus sodales ultricies</li>
                  <li>Vestibulum laoreet porttitor sem</li>
                  <li>Ac tristique libero volutpat at</li>
                </ul>
              </li>
              <li>Faucibus porta lacus fringilla vel</li>
              <li>Aenean sit amet erat nunc</li>
              <li>Eget porttitor lorem</li>
            </ul>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
354
355
356
357
358 
{% highlight html linenos %}
<ul>
  <li>...</li>
</ul>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373 

          <h3>Ordered</h3>
          <p>A list of items in which the order <em>does</em> explicitly matter.</p>
          <div class="bs-docs-example">
            <ol>
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetur adipiscing elit</li>
              <li>Integer molestie lorem at massa</li>
              <li>Facilisis in pretium nisl aliquet</li>
              <li>Nulla volutpat aliquam velit</li>
              <li>Faucibus porta lacus fringilla vel</li>
              <li>Aenean sit amet erat nunc</li>
              <li>Eget porttitor lorem</li>
            </ol>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
374
375
376
377
378 
{% highlight html linenos %}
<ol>
  <li>...</li>
</ol>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400 

        <h3>Unstyled</h3>
        <p>Remove the default <code>list-style</code> and left padding on list items (immediate children only).</p>
        <div class="bs-docs-example">
          <ul class="list-unstyled">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit
              <ul>
                <li>Phasellus iaculis neque</li>
                <li>Purus sodales ultricies</li>
                <li>Vestibulum laoreet porttitor sem</li>
                <li>Ac tristique libero volutpat at</li>
              </ul>
            </li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
            <li>Eget porttitor lorem</li>
          </ul>
        </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
401
402
403
404
405 
{% highlight html linenos %}
<ul class="list-unstyled">
  <li>...</li>
</ul>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
406
407
408
409
410
411
412
413
414
415 

        <h3>Inline</h3>
        <p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
        <div class="bs-docs-example">
          <ul class="list-inline">
            <li>Lorem ipsum</li>
            <li>Phasellus iaculis</li>
            <li>Nulla volutpat</li>
          </ul>
        </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
416
417
418
419
420 
{% highlight html linenos %}
<ul class="list-inline">
  <li>...</li>
</ul>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
421
422
423
424
425
426
427
428
429
430
431
432
433
434 

        <h3>Description</h3>
        <p>A list of terms with their associated descriptions.</p>
        <div class="bs-docs-example">
          <dl>
            <dt>Description lists</dt>
            <dd>A description list is perfect for defining terms.</dd>
            <dt>Euismod</dt>
            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
            <dt>Malesuada porta</dt>
            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
          </dl>
        </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
435
436
437
438
439
440 
{% highlight html linenos %}
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456 

        <h4>Horizontal description</h4>
        <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
        <div class="bs-docs-example">
          <dl class="dl-horizontal">
            <dt>Description lists</dt>
            <dd>A description list is perfect for defining terms.</dd>
            <dt>Euismod</dt>
            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
            <dt>Malesuada porta</dt>
            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
            <dt>Felis euismod semper eget lacinia</dt>
            <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
          </dl>
        </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
457
458
459
460
461
462
463 
{% highlight html linenos %}
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>
{% endhighlight %}
Mark Otto's avatar
Drop labels from the docs    
Mark Otto committed
464 
        <h5>Auto-truncating</h5>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
465
466
467
468
469
470
471 
        <p>
          Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
        </p>
      </section>
Mark Otto's avatar
docs changes, more type improvements, add grid system basics back    
Mark Otto committed
472
473 
        <!-- Grid system
        ================================================== -->
Mark Otto's avatar
Update some links and rename #gridsystem to #grid-system    
Mark Otto committed
474 
        <section id="grid-system">
Mark Otto's avatar
docs changes, more type improvements, add grid system basics back    
Mark Otto committed
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508 
          <div class="page-header">
            <h1>Grid system</h1>
          </div>

          <h2>Live grid example</h2>
          <p>The default Bootstrap grid system utilizes <strong>12 columns</strong>, making for a 940px wide container without <a href="./scaffolding.html#responsive">responsive features</a> enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.</p>
          <div class="bs-docs-grid">
            <div class="row show-grid">
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
              <div class="span1">1</div>
            </div>
            <div class="row show-grid">
              <div class="span4">4</div>
              <div class="span4">4</div>
              <div class="span4">4</div>
            </div>
            <div class="row show-grid">
              <div class="span6">6</div>
              <div class="span6">6</div>
            </div>
          </div>

          <h3>Basic grid HTML</h3>
          <p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).</p>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
509
510
511
512
513
514
515 
{% highlight html linenos %}
<div class="row">
  <div class="span8">8</div>
  <div class="span4">4</div>
</div>
{% endhighlight %}
Mark Otto's avatar
docs changes, more type improvements, add grid system basics back    
Mark Otto committed
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532 
          <p>Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.</p>

          <h2>Offsetting columns</h2>
          <p>Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.</p>
          <div class="bs-docs-grid">
            <div class="row show-grid">
              <div class="span4">4</div>
              <div class="span4 offset4">4 offset 4</div>
            </div><!-- /row -->
            <div class="row show-grid">
              <div class="span3 offset3">3 offset 3</div>
              <div class="span3 offset3">3 offset 3</div>
            </div><!-- /row -->
            <div class="row show-grid">
              <div class="span6 offset6">6 offset 6</div>
            </div><!-- /row -->
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
533
534
535
536
537
538 
{% highlight html linenos %}
<div class="row">
  <div class="span4">...</div>
  <div class="span4 offset4">...</div>
</div>
{% endhighlight %}
Mark Otto's avatar
docs changes, more type improvements, add grid system basics back    
Mark Otto committed
539
540
541 


          <h2>Nesting columns</h2>
Mark Otto's avatar
Move grid/container styles to grid.less; update docs; add offsetting back    
Mark Otto committed
542 
          <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to 12.</p>
Mark Otto's avatar
docs changes, more type improvements, add grid system basics back    
Mark Otto committed
543
544
545
546
547
548
549
550
551
552
553
554
555 
          <div class="row show-grid">
            <div class="span9">
              Level 1: 9 columns
              <div class="row show-grid">
                <div class="span6">
                  Level 2: 6 columns
                </div>
                <div class="span6">
                  Level 2: 6 columns
                </div>
              </div>
            </div>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
556
557
558 
{% highlight html linenos %}
<div class="row">
  <div class="span9">
Mark Otto's avatar
docs changes, more type improvements, add grid system basics back    
Mark Otto committed
559 
    Level 1: 9 columns
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
560
561
562
563
564
565
566
567
568
569
570
571 
    <div class="row">
      <div class="span6">
        Level 2: 6 columns
      </div>
      <div class="span6">
        Level 2: 6 columns
      </div>
    </div>
  </div>
</div>
{% endhighlight %}
Mark Otto's avatar
docs changes, more type improvements, add grid system basics back    
Mark Otto committed
572
573
574
575
576
577 
        </section>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
578
579
580
581
582
583
584
585
586
587
588
589 
        <!-- Code
        ================================================== -->
        <section id="code">
          <div class="page-header">
            <h1>Code</h1>
          </div>

          <h2>Inline</h2>
          <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
<div class="bs-docs-example">
  For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
590
591
592 
{% highlight html linenos %}
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
593
594
595
596
597
598 

          <h2>Basic block</h2>
          <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
<div class="bs-docs-example">
  <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
</div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
599
600
601
602 
{% highlight html linenos %}
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
603
604
605
606
607
608
609
610
611
612
613
614
615 
          <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
        </section>



        <!-- Tables
        ================================================== -->
        <section id="tables">
          <div class="page-header">
            <h1>Tables</h1>
          </div>

          <h2>Default styles</h2>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
616 
          <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647 
          <div class="bs-docs-example">
            <table class="table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
648
649
650
651
652
653 
          </div><!-- /example -->
{% highlight html linenos %}
<table class="table">
  ...
</table>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691 


          <h2>Optional classes</h2>
          <p>Add any of the following classes to the <code>.table</code> base class.</p>

          <h3><code>.table-striped</code></h3>
          <p>Adds zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child</code> CSS selector (not available in IE8).</p>
          <div class="bs-docs-example">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
692
693
694
695
696
697 
          </div><!-- /example -->
{% highlight html linenos %}
<table class="table table-striped">
  ...
</table>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735 

          <h3><code>.table-bordered</code></h3>
          <p>Add borders and rounded corners to the table.</p>
          <div class="bs-docs-example">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td rowspan="2">1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@TwBootstrap</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td colspan="2">Larry the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
736
737
738
739
740
741 
          </div><!-- /example -->
{% highlight html linenos %}
<table class="table table-bordered">
  ...
</table>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774 

          <h3><code>.table-hover</code></h3>
          <p>Enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
          <div class="bs-docs-example">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td colspan="2">Larry the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
775
776
777
778
779
780
781 
          </div><!-- /example -->
{% highlight html linenos %}
<table class="table table-hover">
  ...
</table>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814 

          <h3><code>.table-condensed</code></h3>
          <p>Makes tables more compact by cutting cell padding in half.</p>
          <div class="bs-docs-example">
            <table class="table table-condensed">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td colspan="2">Larry the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
815
816
817
818
819
820
821 
          </div><!-- /example -->
{% highlight html linenos %}
<table class="table table-condensed">
  ...
</table>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894 


          <h2>Optional row classes</h2>
          <p>Use contextual classes to color table rows.</p>
          <table class="table table-bordered table-striped">
            <colgroup>
              <col class="span1">
              <col class="span7">
            </colgroup>
            <thead>
              <tr>
                <th>Class</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <code>.success</code>
                </td>
                <td>Indicates a successful or positive action.</td>
              </tr>
              <tr>
                <td>
                  <code>.error</code>
                </td>
                <td>Indicates a dangerous or potentially negative action.</td>
              </tr>
              <tr>
                <td>
                  <code>.warning</code>
                </td>
                <td>Indicates a warning that might need attention.</td>
              </tr>
              <tr>
                <td>
                  <code>.info</code>
                </td>
                <td>Used as an alternative to the default styles.</td>
              </tr>
            </tbody>
          </table>
          <div class="bs-docs-example">
            <table class="table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Product</th>
                  <th>Payment Taken</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                <tr class="success">
                  <td>1</td>
                  <td>TB - Monthly</td>
                  <td>01/04/2012</td>
                  <td>Approved</td>
                </tr>
                <tr class="error">
                  <td>2</td>
                  <td>TB - Monthly</td>
                  <td>02/04/2012</td>
                  <td>Declined</td>
                </tr>
                <tr class="warning">
                  <td>3</td>
                  <td>TB - Monthly</td>
                  <td>03/04/2012</td>
                  <td>Pending</td>
                </tr>
              </tbody>
            </table>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
895
896 
          </div><!-- /example -->
{% highlight html linenos %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
897 
...
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
898
899
900
901
902
903 
<tr class="sucess">
  <td>1</td>
  <td>TB - Monthly</td>
  <td>01/04/2012</td>
  <td>Approved</td>
</tr>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
904 
...
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
905
906 
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967 


          <h2>Supported table markup</h2>
          <p>List of supported table HTML elements and how they should be used.</p>
          <table class="table table-bordered table-striped">
            <colgroup>
              <col class="span1">
              <col class="span7">
            </colgroup>
            <thead>
              <tr>
                <th>Tag</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <code>&lt;table&gt;</code>
                </td>
                <td>
                  Wrapping element for displaying data in a tabular format
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;thead&gt;</code>
                </td>
                <td>
                  Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;tbody&gt;</code>
                </td>
                <td>
                  Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;tr&gt;</code>
                </td>
                <td>
                  Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) that appears on a single row
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;td&gt;</code>
                </td>
                <td>
                  Default table cell
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;th&gt;</code>
                </td>
                <td>
Mark Otto's avatar
Fixes #6794: incorrect docs mention of th element    
Mark Otto committed
968 
                  Special table cell for column (or row, depending on scope and placement) labels
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
969
970
971
972
973
974
975
976
977
978
979
980 
                </td>
              </tr>
              <tr>
                <td>
                  <code>&lt;caption&gt;</code>
                </td>
                <td>
                  Description or summary of what the table holds, especially useful for screen readers
                </td>
              </tr>
            </tbody>
          </table>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999 
{% highlight html linenos %}
<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026 

        </section>



        <!-- Forms
        ================================================== -->
        <section id="forms">
          <div class="page-header">
            <h1>Forms</h1>
          </div>

          <h2 id="forms-default">Default styles</h2>
          <p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p>
          <form class="bs-docs-example">
            <fieldset>
              <legend>Legend</legend>
              <label>Label name</label>
              <input type="text" placeholder="Type something…">
              <p class="help-block">Example block-level help text here.</p>
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Check me out
                </label>
              </div>
              <button type="submit" class="btn">Submit</button>
            </fieldset>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043 
          </form><!-- /example -->
{% highlight html linenos %}
<form>
  <fieldset>
    <legend>Legend</legend>
    <label>Label name</label>
    <input type="text" placeholder="Type something…">
    <p class="help-block">Example block-level help text here.</p>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Check me out
      </label>
    </div>
    <button type="submit" class="btn">Submit</button>
  </fieldset>
</form>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1044
1045
1046 


          <h2 id="forms-layouts">Optional layouts</h2>
Mark Otto's avatar
Drop .form-search support    
Mark Otto committed
1047 
          <p>Included with Bootstrap are optional form layouts for common use cases.</p>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059 

          <h3>Inline form</h3>
          <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
          <form class="bs-docs-example form-inline">
            <input type="text" class="span3" placeholder="Email">
            <input type="password" class="span3" placeholder="Password">
            <div class="checkbox">
              <label>
                <input type="checkbox"> Remember me
              </label>
            </div>
            <button type="submit" class="btn">Sign in</button>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072 
          </form><!-- /example -->
{% highlight html linenos %}
<form class="form-inline">
  <input type="text" class="span3" placeholder="Email">
  <input type="password" class="span3" placeholder="Password">
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn">Sign in</button>
</form>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092 

          <h3>Horizontal form</h3>
          <p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
          <ul>
            <li>Add <code>.form-horizontal</code> to the form</li>
            <li>Wrap labels and controls in <code>.control-group</code></li>
            <li>Add <code>.control-label</code> to the label</li>
            <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
          </ul>
          <form class="bs-docs-example form-horizontal">
            <div class="control-group">
              <label class="control-label" for="inputEmail">Email</label>
              <div class="controls">
                <input type="text" id="inputEmail" placeholder="Email">
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="inputPassword">Password</label>
              <div class="controls">
                <input type="password" id="inputPassword" placeholder="Password">
Mark Otto's avatar
Refactor input groups    
Mark Otto committed
1093
1094
1095
1096
1097 
                <div class="checkbox">
                  <label>
                    <input type="checkbox"> Remember me
                  </label>
                </div>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1098
1099
1100
1101
1102
1103
1104
1105 
              </div>
            </div>
            <div class="control-group">
              <div class="controls">
                <button type="submit" class="btn">Sign in</button>
              </div>
            </div>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131 
{% highlight html linenos %}
<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142 


          <h2 id="forms-controls">Supported form controls</h2>
          <p>Examples of standard form controls supported in an example form layout.</p>

          <h3>Inputs</h3>
          <p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>
          <p>Requires the use of a specified <code>type</code> at all times.</p>
          <form class="bs-docs-example form-inline">
            <input type="text" placeholder="Text input">
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1143
1144
1145 
{% highlight html linenos %}
<input type="text" placeholder="Text input">
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1146
1147
1148
1149
1150
1151 

          <h3>Textarea</h3>
          <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
          <form class="bs-docs-example form-inline">
            <textarea rows="3"></textarea>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1152
1153
1154 
{% highlight html linenos %}
<textarea rows="3"></textarea>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1155
1156
1157
1158
1159 

          <h3>Checkboxes and radios</h3>
          <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
          <h4>Default (stacked)</h4>
          <form class="bs-docs-example">
Mark Otto's avatar
Fix checkbox and radios example    
Mark Otto committed
1160
1161
1162
1163
1164
1165 
            <div class="checkbox">
              <label>
                <input type="checkbox" value="">
                Option one is this and that&mdash;be sure to include why it's great
              </label>
            </div>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1166 
            <br>
Mark Otto's avatar
Fix checkbox and radios example    
Mark Otto committed
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178 
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                Option one is this and that&mdash;be sure to include why it's great
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Option two can be something else and selecting it will deselect option one
              </label>
            </div>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1179 
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1180
1181
1182
1183 
{% highlight html linenos %}
<div class="checkbox">
  <label>
    <input type="checkbox" value="">
Mark Otto's avatar
Fix checkbox and radios example    
Mark Otto committed
1184 
    Option one is this and that&mdash;be sure to include why it's great
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1185
1186 
  </label>
</div>
Mark Otto's avatar
Fix checkbox and radios example    
Mark Otto committed
1187
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1188
1189
1190 
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Mark Otto's avatar
Fix checkbox and radios example    
Mark Otto committed
1191 
    Option one is this and that&mdash;be sure to include why it's great
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1192
1193
1194 
  </label>
</div>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1195
1196 

          <h4>Inline checkboxes</h4>
Mark Otto's avatar
Re-add and update form styles:    
Mark Otto committed
1197 
          <p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1198 
          <form class="bs-docs-example">
Mark Otto's avatar
Re-add and update form styles:    
Mark Otto committed
1199 
            <label class="checkbox-inline">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1200
1201 
              <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
            </label>
Mark Otto's avatar
Re-add and update form styles:    
Mark Otto committed
1202 
            <label class="checkbox-inline">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1203
1204 
              <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
            </label>
Mark Otto's avatar
Re-add and update form styles:    
Mark Otto committed
1205 
            <label class="checkbox-inline">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1206
1207
1208 
              <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
            </label>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219 
{% highlight html linenos %}
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239 

          <h3>Selects</h3>
          <p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
          <form class="bs-docs-example">
            <select>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
            <br>
            <select multiple="multiple">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256 
{% highlight html linenos %}
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1257
1258
Mark Otto's avatar
Rearrange forms content    
Mark Otto committed
1259
1260
1261
1262
1263
1264
1265
1266
1267 

          <h2>Form control states</h2>
          <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>

          <h3 id="forms-input-focus">Input focus</h3>
          <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
          <form class="bs-docs-example form-inline">
            <input class="focused" id="focusedInput" type="text" value="This is focused...">
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1268
1269
1270 
{% highlight html linenos %}
<input id="focusedInput" type="text" value="This is focused...">
{% endhighlight %}
Mark Otto's avatar
Rearrange forms content    
Mark Otto committed
1271
1272
1273 

          <h3 id="forms-invalid-inputs">Invalid inputs</h3>
          <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
Mark Otto's avatar
port docs fix from 2.3.0-wip to new css page    
Mark Otto committed
1274 
          <p>This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.</p>
Mark Otto's avatar
Rearrange forms content    
Mark Otto committed
1275
1276
1277 
          <form class="bs-docs-example form-inline">
            <input class="span3" type="email" placeholder="test@example.com" required>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1278
1279
1280 
{% highlight html linenos %}
<input class="span3" type="email" placeholder="test@example.com" required>
{% endhighlight %}
Mark Otto's avatar
Rearrange forms content    
Mark Otto committed
1281
1282
1283
1284
1285
1286 

          <h3 id="forms-disabled-inputs">Disabled inputs</h3>
          <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
          <form class="bs-docs-example form-inline">
            <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1287
1288
1289 
{% highlight html linenos %}
<input id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
{% endhighlight %}
Mark Otto's avatar
Rearrange forms content    
Mark Otto committed
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310 

          <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
          <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
          <form class="bs-docs-example form-inline">
            <fieldset disabled>
              <div>
                <input type="text" class="span4" placeholder="Disabled input">
              </div>
              <div>
                <select class="span4">
                  <option>Disabled select</option>
                </select>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Can't check this
                </label>
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
            </fieldset>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330 
{% highlight html linenos %}
<form class="form-inline">
  <fieldset disabled>
    <div>
      <input type="text" class="span4" placeholder="Disabled input">
    </div>
    <div>
      <select class="span4">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
{% endhighlight %}
Mark Otto's avatar
Rearrange forms content    
Mark Otto committed
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359 

          <h3 id="forms-validation">Validation states</h3>
          <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
          <ul>
            <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
            <li>Add .input-with-feedback to the field(s) in question</li>
          </ul>
          <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p>

          <form class="bs-docs-example form-horizontal">
            <div class="control-group has-warning">
              <label class="control-label" for="inputWarning">Input with warning</label>
              <div class="controls">
                <input type="text" class="input-with-feedback" id="inputWarning">
              </div>
            </div>
            <div class="control-group has-error">
              <label class="control-label" for="inputError">Input with error</label>
              <div class="controls">
                <input type="text" class="input-with-feedback" id="inputError">
              </div>
            </div>
            <div class="control-group has-success">
              <label class="control-label" for="inputSuccess">Input with success</label>
              <div class="controls">
                <input type="text" class="input-with-feedback" id="inputSuccess">
              </div>
            </div>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379 
{% highlight html linenos %}
<div class="control-group has-warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <div class="controls">
    <input type="text" class="input-with-feedback" id="inputWarning">
  </div>
</div>
<div class="control-group has-error">
  <label class="control-label" for="inputError">Input with error</label>
  <div class="controls">
    <input type="text" class="input-with-feedback" id="inputError">
  </div>
</div>
<div class="control-group has-success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <div class="controls">
    <input type="text" class="input-with-feedback" id="inputSuccess">
  </div>
</div>
{% endhighlight %}
Mark Otto's avatar
Rearrange forms content    
Mark Otto committed
1380
1381
1382
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1383
1384
1385 
          <h2 id="forms-extending">Extending form controls</h2>
          <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
Mark Otto's avatar
Refactor input groups    
Mark Otto committed
1386
1387
1388 
          <h3>Input groups</h3>
          <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
          <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1389 
          <form class="bs-docs-example">
Mark Otto's avatar
Refactor input groups    
Mark Otto committed
1390
1391
1392 
            <div class="input-group span9">
              <span class="input-group-addon">@</span>
              <input type="text" placeholder="Username">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1393
1394 
            </div>
            <br>
Mark Otto's avatar
Refactor input groups    
Mark Otto committed
1395
1396
1397
1398
1399
1400
1401
1402
1403 
            <div class="input-group span6">
              <input type="text">
              <span class="input-group-addon">.00</span>
            </div>
            <br>
            <div class="input-group span3">
              <span class="input-group-addon">$</span>
              <input type="text">
              <span class="input-group-addon">.00</span>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1404
1405 
            </div>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1406
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
1418
1419
1420
1421
1422 
{% highlight html linenos %}
<div class="input-group span9">
  <span class="input-group-addon">@</span>
  <input type="text" placeholder="Username">
</div>

<div class="input-group span6">
  <input type="text">
  <span class="input-group-addon">.00</span>
</div>

<div class="input-group span3">
  <span class="input-group-addon">$</span>
  <input type="text">
  <span class="input-group-addon">.00</span>
</div>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1423
Mark Otto's avatar
Simplify input and input group sizing    
Mark Otto committed
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436
1437
1438
1439
1440
1441 
          <h4>Optional sizes</h4>
          <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
          <form class="bs-docs-example">
            <div class="input-group span9">
              <span class="input-group-addon input-large">@</span>
              <input type="text" class="input-large" placeholder="Username">
            </div>
            <br>
            <div class="input-group span9">
              <span class="input-group-addon">@</span>
              <input type="text" placeholder="Username">
            </div>
            <br>
            <div class="input-group span9">
              <span class="input-group-addon input-small">@</span>
              <input type="text" class="input-small" placeholder="Username">
            </div>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1442
1443
1444
1445
1446
1447
1448
1449
1450
1451
1452
1453
1454
1455
1456
1457 
{% highlight html linenos %}
<div class="input-group span9">
  <span class="input-group-addon input-large">@</span>
  <input type="text" class="input-large" placeholder="Username">
</div>

<div class="input-group span9">
  <span class="input-group-addon">@</span>
  <input type="text" placeholder="Username">
</div>

<div class="input-group span9">
  <span class="input-group-addon input-small">@</span>
  <input type="text" class="input-small" placeholder="Username">
</div>
{% endhighlight %}
Mark Otto's avatar
Simplify input and input group sizing    
Mark Otto committed
1458
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1459 
          <h4>Buttons instead of text</h4>
Mark Otto's avatar
Refactor input groups    
Mark Otto committed
1460 
          <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1461 
          <form class="bs-docs-example">
Mark Otto's avatar
Refactor input groups    
Mark Otto committed
1462
1463
1464
1465
1466 
            <div class="input-group span7">
              <span class="input-group-btn">
                <button class="btn" type="button">Go!</button>
              </span>
              <input type="text">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1467 
            </div>
Mark Otto's avatar
Refactor input groups    
Mark Otto committed
1468
1469
1470
1471
1472
1473 
            <br>
            <div class="input-group span7">
              <input type="text">
              <span class="input-group-btn">
                <button class="btn" type="button">Go!</button>
              </span>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1474
1475 
            </div>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1476
1477
1478
1479
1480
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490 
{% highlight html linenos %}
<div class="input-group span7">
  <span class="input-group-btn">
    <button class="btn" type="button">Go!</button>
  </span>
  <input type="text">
</div>

<div class="input-group span7">
  <input type="text">
  <span class="input-group-btn">
    <button class="btn" type="button">Go!</button>
  </span>
</div>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1491
1492
1493
1494 

          <h4>Button dropdowns</h4>
          <p></p>
          <form class="bs-docs-example">
Mark Otto's avatar
Refactor input groups    
Mark Otto committed
1495
1496 
            <div class="input-group span7">
              <div class="input-group-btn btn-group">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1497
1498
1499
1500
1501
1502
1503
1504
1505 
                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
Mark Otto's avatar
Refactor input groups    
Mark Otto committed
1506
1507
1508
1509
1510
1511 
              <input type="text">
            </div><!-- /input-group -->
            <br>
            <div class="input-group span7">
              <input type="text">
              <div class="input-group-btn btn-group">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1512
1513
1514
1515
1516
1517
1518
1519
1520 
                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
Mark Otto's avatar
Refactor input groups    
Mark Otto committed
1521 
            </div><!-- /input-group -->
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1522 
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1523
1524
1525
1526
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536
1537
1538
1539
1540
1541
1542
1543
1544
1545
1546
1547
1548
1549
1550
1551 
{% highlight html linenos %}
<div class="input-group span7">
  <div class="input-group-btn btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
  <input type="text">
</div><!-- /input-group -->

<div class="input-group span7">
  <input type="text">
  <div class="input-group-btn btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
</div><!-- /input-group -->
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1552
1553
1554 

          <h4>Segmented dropdown groups</h4>
          <form class="bs-docs-example">
Mark Otto's avatar
Refactor input groups    
Mark Otto committed
1555
1556 
            <div class="input-group span7">
              <div class="input-group-btn btn-group">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1557
1558
1559
1560
1561
1562
1563
1564
1565
1566
1567
1568 
                <button class="btn" tabindex="-1">Action</button>
                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1569 
              <input type="text">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1570 
            </div>
Mark Otto's avatar
Refactor input groups    
Mark Otto committed
1571
Mark Otto's avatar
Remove support for multiple buttons in input groups because fuck that shit.    
Mark Otto committed
1572
1573 
            <br>
Mark Otto's avatar
Refactor input groups    
Mark Otto committed
1574
1575
1576 
            <div class="input-group span7">
              <input type="text">
              <div class="input-group-btn btn-group">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1577
1578
1579
1580
1581
1582
1583
1584
1585
1586
1587
1588
1589
1590 
                <button class="btn" tabindex="-1">Action</button>
                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div>
            </div>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1591
1592
1593
1594
1595
1596
1597
1598
1599
1600
1601
1602
1603
1604
1605 
{% highlight html linenos %}
<div class="input-group span7">
  <div class="input-group-btn btn-group">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text">
</div>

<div class="input-group span7">
  <input type="text">
  <div class="input-group-btn btn-group">
    <!-- Button and dropdown menu -->
  </div>
</div>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1606
1607
1608
1609
1610
1611
1612
1613
1614 

          <h3 id="forms-extending-sizes">Control sizing</h3>
          <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>

          <h4>Relative sizing</h4>
          <p>Create larger or smaller form controls that match button sizes.</p>
          <form class="bs-docs-example" style="padding-bottom: 15px;">
            <div class="controls docs-input-sizes">
              <input class="input-large" type="text" placeholder=".input-large">
Mark Otto's avatar
Simplify input and input group sizing    
Mark Otto committed
1615 
              <input type="text" placeholder="Default input">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1616
1617
1618 
              <input class="input-small" type="text" placeholder=".input-small">
            </div>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1619
1620
1621
1622
1623 
{% highlight html linenos %}
<input class="input-large" type="text" placeholder=".input-large">
<input type="text" placeholder="Default input">
<input class="input-small" type="text" placeholder=".input-small">
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1624
1625
1626
1627
1628
1629
1630
1631
1632
1633
1634
1635
1636
1637
1638
1639
1640
1641
1642
1643
1644
1645
1646
1647
1648
1649
1650
1651
1652
1653
1654 

          <h4>Column sizing</h4>
          <p>Use <code>.span1</code> to <code>.span12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
          <form class="bs-docs-example" style="padding-bottom: 15px;">
            <div class="controls docs-input-sizes">
              <input class="span1" type="text" placeholder=".span1">
              <input class="span2" type="text" placeholder=".span2">
              <input class="span3" type="text" placeholder=".span3">
              <select class="span1">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
              <select class="span2">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
              <select class="span3">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1655
1656
1657
1658
1659 
{% highlight html linenos %}
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1660 
  ...
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1661
1662 
</select>
<select class="span2">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1663 
  ...
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1664
1665 
</select>
<select class="span3">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1666 
  ...
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1667
1668
1669 
</select>
{% endhighlight %}
Mark Otto's avatar
Add grid column example to form input sizing    
Mark Otto committed
1670
1671
1672
1673
1674
1675
1676
1677
1678
1679
1680
1681
1682
1683 
          <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
          <form class="bs-docs-example" style="padding-bottom: 15px;">
            <div class="row">
              <div class="span4">
                <input type="text" placeholder=".span4">
              </div>
              <div class="span4">
                <input type="text" placeholder=".span4">
              </div>
              <div class="span4">
                <input type="text" placeholder=".span4">
              </div>
            </div>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1684
1685
1686
1687
1688
1689
1690
1691
1692
1693
1694
1695
1696 
{% highlight html linenos %}
<div class="row">
  <div class="span4">
    <input type="text" placeholder=".span4">
  </div>
  <div class="span4">
    <input type="text" placeholder=".span4">
  </div>
  <div class="span4">
    <input type="text" placeholder=".span4">
  </div>
</div>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1697
1698
1699
1700
1701
1702 

          <h3>Uneditable inputs</h3>
          <p>Present data in a form that's not editable without using actual form markup.</p>
          <form class="bs-docs-example">
            <span class="input-xlarge uneditable-input">Some value here</span>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1703
1704
1705 
{% highlight html linenos %}
<span class="uneditable-input">Some value here</span>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1706
1707
1708
1709
1710
1711
1712
1713
1714 

          <h3>Form actions</h3>
          <p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
          <form class="bs-docs-example">
            <div class="form-actions">
              <button type="submit" class="btn btn-primary">Save changes</button>
              <button type="button" class="btn">Cancel</button>
            </div>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1715
1716
1717
1718
1719
1720 
{% highlight html linenos %}
<div class="form-actions">
  <button type="submit" class="btn btn-primary">Save changes</button>
  <button type="button" class="btn">Cancel</button>
</div>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1721
1722
1723
1724
1725
1726
1727 

          <h3>Help text</h3>
          <p>Inline and block level support for help text that appears around form controls.</p>
          <h4>Inline help</h4>
          <form class="bs-docs-example form-inline">
            <input type="text"> <span class="help-inline">Inline help text</span>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1728
1729
1730
1731 
{% highlight html linenos %}
<input type="text">
<span class="help-inline">Inline help text</span>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1732
1733
1734
1735
1736
1737 

          <h4>Block help</h4>
          <form class="bs-docs-example form-inline">
            <input type="text">
            <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1738
1739
1740
1741 
{% highlight html linenos %}
<input type="text">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1742
1743
1744
1745
1746
1747
1748
1749
1750
1751
1752
1753
1754
1755
1756
1757
1758
1759
1760
1761
1762
1763
1764
1765 

        </section>



        <!-- Buttons
        ================================================== -->
        <section id="buttons">
          <div class="page-header">
            <h1>Buttons</h1>
          </div>

          <h2>Default buttons</h2>
          <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering.</p>
          <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>Button</th>
                <th>class=""</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
Mark Otto's avatar
overhaul buttons    
Mark Otto committed
1766 
                <td><button type="button" class="btn btn-default">Default</button></td>
Mark Otto's avatar
remove commented out buttons css, update docs    
Mark Otto committed
1767 
                <td><code>btn</code></td>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1768
1769
1770
1771
1772
1773
1774
1775
1776
1777
1778
1779 
                <td>Standard gray button with gradient</td>
              </tr>
              <tr>
                <td><button type="button" class="btn btn-primary">Primary</button></td>
                <td><code>btn btn-primary</code></td>
                <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
              </tr>
              <tr>
                <td><button type="button" class="btn btn-success">Success</button></td>
                <td><code>btn btn-success</code></td>
                <td>Indicates a successful or positive action</td>
              </tr>
Mark Otto's avatar
Restore .btn-info    
Mark Otto committed
1780
1781
1782
1783
1784 
              <tr>
                <td><button type="button" class="btn btn-info">Info</button></td>
                <td><code>btn btn-info</code></td>
                <td>Contextual button for informational alert messages</td>
              </tr>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1785
1786
1787
1788
1789
1790
1791
1792
1793
1794
1795
1796
1797
1798
1799
1800
1801
1802
1803
1804
1805
1806
1807
1808
1809
1810
1811
1812
1813
1814
1815
1816
1817
1818
1819
1820
1821
1822
1823
1824
1825
1826 
              <tr>
                <td><button type="button" class="btn btn-warning">Warning</button></td>
                <td><code>btn btn-warning</code></td>
                <td>Indicates caution should be taken with this action</td>
              </tr>
              <tr>
                <td><button type="button" class="btn btn-danger">Danger</button></td>
                <td><code>btn btn-danger</code></td>
                <td>Indicates a dangerous or potentially negative action</td>
              </tr>
              <tr>
                <td><button type="button" class="btn btn-link">Link</button></td>
                <td><code>btn btn-link</code></td>
                <td>Deemphasize a button by making it look like a link while maintaining button behavior</td>
              </tr>
            </tbody>
          </table>

          <h4>Cross browser compatibility</h4>
          <p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>


          <h2>Button sizes</h2>
          <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
          <div class="bs-docs-example">
            <p>
              <button type="button" class="btn btn-large btn-primary">Large button</button>
              <button type="button" class="btn btn-large">Large button</button>
            </p>
            <p>
              <button type="button" class="btn btn-primary">Default button</button>
              <button type="button" class="btn">Default button</button>
            </p>
            <p>
              <button type="button" class="btn btn-small btn-primary">Small button</button>
              <button type="button" class="btn btn-small">Small button</button>
            </p>
            <p>
              <button type="button" class="btn btn-mini btn-primary">Mini button</button>
              <button type="button" class="btn btn-mini">Mini button</button>
            </p>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1827
1828
1829
1830
1831
1832
1833
1834
1835
1836
1837
1838
1839
1840
1841
1842
1843
1844
1845 
{% highlight html linenos %}
<p>
  <button type="button" class="btn btn-large btn-primary">Large button</button>
  <button type="button" class="btn btn-large">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-small btn-primary">Small button</button>
  <button type="button" class="btn btn-small">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-mini btn-primary">Mini button</button>
  <button type="button" class="btn btn-mini">Mini button</button>
</p>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1846
1847
1848
1849
1850
1851
1852 
          <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
          <div class="bs-docs-example">
            <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
              <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
              <button type="button" class="btn btn-large btn-block">Block level button</button>
            </div>
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1853
1854
1855
1856 
{% highlight html linenos %}
<button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
<button type="button" class="btn btn-large btn-block">Block level button</button>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1857
1858
1859
1860
1861 


          <h2>Disabled state</h2>
          <p>Make buttons look unclickable by fading them back 50%.</p>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1862
1863
1864
1865
1866
1867
1868
1869
1870
1871
1872 
          <h3>Button element</h3>
          <p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
          <p class="bs-docs-example">
            <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
            <button type="button" class="btn btn-large" disabled="disabled">Button</button>
          </p>
{% highlight html linenos %}
<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled="disabled">Button</button>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1873
1874
1875
1876
1877
1878 
          <h3>Anchor element</h3>
          <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
          <p class="bs-docs-example">
            <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
            <a href="#" class="btn btn-large disabled">Link</a>
          </p>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1879
1880
1881
1882 
{% highlight html linenos %}
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1883
1884
1885
1886
1887
1888
1889
1890
1891
1892
1893
1894
1895 
          <p>
            We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
          </p>


          <h2>One class, multiple tags</h2>
          <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
          <form class="bs-docs-example">
            <a class="btn" href="">Link</a>
            <button class="btn" type="submit">Button</button>
            <input class="btn" type="button" value="Input">
            <input class="btn" type="submit" value="Submit">
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1896
1897
1898
1899
1900
1901
1902 
{% highlight html linenos %}
<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">
{% endhighlight %}
          <p>As a best practice, <strong>we highly recommend matching using the <code>&lt;button&lt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1903
1904
1905
1906
1907
1908
1909
1910
1911
1912
1913
1914 

        </section>



        <!-- Images
        ================================================== -->
        <section id="images">
          <div class="page-header">
            <h1>Images</h1>
          </div>
Mark Otto's avatar
Drop labels from the docs    
Mark Otto committed
1915 
          <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1916 
          <div class="bs-docs-example bs-docs-example-images">
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1917
1918
1919 
            <img data-src="holder.js/140x140" class="img-rounded">
            <img data-src="holder.js/140x140" class="img-circle">
            <img data-src="holder.js/140x140" class="img-thumbnail">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1920 
          </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
1921
1922
1923
1924
1925 
{% highlight html linenos %}
<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-thumbnail">
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
1926
1927
1928
1929
1930
1931
1932
1933
1934
1935
1936
1937
1938
1939
1940
1941 

        </section>



        <!-- Icons
        ================================================== -->
        <section id="icons">
          <div class="page-header">
            <h1>Icons font <small>by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
          </div>

          <h2>Included glyphs</h2>
          <p>Bootstrap comes with all 160 of <a href="http://glyphicons.com" target="_blank">Glyphicons</a> Halflings set, all available in font formats for easy coloring, sizing, and placement.</p>

          <ul class="the-icons clearfix">
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
1942
1943
1944
1945
1946
1947
1948
1949
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
2062
2063
2064
2065
2066
2067
2068
2069
2070
2071
2072
2073
2074
2075
2076
2077
2078
2079
2080
2081
2082
2083
2084
2085
2086
2087
2088
2089
2090
2091
2092
2093
2094
2095
2096
2097
2098
2099
2100
2101
2102
2103
2104
2105
2106 
            <li><i class="glyphicon glyphicon-glass"></i> glyphicon-glass</li>
            <li><i class="glyphicon glyphicon-music"></i> glyphicon-music</li>
            <li><i class="glyphicon glyphicon-search"></i> glyphicon-search</li>
            <li><i class="glyphicon glyphicon-envelope"></i> glyphicon-envelope</li>
            <li><i class="glyphicon glyphicon-heart"></i> glyphicon-heart</li>
            <li><i class="glyphicon glyphicon-star"></i> glyphicon-star</li>
            <li><i class="glyphicon glyphicon-star-empty"></i> glyphicon-star-empty</li>
            <li><i class="glyphicon glyphicon-user"></i> glyphicon-user</li>
            <li><i class="glyphicon glyphicon-film"></i> glyphicon-film</li>
            <li><i class="glyphicon glyphicon-th-large"></i> glyphicon-th-large</li>
            <li><i class="glyphicon glyphicon-th"></i> glyphicon-th</li>
            <li><i class="glyphicon glyphicon-th-list"></i> glyphicon-th-list</li>
            <li><i class="glyphicon glyphicon-ok"></i> glyphicon-ok</li>
            <li><i class="glyphicon glyphicon-remove"></i> glyphicon-remove</li>
            <li><i class="glyphicon glyphicon-zoom-in"></i> glyphicon-zoom-in</li>
            <li><i class="glyphicon glyphicon-zoom-out"></i> glyphicon-zoom-out</li>
            <li><i class="glyphicon glyphicon-off"></i> glyphicon-off</li>
            <li><i class="glyphicon glyphicon-signal"></i> glyphicon-signal</li>
            <li><i class="glyphicon glyphicon-cog"></i> glyphicon-cog</li>
            <li><i class="glyphicon glyphicon-trash"></i> glyphicon-trash</li>
            <li><i class="glyphicon glyphicon-home"></i> glyphicon-home</li>
            <li><i class="glyphicon glyphicon-file"></i> glyphicon-file</li>
            <li><i class="glyphicon glyphicon-time"></i> glyphicon-time</li>
            <li><i class="glyphicon glyphicon-road"></i> glyphicon-road</li>
            <li><i class="glyphicon glyphicon-download-alt"></i> glyphicon-download-alt</li>
            <li><i class="glyphicon glyphicon-download"></i> glyphicon-download</li>
            <li><i class="glyphicon glyphicon-upload"></i> glyphicon-upload</li>
            <li><i class="glyphicon glyphicon-inbox"></i> glyphicon-inbox</li>

            <li><i class="glyphicon glyphicon-play-circle"></i> glyphicon-play-circle</li>
            <li><i class="glyphicon glyphicon-repeat"></i> glyphicon-repeat</li>
            <li><i class="glyphicon glyphicon-refresh"></i> glyphicon-refresh</li>
            <li><i class="glyphicon glyphicon-list-alt"></i> glyphicon-list-alt</li>
            <li><i class="glyphicon glyphicon-lock"></i> glyphicon-lock</li>
            <li><i class="glyphicon glyphicon-flag"></i> glyphicon-flag</li>
            <li><i class="glyphicon glyphicon-headphones"></i> glyphicon-headphones</li>
            <li><i class="glyphicon glyphicon-volume-off"></i> glyphicon-volume-off</li>
            <li><i class="glyphicon glyphicon-volume-down"></i> glyphicon-volume-down</li>
            <li><i class="glyphicon glyphicon-volume-up"></i> glyphicon-volume-up</li>
            <li><i class="glyphicon glyphicon-qrcode"></i> glyphicon-qrcode</li>
            <li><i class="glyphicon glyphicon-barcode"></i> glyphicon-barcode</li>
            <li><i class="glyphicon glyphicon-tag"></i> glyphicon-tag</li>
            <li><i class="glyphicon glyphicon-tags"></i> glyphicon-tags</li>
            <li><i class="glyphicon glyphicon-book"></i> glyphicon-book</li>
            <li><i class="glyphicon glyphicon-bookmark"></i> glyphicon-bookmark</li>
            <li><i class="glyphicon glyphicon-print"></i> glyphicon-print</li>
            <li><i class="glyphicon glyphicon-camera"></i> glyphicon-camera</li>
            <li><i class="glyphicon glyphicon-font"></i> glyphicon-font</li>
            <li><i class="glyphicon glyphicon-bold"></i> glyphicon-bold</li>
            <li><i class="glyphicon glyphicon-italic"></i> glyphicon-italic</li>
            <li><i class="glyphicon glyphicon-text-height"></i> glyphicon-text-height</li>
            <li><i class="glyphicon glyphicon-text-width"></i> glyphicon-text-width</li>
            <li><i class="glyphicon glyphicon-align-left"></i> glyphicon-align-left</li>
            <li><i class="glyphicon glyphicon-align-center"></i> glyphicon-align-center</li>
            <li><i class="glyphicon glyphicon-align-right"></i> glyphicon-align-right</li>
            <li><i class="glyphicon glyphicon-align-justify"></i> glyphicon-align-justify</li>
            <li><i class="glyphicon glyphicon-list"></i> glyphicon-list</li>

            <li><i class="glyphicon glyphicon-indent-left"></i> glyphicon-indent-left</li>
            <li><i class="glyphicon glyphicon-indent-right"></i> glyphicon-indent-right</li>
            <li><i class="glyphicon glyphicon-facetime-video"></i> glyphicon-facetime-video</li>
            <li><i class="glyphicon glyphicon-picture"></i> glyphicon-picture</li>
            <li><i class="glyphicon glyphicon-pencil"></i> glyphicon-pencil</li>
            <li><i class="glyphicon glyphicon-map-marker"></i> glyphicon-map-marker</li>
            <li><i class="glyphicon glyphicon-adjust"></i> glyphicon-adjust</li>
            <li><i class="glyphicon glyphicon-tint"></i> glyphicon-tint</li>
            <li><i class="glyphicon glyphicon-edit"></i> glyphicon-edit</li>
            <li><i class="glyphicon glyphicon-share"></i> glyphicon-share</li>
            <li><i class="glyphicon glyphicon-check"></i> glyphicon-check</li>
            <li><i class="glyphicon glyphicon-move"></i> glyphicon-move</li>
            <li><i class="glyphicon glyphicon-step-backward"></i> glyphicon-step-backward</li>
            <li><i class="glyphicon glyphicon-fast-backward"></i> glyphicon-fast-backward</li>
            <li><i class="glyphicon glyphicon-backward"></i> glyphicon-backward</li>
            <li><i class="glyphicon glyphicon-play"></i> glyphicon-play</li>
            <li><i class="glyphicon glyphicon-pause"></i> glyphicon-pause</li>
            <li><i class="glyphicon glyphicon-stop"></i> glyphicon-stop</li>
            <li><i class="glyphicon glyphicon-forward"></i> glyphicon-forward</li>
            <li><i class="glyphicon glyphicon-fast-forward"></i> glyphicon-fast-forward</li>
            <li><i class="glyphicon glyphicon-step-forward"></i> glyphicon-step-forward</li>
            <li><i class="glyphicon glyphicon-eject"></i> glyphicon-eject</li>
            <li><i class="glyphicon glyphicon-chevron-left"></i> glyphicon-chevron-left</li>
            <li><i class="glyphicon glyphicon-chevron-right"></i> glyphicon-chevron-right</li>
            <li><i class="glyphicon glyphicon-plus-sign"></i> glyphicon-plus-sign</li>
            <li><i class="glyphicon glyphicon-minus-sign"></i> glyphicon-minus-sign</li>
            <li><i class="glyphicon glyphicon-remove-sign"></i> glyphicon-remove-sign</li>
            <li><i class="glyphicon glyphicon-ok-sign"></i> glyphicon-ok-sign</li>

            <li><i class="glyphicon glyphicon-question-sign"></i> glyphicon-question-sign</li>
            <li><i class="glyphicon glyphicon-info-sign"></i> glyphicon-info-sign</li>
            <li><i class="glyphicon glyphicon-screenshot"></i> glyphicon-screenshot</li>
            <li><i class="glyphicon glyphicon-remove-circle"></i> glyphicon-remove-circle</li>
            <li><i class="glyphicon glyphicon-ok-circle"></i> glyphicon-ok-circle</li>
            <li><i class="glyphicon glyphicon-ban-circle"></i> glyphicon-ban-circle</li>
            <li><i class="glyphicon glyphicon-arrow-left"></i> glyphicon-arrow-left</li>
            <li><i class="glyphicon glyphicon-arrow-right"></i> glyphicon-arrow-right</li>
            <li><i class="glyphicon glyphicon-arrow-up"></i> glyphicon-arrow-up</li>
            <li><i class="glyphicon glyphicon-arrow-down"></i> glyphicon-arrow-down</li>
            <li><i class="glyphicon glyphicon-share-alt"></i> glyphicon-share-alt</li>
            <li><i class="glyphicon glyphicon-resize-full"></i> glyphicon-resize-full</li>
            <li><i class="glyphicon glyphicon-resize-small"></i> glyphicon-resize-small</li>
            <li><i class="glyphicon glyphicon-plus"></i> glyphicon-plus</li>
            <li><i class="glyphicon glyphicon-minus"></i> glyphicon-minus</li>
            <li><i class="glyphicon glyphicon-asterisk"></i> glyphicon-asterisk</li>
            <li><i class="glyphicon glyphicon-exclamation-sign"></i> glyphicon-exclamation-sign</li>
            <li><i class="glyphicon glyphicon-gift"></i> glyphicon-gift</li>
            <li><i class="glyphicon glyphicon-leaf"></i> glyphicon-leaf</li>
            <li><i class="glyphicon glyphicon-fire"></i> glyphicon-fire</li>
            <li><i class="glyphicon glyphicon-eye-open"></i> glyphicon-eye-open</li>
            <li><i class="glyphicon glyphicon-eye-close"></i> glyphicon-eye-close</li>
            <li><i class="glyphicon glyphicon-warning-sign"></i> glyphicon-warning-sign</li>
            <li><i class="glyphicon glyphicon-plane"></i> glyphicon-plane</li>
            <li><i class="glyphicon glyphicon-calendar"></i> glyphicon-calendar</li>
            <li><i class="glyphicon glyphicon-random"></i> glyphicon-random</li>
            <li><i class="glyphicon glyphicon-comment"></i> glyphicon-comment</li>
            <li><i class="glyphicon glyphicon-magnet"></i> glyphicon-magnet</li>

            <li><i class="glyphicon glyphicon-chevron-up"></i> glyphicon-chevron-up</li>
            <li><i class="glyphicon glyphicon-chevron-down"></i> glyphicon-chevron-down</li>
            <li><i class="glyphicon glyphicon-retweet"></i> glyphicon-retweet</li>
            <li><i class="glyphicon glyphicon-shopping-cart"></i> glyphicon-shopping-cart</li>
            <li><i class="glyphicon glyphicon-folder-close"></i> glyphicon-folder-close</li>
            <li><i class="glyphicon glyphicon-folder-open"></i> glyphicon-folder-open</li>
            <li><i class="glyphicon glyphicon-resize-vertical"></i> glyphicon-resize-vertical</li>
            <li><i class="glyphicon glyphicon-resize-horizontal"></i> glyphicon-resize-horizontal</li>
            <li><i class="glyphicon glyphicon-hdd"></i> glyphicon-hdd</li>
            <li><i class="glyphicon glyphicon-bullhorn"></i> glyphicon-bullhorn</li>
            <li><i class="glyphicon glyphicon-bell"></i> glyphicon-bell</li>
            <li><i class="glyphicon glyphicon-certificate"></i> glyphicon-certificate</li>
            <li><i class="glyphicon glyphicon-thumbs-up"></i> glyphicon-thumbs-up</li>
            <li><i class="glyphicon glyphicon-thumbs-down"></i> glyphicon-thumbs-down</li>
            <li><i class="glyphicon glyphicon-hand-right"></i> glyphicon-hand-right</li>
            <li><i class="glyphicon glyphicon-hand-left"></i> glyphicon-hand-left</li>
            <li><i class="glyphicon glyphicon-hand-up"></i> glyphicon-hand-up</li>
            <li><i class="glyphicon glyphicon-hand-down"></i> glyphicon-hand-down</li>
            <li><i class="glyphicon glyphicon-circle-arrow-right"></i> glyphicon-circle-arrow-right</li>
            <li><i class="glyphicon glyphicon-circle-arrow-left"></i> glyphicon-circle-arrow-left</li>
            <li><i class="glyphicon glyphicon-circle-arrow-up"></i> glyphicon-circle-arrow-up</li>
            <li><i class="glyphicon glyphicon-circle-arrow-down"></i> glyphicon-circle-arrow-down</li>
            <li><i class="glyphicon glyphicon-globe"></i> glyphicon-globe</li>
            <li><i class="glyphicon glyphicon-wrench"></i> glyphicon-wrench</li>
            <li><i class="glyphicon glyphicon-tasks"></i> glyphicon-tasks</li>
            <li><i class="glyphicon glyphicon-filter"></i> glyphicon-filter</li>
            <li><i class="glyphicon glyphicon-briefcase"></i> glyphicon-briefcase</li>
            <li><i class="glyphicon glyphicon-fullscreen"></i> glyphicon-fullscreen</li>

            <li><i class="glyphicon glyphicon-dashboard"></i> glyphicon-dashboard</li>
            <li><i class="glyphicon glyphicon-paperclip"></i> glyphicon-paperclip</li>
            <li><i class="glyphicon glyphicon-heart-empty"></i> glyphicon-heart-empty</li>
            <li><i class="glyphicon glyphicon-link"></i> glyphicon-link</li>
            <li><i class="glyphicon glyphicon-phone"></i> glyphicon-phone</li>
            <li><i class="glyphicon glyphicon-pushpin"></i> glyphicon-pushpin</li>
            <li><i class="glyphicon glyphicon-euro"></i> glyphicon-euro</li>
            <li><i class="glyphicon glyphicon-usd"></i> glyphicon-usd</li>
            <li><i class="glyphicon glyphicon-gbp"></i> glyphicon-gbp</li>
            <li><i class="glyphicon glyphicon-sort"></i> glyphicon-sort</li>
            <li><i class="glyphicon glyphicon-sort-by-alphabet"></i> glyphicon-sort-by-alphabet</li>
            <li><i class="glyphicon glyphicon-sort-by-alphabet-alt"></i> glyphicon-sort-by-alphabet-alt</li>
            <li><i class="glyphicon glyphicon-sort-by-order"></i> glyphicon-sort-by-order</li>
            <li><i class="glyphicon glyphicon-sort-by-order-alt"></i> glyphicon-sort-by-order-alt</li>
            <li><i class="glyphicon glyphicon-sort-by-attributes"></i> glyphicon-sort-by-attributes</li>
            <li><i class="glyphicon glyphicon-sort-by-attributes-alt"></i> glyphicon-sort-by-attributes-alt</li>
            <li><i class="glyphicon glyphicon-unchecked"></i> glyphicon-unchecked</li>
            <li><i class="glyphicon glyphicon-expand"></i> glyphicon-expand</li>
            <li><i class="glyphicon glyphicon-collapse"></i> glyphicon-collapse</li>
            <li><i class="glyphicon glyphicon-collapse-top"></i> glyphicon-collapse-top</li>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2107
2108
2109
2110
2111
2112
2113
2114
2115 

          </ul>

          <h3>Glyphicons attribution</h3>
          <p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>


          <h2>How to use</h2>
          <p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2116 
{% highlight html linenos %}
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2117 
<span class="glyphicon glyphicon-search"></span>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2118 
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2119 
          <p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
Mark Otto's avatar
Drop labels from the docs    
Mark Otto committed
2120 
          <p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2121
2122
2123
2124
2125
2126
2127
2128
2129
2130
2131 


          <h2>Icon examples</h2>
          <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>

          <h4>Buttons</h4>

          <h5>Button group in a button toolbar</h5>
          <div class="bs-docs-example">
            <div class="btn-toolbar">
              <div class="btn-group">
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2132
2133
2134
2135 
                <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
                <a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
                <a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
                <a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2136
2137 
              </div>
            </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2138
2139
2140
2141 
          </div><!-- /bs-docs-example -->
{% highlight html linenos %}
<div class="btn-toolbar">
  <div class="btn-group">
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2142
2143
2144
2145 
    <a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
    <a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
    <a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
    <a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2146
2147
2148 
  </div>
</div>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2149
2150
2151
2152 

          <h5>Dropdown in a button group</h5>
          <div class="bs-docs-example">
            <div class="btn-group">
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2153 
              <a class="btn btn-primary" href="#"><i class="glyphicon glyphicon-user"></i> User</a>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2154
2155 
              <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
              <ul class="dropdown-menu">
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2156
2157
2158 
                <li><a href="#"><i class="glyphicon glyphicon-pencil"></i> Edit</a></li>
                <li><a href="#"><i class="glyphicon glyphicon-trash"></i> Delete</a></li>
                <li><a href="#"><i class="glyphicon glyphicon-ban-circle"></i> Ban</a></li>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2159 
                <li class="divider"></li>
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2160 
                <li><a href="#"><i class="glyphicon glyphicon-"></i> Make admin</a></li>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2161
2162 
              </ul>
            </div>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2163
2164
2165 
          </div><!-- /bs-docs-example -->
{% highlight html linenos %}
<div class="btn-group">
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2166 
  <a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2167
2168 
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2169
2170
2171 
    <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-ban-circle"></span> Ban</a></li>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2172 
    <li class="divider"></li>
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2173 
    <li><a href="#"><span class="glyphicon glyphicon-"></span> Make admin</a></li>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2174
2175
2176 
  </ul>
</div>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2177
2178
2179 

          <h5>Large button</h5>
          <div class="bs-docs-example">
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2180 
            <a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2181
2182 
          </div><!-- /bs-docs-example -->
{% highlight html linenos %}
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2183 
<a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2184 
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2185
2186
2187 

          <h5>Small button</h5>
          <div class="bs-docs-example">
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2188 
            <a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2189
2190 
          </div><!-- /bs-docs-example -->
{% highlight html linenos %}
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2191 
<a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2192 
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2193
2194
2195
2196 


          <h4>Navigation</h4>
          <div class="bs-docs-example">
Mark Otto's avatar
streamline css docs    
Mark Otto committed
2197 
            <ul class="nav nav-list">
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2198
2199
2200
2201 
              <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
Mark Otto's avatar
streamline css docs    
Mark Otto committed
2202 
            </ul>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2203
2204
2205 
          </div><!-- /bs-docs-example -->
{% highlight html linenos %}
<ul class="nav nav-list">
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2206
2207
2208
2209 
  <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2210
2211 
</ul>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2212
2213
2214
2215
2216
2217 

          <h4>Form fields</h4>
          <form class="bs-docs-example form-horizontal">
            <div class="control-group">
              <label class="control-label" for="inputIcon">Email address</label>
              <div class="controls">
Mark Otto's avatar
streamline css docs    
Mark Otto committed
2218 
                <div class="input-group">
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2219 
                  <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
Mark Otto's avatar
streamline css docs    
Mark Otto committed
2220 
                  <input class="span2" id="inputIcon" type="text">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2221
2222
2223
2224 
                </div>
              </div>
            </div>
          </form>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2225
2226
2227
2228
2229 
{% highlight html linenos %}
<div class="control-group">
  <label class="control-label" for="inputIcon">Email address</label>
  <div class="controls">
    <div class="input-group">
Mark Otto's avatar
All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star    
Mark Otto committed
2230 
      <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2231
2232
2233
2234
2235 
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>
{% endhighlight %}
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2236
2237
2238
2239
2240
2241
2242 

        </section>



        <!-- Responsive design
        ================================================== -->
Mark Otto's avatar
clean up responsive docs and global css styles    
Mark Otto committed
2243 
        <section id="responsive-utilities">
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2244 
          <div class="page-header">
Mark Otto's avatar
clean up responsive docs and global css styles    
Mark Otto committed
2245 
            <h1>Responsive utilities</h1>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2246 
          </div>
Mark Otto's avatar
clean up responsive docs and global css styles    
Mark Otto committed
2247 
          <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.</p>
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2248
2249
2250
2251
2252
2253
2254
2255
2256
2257
2258
2259
2260
2261
2262
2263
2264
2265
2266
2267
2268
2269
2270
2271
2272
2273
2274
2275
2276
2277
2278
2279
2280
2281
2282
2283
2284
2285
2286
2287
2288
2289
2290
2291
2292
2293
2294
2295
2296
2297
2298
2299
2300
2301
2302
2303
2304
2305
2306
2307
2308
2309
2310
2311
2312
2313
2314
2315
2316
2317
2318
2319
2320
2321 

          <table class="table table-bordered table-striped responsive-utilities">
            <thead>
              <tr>
                <th>Class</th>
                <th>Phones <small>767px and below</small></th>
                <th>Tablets <small>979px to 768px</small></th>
                <th>Desktops <small>Default</small></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th><code>.visible-phone</code></th>
                <td class="is-visible">Visible</td>
                <td class="is-hidden">Hidden</td>
                <td class="is-hidden">Hidden</td>
              </tr>
              <tr>
                <th><code>.visible-tablet</code></th>
                <td class="is-hidden">Hidden</td>
                <td class="is-visible">Visible</td>
                <td class="is-hidden">Hidden</td>
              </tr>
              <tr>
                <th><code>.visible-desktop</code></th>
                <td class="is-hidden">Hidden</td>
                <td class="is-hidden">Hidden</td>
                <td class="is-visible">Visible</td>
              </tr>
              <tr>
                <th><code>.hidden-phone</code></th>
                <td class="is-hidden">Hidden</td>
                <td class="is-visible">Visible</td>
                <td class="is-visible">Visible</td>
              </tr>
              <tr>
                <th><code>.hidden-tablet</code></th>
                <td class="is-visible">Visible</td>
                <td class="is-hidden">Hidden</td>
                <td class="is-visible">Visible</td>
              </tr>
              <tr>
                <th><code>.hidden-desktop</code></th>
                <td class="is-visible">Visible</td>
                <td class="is-visible">Visible</td>
                <td class="is-hidden">Hidden</td>
              </tr>
            </tbody>
          </table>

          <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 should not be used with tables, and as such are not supported.</p>

          <h3>Responsive utilities test case</h3>
          <p>Resize your browser or load on different devices to test the above classes.</p>
          <h4>Visible on...</h4>
          <p>Green checkmarks indicate that class is visible in your current viewport.</p>
          <ul class="responsive-utilities-test">
            <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
            <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
            <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
          </ul>
          <h4>Hidden on...</h4>
          <p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
          <ul class="responsive-utilities-test hidden-on">
            <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
            <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
            <li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
          </ul>

        </section>
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2322
2323 
      </div><!-- /span9 -->
    </div><!-- row -->
Mark Otto's avatar
remove deleted css files, run make  
Mark Otto committed
2324
Mark Otto's avatar
restore jekyll-based css.html to docs    
Mark Otto committed
2325 
  </div><!-- /.container -->