Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
base-css.html 80.9 KB
Newer Older
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
1
2
3
4 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
Mark Otto's avatar
change title attr to re-include twitter    
Mark Otto committed
5 
    <title>Base · Twitter Bootstrap</title>
Raul Riera's avatar
Removed trailing backslash :)    
Raul Riera committed
6 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
7
8
9
10 
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
Jacob Thornton's avatar
move doc building into base make method + build bootstrap to doc assets    
Jacob Thornton committed
11
12 
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
13
14
15 
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
Mark Otto's avatar
move shim after css    
Mark Otto committed
16
17
18
19
20 
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
21 
    <!-- Le fav and touch icons -->
Mark Otto's avatar
fix location of favicon    
Mark Otto committed
22 
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
Mark Otto's avatar
adding 144x144 ipad touch icon    
Mark Otto committed
23 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
Mark Otto's avatar
updated apple touch icons and moved input responsive fix from <480 to <767    
Mark Otto committed
24 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
Mark Otto's avatar
use variable for navbar text line-height    
Mark Otto committed
25
26 
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
Mark Otto's avatar
adding google analytics tracking to docs    
Mark Otto committed
27
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
28
29 
  </head>
Mark Otto's avatar
adding getting started page based on Bootstrap University from awhile back,...    
Mark Otto committed
30 
  <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
Mark Otto's avatar
add back left rail nav, tweak colors    
Mark Otto committed
31
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
32
33 
    <!-- Navbar
    ================================================== -->
Mark Otto's avatar
reverse navbar styles to save code    
Mark Otto committed
34 
    <div class="navbar navbar-inverse navbar-fixed-top">
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
35 
      <div class="navbar-inner">
Mark Otto's avatar
fix up docs to use default container, fix responsive home changes    
Mark Otto committed
36 
        <div class="container">
Purwandi's avatar
Add space on navbar button    
Purwandi committed
37 
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
38
39
40
41
42
43
44
45 
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="./index.html">Bootstrap</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
Mark Otto's avatar
restore top navs entirely    
Mark Otto committed
46 
                <a href="./index.html">Home</a>
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
47 
              </li>
Mark Otto's avatar
remove getting started link from home, add to navbar, overhaul getting started docs    
Mark Otto committed
48
49
50 
              <li class="">
                <a href="./getting-started.html">Get started</a>
              </li>
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
51
52
53
54
55
56
57
58
59
60 
              <li class="">
                <a href="./scaffolding.html">Scaffolding</a>
              </li>
              <li class="active">
                <a href="./base-css.html">Base CSS</a>
              </li>
              <li class="">
                <a href="./components.html">Components</a>
              </li>
              <li class="">
Mark Otto's avatar
restore top navs entirely    
Mark Otto committed
61 
                <a href="./javascript.html">Javascript</a>
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
62 
              </li>
Mark Otto's avatar
renamed less.html to extend.html, removing all the vars and mixins    
Mark Otto committed
63 
              <li class="">
Mark Otto's avatar
move from downloads.html to customize.html to better match purpose of page,...    
Mark Otto committed
64 
                <a href="./customize.html">Customize</a>
Mark Otto's avatar
renamed less.html to extend.html, removing all the vars and mixins    
Mark Otto committed
65 
              </li>
Mark Otto's avatar
drop the side nav, restore topbar    
Mark Otto committed
66
67
68
69
70
71 
            </ul>
          </div>
        </div>
      </div>
    </div>
Mark Otto's avatar
fix indenting and remove hidden subnav on Base CSS docs    
Mark Otto committed
72 
<!-- Subhead
Jacob Thornton's avatar
add templates for doc generation    
Jacob Thornton committed
73
74 
================================================== -->
<header class="jumbotron subhead" id="overview">
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
75
76 
  <div class="container">
    <h1>Base CSS</h1>
Mark Otto's avatar
copy edits to docs    
Mark Otto committed
77 
    <p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
78 
  </div>
Mark Otto's avatar
updated javascripts for first pass at single column    
Mark Otto committed
79 
</header>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
80
Mark Otto's avatar
adding getting started page based on Bootstrap University from awhile back,...    
Mark Otto committed
81
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
82 
  <div class="container">
Mark Otto's avatar
more tweaks to layouts and some docs styles    
Mark Otto committed
83
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
84
85
86
87 
    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
Jacob Thornton's avatar
get affix actually working and update docs    
Jacob Thornton committed
88 
        <ul class="nav nav-list bs-docs-sidenav">
Mark Otto's avatar
place chevrons first in sidenav in docs, fix ie7 bugs for said sidenav    
Mark Otto committed
89
90
91
92
93
94
95 
          <li><a href="#typography"><i class="icon-chevron-right"></i> Typography</a></li>
          <li><a href="#code"><i class="icon-chevron-right"></i> Code</a></li>
          <li><a href="#tables"><i class="icon-chevron-right"></i> Tables</a></li>
          <li><a href="#forms"><i class="icon-chevron-right"></i> Forms</a></li>
          <li><a href="#buttons"><i class="icon-chevron-right"></i> Buttons</a></li>
          <li><a href="#images"><i class="icon-chevron-right"></i> Images</a></li>
          <li><a href="#icons"><i class="icon-chevron-right"></i> Icons by Glyphicons</a></li>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
96
97
98 
        </ul>
      </div>
      <div class="span9">
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
99
100
Mark Otto's avatar
revamp docs to have new width, start realigning the base css page to match    
Mark Otto committed
101
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
102
103
104
105
106
107 
        <!-- Typography
        ================================================== -->
        <section id="typography">
          <div class="page-header">
            <h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
          </div>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
108
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
109
110
111
112
113
114
115
116
117
118 
          <h2>Headings</h2>
          <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
          <div class="bs-docs-example">
            <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
updated type section of base css    
Mark Otto committed
119
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
120
121
122
123
124
125
126
127 
          <h2>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 (9px 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>
          <pre class="prettyprint">&lt;p&gt;...&lt;/p&gt;</pre>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
128
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
129
130
131
132
133
134 
          <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>
          <pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
135
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
136
137 
          <h2>Built with Less</h2>
          <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</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
updated type section of base css    
Mark Otto committed
138
139
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
140 
          <hr class="bs-docs-separator">
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
141
142
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
143
144 
          <h2>Emphasis</h2>
          <p>Make use of HTML's default emphasis tags, <code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code>.</p>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
145
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
146
147
148
149
150
151 
          <h3><code>&lt;strong&gt;</code></h3>
          <p>For emphasizing a snippet of text with <strong>important</strong></p>
          <div class="bs-docs-example">
            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
          </div>
          <pre class="prettyprint">&lt;strong&gt;rendered as bold text&lt;/strong&gt;</pre>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
152
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
153
154
155
156
157
158 
          <h3><code>&lt;em&gt;</code></h3>
          <p>For emphasizing a snippet of text with <em>stress</em></p>
          <div class="bs-docs-example">
            <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
          </div>
          <pre class="prettyprint">&lt;em&gt;rendered as italicized text&lt;/em&gt;</pre>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
159
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
160 
          <p><span class="label label-info">Heads up!</span> 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
updated type section of base css    
Mark Otto committed
161
162
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
163 
          <hr class="bs-docs-separator">
Mark Otto's avatar
revamp docs to have new width, start realigning the base css page to match    
Mark Otto committed
164
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
165
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
166
167 
          <h2>Abbreviations</h2>
          <p>Stylized implemenation 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>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
168
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
169
170
171
172
173
174 
          <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>
          <pre class="prettyprint">&lt;abbr title="attribute"&gt;attr&lt;/abbr&gt;</pre>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
175
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
176
177
178
179
180
181 
          <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>
          <pre class="prettyprint">&lt;abbr title="attribute" class="initialism"&gt;attr&lt;/abbr&gt;</pre>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
182
183
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203 
          <hr class="bs-docs-separator">


          <h2>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@gmail.com</a>
            </address>
          </div>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
204
205
206
207
208
209
210
211
212
213
214
215
216 
<pre class="prettyprint linenums">
&lt;address&gt;
  &lt;strong&gt;Twitter, Inc.&lt;/strong&gt;&lt;br&gt;
  795 Folsom Ave, Suite 600&lt;br&gt;
  San Francisco, CA 94107&lt;br&gt;
  &lt;abbr title="Phone"&gt;P:&lt;/abbr&gt; (123) 456-7890
&lt;/address&gt;

&lt;address&gt;
  &lt;strong&gt;Full Name&lt;/strong&gt;&lt;br&gt;
  &lt;a href="mailto:#"&gt;first.last@gmail.com&lt;/a&gt;
&lt;/address&gt;
</pre>
Mark Otto's avatar
revamp docs to have new width, start realigning the base css page to match    
Mark Otto committed
217
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
218
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
219 
          <hr class="bs-docs-separator">
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
220
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
221
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
222
223 
          <h2>Blockquotes</h2>
          <p>For quoting blocks of content from another source within your document.</p>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
224
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
225
226
227
228
229
230
231 
          <h3>Default blockqoute</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
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
232
233 
<pre class="prettyprint linenums">
&lt;blockquote&gt;
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
234 
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
235
236 
&lt;/blockquote&gt;
</pre>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
237
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
238
239 
          <h3>Blockquote options</h3>
          <p>Style and content changes for simple variations on a standard blockquote.</p>
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
240
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
241
242
243
244
245
246
247
248 
          <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
updated type section of base css    
Mark Otto committed
249
250
251
252
253
254
255 
<pre class="prettyprint linenums">
&lt;blockquote&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
  &lt;small&gt;Someone famous &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;&lt;/small&gt;
&lt;/blockquote&gt;
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
256
257
258
259
260
261
262
263 
          <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
updated type section of base css    
Mark Otto committed
264
265 
<pre class="prettyprint linenums">
&lt;blockquote class="pull-right"&gt;
Mark Otto's avatar
docs cleanup and blockquote cleanup for .pull-right option    
Mark Otto committed
266 
  ...
Mark Otto's avatar
updated type section of base css    
Mark Otto committed
267
268
269
270 
&lt;/blockquote&gt;
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
271 
          <hr class="bs-docs-separator">
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
272
Mark Otto's avatar
updated docs and type styles for blockquotes and a few fixes for type    
Mark Otto committed
273
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322 
          <!-- Lists -->
          <h2>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>
<pre class="prettyprint linenums">
&lt;ul&gt;
  &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>

          <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>
<pre class="prettyprint linenums">
&lt;ol&gt;
  &lt;li&gt;...&lt;/li&gt;
&lt;/ol&gt;
</pre>
Mark Otto's avatar
revamp docs to have new width, start realigning the base css page to match    
Mark Otto committed
323
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
324
325 
        <h3>Unstyled</h3>
        <p>A list of items with no <code>list-style</code> or additional left padding.</p>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
326 
        <div class="bs-docs-example">
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
327 
          <ul class="unstyled">
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345 
            <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>
<pre class="prettyprint linenums">
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
346 
&lt;ul class="unstyled"&gt;
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
347
348
349
350 
  &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
351
352 
        <h3>Description</h3>
        <p>A list of terms with their associated descriptions.</p>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
353 
        <div class="bs-docs-example">
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
354
355
356
357
358
359
360
361
362 
          <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>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
363
364 
        </div>
<pre class="prettyprint linenums">
Mark Otto's avatar
more tweaks to layouts and some docs styles    
Mark Otto committed
365
366
367
368
369
370 
&lt;dl&gt;
  &lt;dt&gt;...&lt;/dt&gt;
  &lt;dd&gt;...&lt;/dd&gt;
&lt;/dl&gt;
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385 
        <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
more tweaks to layouts and some docs styles    
Mark Otto committed
386
387
388
389
390
391 
<pre class="prettyprint linenums">
&lt;dl class="dl-horizontal"&gt;
  &lt;dt&gt;...&lt;/dt&gt;
  &lt;dd&gt;...&lt;/dd&gt;
&lt;/dl&gt;
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
392
393
394
395
396 
        <p>
          <span class="label label-info">Heads up!</span>
          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
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
397
398
399
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
400
401
402
403
404
405 
        <!-- Code
        ================================================== -->
        <section id="code">
          <div class="page-header">
            <h1>Code <small>Inline and block code snippets</small></h1>
          </div>
Mark Otto's avatar
convert code section to new layout    
Mark Otto committed
406
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
407
408 
          <h2>Inline</h2>
          <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
Mark Otto's avatar
modifications to new content    
Mark Otto committed
409
410
411 
<div class="bs-docs-example">
  For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
Mark Otto's avatar
rewrite the code section of the type docs    
Mark Otto committed
412 
<pre class="prettyprint linenums">
Mark Otto's avatar
modifications to new content    
Mark Otto committed
413 
For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inline.
Mark Otto's avatar
rewrite the code section of the type docs    
Mark Otto committed
414 
</pre>
Mark Otto's avatar
convert code section to new layout    
Mark Otto committed
415
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
416
417 
          <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>
Mark Otto's avatar
modifications to new content    
Mark Otto committed
418
419
420 
<div class="bs-docs-example">
  <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
</div>
Mark Otto's avatar
rewrite the code section of the type docs    
Mark Otto committed
421
422 
<pre class="prettyprint linenums" style="margin-bottom: 9px;">
&lt;pre&gt;
Mark Otto's avatar
modifications to new content    
Mark Otto committed
423 
  &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;
Mark Otto's avatar
rewrite the code section of the type docs    
Mark Otto committed
424
425 
&lt;/pre&gt;
</pre>
Erik van der Kolk's avatar
Replace Note: by Heads up!    
Erik van der Kolk committed
426 
          <p><span class="label label-info">Heads up!</span> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
427
428 
          <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>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
429
430
431
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
432
433
434
435
436
437 
        <!-- Tables
        ================================================== -->
        <section id="tables">
          <div class="page-header">
            <h1>Tables <small>For, you guessed it, tabular data</small></h1>
          </div>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
438
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472 
          <h2>Default styles</h2>
          <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>.</p>
          <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>
          </div>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
473 
<pre class="prettyprint linenums">
Mark Otto's avatar
scope table styles to a class, .table, instead of on the generic element as a smarter default    
Mark Otto committed
474 
&lt;table class="table"&gt;
Jacob Thornton's avatar
rebuild base-css    
Jacob Thornton committed
475 
  …
Mark Otto's avatar
examples-wrap tables    
Mark Otto committed
476
477 
&lt;/table&gt;
</pre>
Mark Otto's avatar
massive docs update, mostly to all our new forms, and to the buttons    
Mark Otto committed
478
Mark Otto's avatar
overhaul tables docs for more streamlined content    
Mark Otto committed
479
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
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
509
510
511
512
513
514
515
516
517
518
519 
          <hr class="bs-docs-separator">


          <h2>Optional classes</h2>
          <p>Add any of the follow 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 IE7-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>
          </div>
Mark Otto's avatar
more table docs cleanup    
Mark Otto committed
520 
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
Mark Otto's avatar
scope table styles to a class, .table, instead of on the generic element as a smarter default    
Mark Otto committed
521 
&lt;table class="table table-striped"&gt;
Jacob Thornton's avatar
rebuild base-css    
Jacob Thornton committed
522 
  …
Mark Otto's avatar
examples-wrap tables    
Mark Otto committed
523
524 
&lt;/table&gt;
</pre>
Mark Otto's avatar
massive docs update, mostly to all our new forms, and to the buttons    
Mark Otto committed
525
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563 
          <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>
          </div>
Mark Otto's avatar
adding bordered table to docs and showing it works with colspan    
Mark Otto committed
564 
<pre class="prettyprint linenums">
Mark Otto's avatar
scope table styles to a class, .table, instead of on the generic element as a smarter default    
Mark Otto committed
565 
&lt;table class="table table-bordered"&gt;
Jacob Thornton's avatar
rebuild base-css    
Jacob Thornton committed
566 
  …
Mark Otto's avatar
examples-wrap tables    
Mark Otto committed
567 
&lt;/table&gt;
Mark Otto's avatar
#3223: make table row hover optional class    
Mark Otto committed
568
569 
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602 
          <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>
          </div>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
603
604
605
606
607
608 
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-hover"&gt;
  …
&lt;/table&gt;
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
609
610
611
612
613
614
615
616
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 
          <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>
          </div>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
642
643
644
645
646
647
648 
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-condensed"&gt;
  …
&lt;/table&gt;
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
649
650
651
652
653
654
655
656
657
658 
          <hr class="bs-docs-separator">


          <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>
Mark Otto's avatar
Merge branch '2.1.0-wip' of https://github.com/gcoop/bootstrap into gcoop-2.1.0-wip    
Mark Otto committed
659
660 
            <thead>
              <tr>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
661
662 
                <th>Class</th>
                <th>Description</th>
Mark Otto's avatar
Merge branch '2.1.0-wip' of https://github.com/gcoop/bootstrap into gcoop-2.1.0-wip    
Mark Otto committed
663
664
665 
              </tr>
            </thead>
            <tbody>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
666
667
668
669
670 
              <tr>
                <td>
                  <code>.success</code>
                </td>
                <td>Indicates a successful or positive action.</td>
Mark Otto's avatar
Merge branch '2.1.0-wip' of https://github.com/gcoop/bootstrap into gcoop-2.1.0-wip    
Mark Otto committed
671 
              </tr>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
672
673
674
675
676 
              <tr>
                <td>
                  <code>.error</code>
                </td>
                <td>Indicates a dangerous or potentially negative action.</td>
Mark Otto's avatar
Merge branch '2.1.0-wip' of https://github.com/gcoop/bootstrap into gcoop-2.1.0-wip    
Mark Otto committed
677 
              </tr>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
678
679
680
681
682 
              <tr>
                <td>
                  <code>.info</code>
                </td>
                <td>Used as an alternative to the default styles.</td>
Mark Otto's avatar
Merge branch '2.1.0-wip' of https://github.com/gcoop/bootstrap into gcoop-2.1.0-wip    
Mark Otto committed
683
684
685 
              </tr>
            </tbody>
          </table>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717 
          <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="info">
                  <td>3</td>
                  <td>TB - Monthly</td>
                  <td>03/04/2012</td>
                  <td>Pending</td>
                </tr>
              </tbody>
            </table>
          </div>
Gavin Cooper (work)'s avatar
added ability to give rows in tables status classes .success .error and .info.    
Gavin Cooper (work) committed
718 
<pre class="prettyprint linenums">
Mark Otto's avatar
fixes #3845: add .btn-link for transparent buttons styled as links    
Mark Otto committed
719
720
721
722
723
724
725
726 
...
  &lt;tr class="success"&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;TB - Monthly&lt;/td&gt;
    &lt;td&gt;01/04/2012&lt;/td&gt;
    &lt;td&gt;Approved&lt;/td&gt;
  &lt;/tr&gt;
...
Gavin Cooper (work)'s avatar
added ability to give rows in tables status classes .success .error and .info.    
Gavin Cooper (work) committed
727
728
729 
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
730
731
732
733
734
735
736
737
738
739
740
741
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
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805 
          <hr class="bs-docs-separator">


          <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>
                  Special table cell for column (or row, depending on scope and placement) labels<br>
                  Must be used within a <code>&lt;thead&gt;</code>
                </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
overhaul tables docs for more streamlined content    
Mark Otto committed
806
807 
<pre class="prettyprint linenums">
&lt;table&gt;
Mark Otto's avatar
modifications to new content    
Mark Otto committed
808 
  &lt;caption&gt;...&lt;/caption&gt;
Mark Otto's avatar
overhaul tables docs for more streamlined content    
Mark Otto committed
809
810 
  &lt;thead&gt;
    &lt;tr&gt;
Mark Otto's avatar
modifications to new content    
Mark Otto committed
811
812 
      &lt;th&gt;...&lt;/th&gt;
      &lt;th&gt;...&lt;/th&gt;
Mark Otto's avatar
overhaul tables docs for more streamlined content    
Mark Otto committed
813
814
815
816 
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
Mark Otto's avatar
modifications to new content    
Mark Otto committed
817
818 
      &lt;td&gt;...&lt;/td&gt;
      &lt;td&gt;...&lt;/td&gt;
Mark Otto's avatar
overhaul tables docs for more streamlined content    
Mark Otto committed
819
820 
    &lt;/tr&gt;
  &lt;/tbody&gt;
Mark Otto's avatar
examples-wrap tables    
Mark Otto committed
821
822
823 
&lt;/table&gt;
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
824 
        </section>
Mark Otto's avatar
breaking down the main page into subpages for easier, more comprehensive documentation  
Mark Otto committed
825
826
827
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
828
829
830
831
832
833 
        <!-- Forms
        ================================================== -->
        <section id="forms">
          <div class="page-header">
            <h1>Forms</h1>
          </div>
Mark Otto's avatar
finish off rest of base-css page    
Mark Otto committed
834
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
835
836
837
838
839
840 
          <h2>Default styles</h2>
          <p>Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p>
          <form class="bs-docs-example">
            <legend>Legend</legend>
            <label>Label name</label>
            <input type="text" placeholder="Type something…">
Erik van der Kolk's avatar
Change .help-block tag for "Forms => Default styles" example into <span>    
Erik van der Kolk committed
841 
            <span class="help-block">Example block-level help text here.</span>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
842
843
844
845
846 
            <label class="checkbox">
              <input type="checkbox"> Check me out
            </label>
            <button type="submit" class="btn">Submit</button>
          </form>
Mark Otto's avatar
adding code snippets to form examples    
Mark Otto committed
847 
<pre class="prettyprint linenums">
Erik van der Kolk's avatar
Make Forms => Default styles code snippet the same as example    
Erik van der Kolk committed
848
849 
&lt;form&gt;
  &lt;legend&gt;Legend&lt;/legend&gt;
Mark Otto's avatar
adding code snippets to form examples    
Mark Otto committed
850 
  &lt;label&gt;Label name&lt;/label&gt;
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
851 
  &lt;input type="text" placeholder="Type something…"&gt;
Mark Otto's avatar
start rearranging form docs and clear up messaging about required classes and default styles    
Mark Otto committed
852 
  &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
Mark Otto's avatar
adding code snippets to form examples    
Mark Otto committed
853
854
855
856
857
858 
  &lt;label class="checkbox"&gt;
    &lt;input type="checkbox"&gt; Check me out
  &lt;/label&gt;
  &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</pre>
Mark Otto's avatar
finish off rest of base-css page    
Mark Otto committed
859
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
860
Erik van der Kolk's avatar
Remove inexisting end tag </hr>    
Erik van der Kolk committed
861 
          <hr class="bs-docs-separator">
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
862
863
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
864
865 
          <h2>Optional layouts</h2>
          <p>Included with Bootstrap are three optional form layouts for common use cases.</p>
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
866
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
867
868
869
870
871
872 
          <h3>Search form</h3>
          <p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>&lt;input&gt;</code> for an extra-rounded text input.</p>
          <form class="bs-docs-example form-search">
            <input type="text" class="input-medium search-query">
            <button type="submit" class="btn">Search</button>
          </form>
Mark Otto's avatar
adding code snippets to form examples    
Mark Otto committed
873 
<pre class="prettyprint linenums">
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
874 
&lt;form class="form-search"&gt;
Mark Otto's avatar
adding code snippets to form examples    
Mark Otto committed
875
876
877
878 
  &lt;input type="text" class="input-medium search-query"&gt;
  &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&lt;/form&gt;
</pre>
Mark Otto's avatar
start rearranging form docs and clear up messaging about required classes and default styles    
Mark Otto committed
879
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
880
881
882
883
884
885
886
887
888
889 
          <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="input-small" placeholder="Email">
            <input type="password" class="input-small" placeholder="Password">
            <label class="checkbox">
              <input type="checkbox"> Remember me
            </label>
            <button type="submit" class="btn">Sign in</button>
          </form>
Mark Otto's avatar
adding code snippets to form examples    
Mark Otto committed
890 
<pre class="prettyprint linenums">
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
891 
&lt;form class="form-inline"&gt;
Mark Otto's avatar
adding code snippets to form examples    
Mark Otto committed
892
893 
  &lt;input type="text" class="input-small" placeholder="Email"&gt;
  &lt;input type="password" class="input-small" placeholder="Password"&gt;
Mark Otto's avatar
update inline forms to resolve checkbox label with space in it and overlapping content, per #1969    
Mark Otto committed
894
895
896 
  &lt;label class="checkbox"&gt;
    &lt;input type="checkbox"&gt; Remember me
  &lt;/label&gt;
Mark Otto's avatar
add version to docs homepage, fix docs example for forms    
Mark Otto committed
897 
  &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
Mark Otto's avatar
adding code snippets to form examples    
Mark Otto committed
898
899 
&lt;/form&gt;
</pre>
Mark Otto's avatar
massive docs update, mostly to all our new forms, and to the buttons    
Mark Otto committed
900
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
901
902
903
904
905
906
907
908
909
910
911 
          <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">
            <legend>Legend</legend>
            <div class="control-group">
Erik van der Kolk's avatar
Fix empty for attribute on labels in Horizontal form    
Erik van der Kolk committed
912 
              <label class="control-label" for="inputEmail">Email</label>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
913 
              <div class="controls">
Erik van der Kolk's avatar
Fix empty for attribute on labels in Horizontal form    
Erik van der Kolk committed
914 
                <input type="text" id="inputEmail" placeholder="Email">
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
915 
              </div>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
916 
            </div>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
917 
            <div class="control-group">
Erik van der Kolk's avatar
Fix empty for attribute on labels in Horizontal form    
Erik van der Kolk committed
918 
              <label class="control-label" for="inputPassword">Password</label>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
919 
              <div class="controls">
Erik van der Kolk's avatar
Fix empty for attribute on labels in Horizontal form    
Erik van der Kolk committed
920 
                <input type="password" id="inputPassword" placeholder="Password">
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
921 
              </div>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
922 
            </div>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
923
924
925
926
927
928
929 
            <div class="control-group">
              <div class="controls">
                <label class="checkbox">
                  <input type="checkbox"> Remember me
                </label>
                <button type="submit" class="btn">Sign in</button>
              </div>
Mark Otto's avatar
overhaul docs on sub pages, clean up css and copy    
Mark Otto committed
930 
            </div>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
931 
          </form>
Mark Otto's avatar
add another code example for horizontal forms    
Mark Otto committed
932
933 
<pre class="prettyprint linenums">
&lt;form class="form-horizontal"&gt;
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
934 
  &lt;div class="control-group"&gt;
Erik van der Kolk's avatar
Fix empty for attribute on labels in Horizontal form    
Erik van der Kolk committed
935 
    &lt;label class="control-label" for="inputEmail"&gt;Email&lt;/label&gt;
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
936 
    &lt;div class="controls"&gt;
Erik van der Kolk's avatar
Fix empty for attribute on labels in Horizontal form    
Erik van der Kolk committed
937 
      &lt;input type="text" id="inputEmail" placeholder="Email"&gt;
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
938
939
940 
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="control-group"&gt;
Erik van der Kolk's avatar
Fix empty for attribute on labels in Horizontal form    
Erik van der Kolk committed
941 
    &lt;label class="control-label" for="inputPassword"&gt;Password&lt;/label&gt;
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
942 
    &lt;div class="controls"&gt;
Erik van der Kolk's avatar
Fix empty for attribute on labels in Horizontal form    
Erik van der Kolk committed
943 
      &lt;input type="password" id="inputPassword" placeholder="Password"&gt;
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
944
945
946
947
948
949
950
951 
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="control-group"&gt;
    &lt;div class="controls"&gt;
      &lt;label class="checkbox"&gt;
        &lt;input type="checkbox"&gt; Remember me
      &lt;/label&gt;
      &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
Mark Otto's avatar
add another code example for horizontal forms    
Mark Otto committed
952 
    &lt;/div&gt;
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
953 
  &lt;/div&gt;
Mark Otto's avatar
add another code example for horizontal forms    
Mark Otto committed
954
955 
&lt;/form&gt;
</pre>
Mark Otto's avatar
massive docs update, mostly to all our new forms, and to the buttons    
Mark Otto committed
956
957
Erik van der Kolk's avatar
Remove inexisting end tag </hr>    
Erik van der Kolk committed
958 
          <hr class="bs-docs-separator">
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
959
960
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
961
962 
          <h2>Supported form controls</h2>
          <p>Examples of standard form controls supported in an example form layout.</p>
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
963
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
964
965
966
967
968
969 
          <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
rearrange other parts of forms docs    
Mark Otto committed
970 
<pre class="prettyprint linenums">
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
971 
&lt;input type="text" placeholder="Text input"&gt;
Mark Otto's avatar
rearrange other parts of forms docs    
Mark Otto committed
972 
</pre>
Mark Otto's avatar
finish off rest of base-css page    
Mark Otto committed
973
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
974 
          <h3>Textarea</h3>
Mark Otto's avatar
fix up padding on small buttons, add button examples    
Mark Otto committed
975 
          <p>Form control which supports multiple lines of text. Change <code>row</code> attribute as necessary.</p>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
976
977
978 
          <form class="bs-docs-example form-inline">
            <textarea rows="3"></textarea>
          </form>
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
979 
<pre class="prettyprint linenums">
Erik van der Kolk's avatar
Make Forms => Textarea code snippet the same as example    
Erik van der Kolk committed
980 
&lt;textarea rows="3"&gt;&lt;/textarea&gt;
Mark Otto's avatar
overhaul forms docs to simplify presentation of everything, reduce text, and...    
Mark Otto committed
981
982 
</pre>
Mark Otto's avatar
make docs scroll over jumbotrons, but only for 980px up    
Mark Otto committed
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000 
          <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">
            <label class="checkbox">
              <input type="checkbox" value="">
              Option one is this and that&mdash;be sure to include why it's great
            </label>
            <br>
            <label class="radio">
              <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>
            <label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
              Option two can be something else and selecting it will deselect option one
            </label>
          </form>
For faster browsing, not all history is shown. View entire blame