Getbootstrap.com/css

Example: Stacked-to-horizontal

ok HTML:Ex:Getbootstrap.com/css/Grid/Stacked-to-horizontal ( fork • edit original )

.col-md-1

.col-md-8

.col-md-4

.col-md-6

Wiki markup , original code

<div class="row demo-grid">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row demo-grid">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row demo-grid">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row demo-grid">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Example: Mobile and desktop

ok HTML:Ex:Getbootstrap.com/css/Grid/Mobile and desktop ( fork • edit original )

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

Wiki markup , original code

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row demo-grid">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
 
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row demo-grid">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
 
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row demo-grid">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Example: Mobile, tablet, desktop

ok HTML:Ex:Getbootstrap.com/css/Grid/Mobile, tablet, desktop ( fork • edit original )

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

Wiki markup , original code

<div class="row demo-grid">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row demo-grid">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Example: Column wrapping

ok HTML:Ex:Getbootstrap.com/css/Grid/Column wrapping ( fork • edit original )

.col-xs-9

.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-xs-6
Subsequent columns continue along the new line.

Wiki markup , original code

<div class="row demo-grid">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>
Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Responsive column resets

ok HTML:Ex:Getbootstrap.com/css/Grid/Responsive column resets ( fork • edit original )

.col-xs-6 .col-sm-3

Wiki markup , original code

<div class="row demo-grid">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 
  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>
 
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Offsetting columns

ok HTML:Ex:Getbootstrap.com/css/Grid/Offsetting columns ( fork • edit original )

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

Wiki markup , original code

<div class="row demo-grid">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row demo-grid">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row demo-grid">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Nesting columns

ok HTML:Ex:Getbootstrap.com/css/Grid/Nesting columns ( fork • edit original )

Level 1: .col-sm-9

Level 2: .col-xs-8 .col-sm-6

Level 2: .col-xs-4 .col-sm-6

Wiki markup , original code

<div class="row demo-grid">
  <div class="col-sm-9">
Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Column ordering

ok HTML:Ex:Getbootstrap.com/css/Grid/Column ordering ( fork • edit original )

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

Wiki markup , original code

<div class="row demo-grid">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Appendix

Heading

ok HTML:Ex:Getbootstrap.com/css/Typography/Heading/wiki ( edit • edit original • compare )

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text

h6. Bootstrap heading Secondary text

Wiki markup , modified code

<!-- Used <p class=hx> instead <hx> for correct TOC -->
<p class=h1>h1. Bootstrap heading <small>Secondary text</small></p>
<p class=h2>h2. Bootstrap heading <small>Secondary text</small></p>
<p class=h3>h3. Bootstrap heading <small>Secondary text</small></p>
<p class=h4>h4. Bootstrap heading <small>Secondary text</small></p>
<p class=h5>h5. Bootstrap heading <small>Secondary text</small></p>
<p class=h6>h6. Bootstrap heading <small>Secondary text</small></p>

original code

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Body copy

ok HTML:Ex:Getbootstrap.com/css/Typography/Body copy ( fork • edit original )

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.

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.

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.

Wiki markup , original code

<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>

Lead body copy

ok HTML:Ex:Getbootstrap.com/css/Typography/Lead body copy ( fork • edit original )

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Wiki markup , original code

<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. 
Duis mollis, est non commodo luctus.</p>

Inline text elements

Marked text

ok HTML:Ex:Getbootstrap.com/css/Typography/Marked text ( fork • edit original )

You can use the mark tag to highlight text.

Wiki markup , original code

You can use the mark tag to <mark>highlight</mark> text.

Deleted, strikethrough, inserted and underlined texts

ok HTML:Ex:Getbootstrap.com/css/Typography/Deleted text etc. ( fork • edit original )

~~This line of text is meant to be treated as deleted text.~~
~~This line of text is meant to be treated as no longer accurate.~~
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined

Wiki markup , original code

<del>This line of text is meant to be treated as deleted text.</del><br>
<s>This line of text is meant to be treated as no longer accurate.</s><br>
<ins>This line of text is meant to be treated as an addition to the document.</ins><br>
<u>This line of text will render as underlined</u>

Small text

ok HTML:Ex:Getbootstrap.com/css/Typography/Small text ( fork • edit original )

This line of text is meant to be treated as fine print.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Wiki markup , original code

<small>This line of text is meant to be treated as fine print.</small>
<p class=small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Bold and italic texts

ok HTML:Ex:Getbootstrap.com/css/Typography/Bold and italic texts ( fork • edit original )

rendered as regular text rendered as bold text rendered as italicized text
rendered as regular text rendered as bold text rendered as italicized text

Wiki markup , original code

rendered as regular text <strong>rendered as bold text</strong> <em>rendered as italicized text</em><br>
rendered as regular text <b>rendered as bold text</b> <i>rendered as italicized text</i>

Alignment classes

ok HTML:Ex:Getbootstrap.com/css/Typography/Alignment classes ( fork • edit original )

Left aligned text.

Center aligned text.

Right aligned text.

Justified text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

No wrap text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Wiki markup , original code

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="text-nowrap">No wrap text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Transformation classes

ok HTML:Ex:Getbootstrap.com/css/Typography/Transformation classes ( fork • edit original )

Lowercased text.

Uppercased text.

Capitalized text.

Wiki markup , original code

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Abbreviations

Basic abbreviation

ok HTML:Ex:Getbootstrap.com/css/Typography/Basic abbreviation ( fork • edit original )

attr

Wiki markup , original code

<abbr title="attribute">attr</abbr>

Initializm

ok HTML:Ex:Getbootstrap.com/css/Typography/Initializm ( fork • edit original )

NORMAL SIZE HTML is the best thing since sliced bread.

Wiki markup , original code

NORMAL SIZE <abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.

Addresses

n/a HTML:Ex:Getbootstrap.com/css/Typography/Addresses ( fork • edit original )

<address> Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 </address>

<address> Full Name
<a href="mailto:#">first.last@example.com</a> </address>

Wiki markup , original code

<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>

ok HTML:Ex:Getbootstrap.com/css/Typography/Addresses ( fork • edit original )

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
first.last@example.com

Raw HTML , original code

<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>

Blockquotes

Default blockquote

ok HTML:Ex:Getbootstrap.com/css/Typography/Default blockquote ( fork • edit original )

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Wiki markup , original code

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

Mediawiki not interprets the tag <footer>, it must be replaced by <small>.

Naming a source

mod HTML:Ex:Getbootstrap.com/css/Typography/Blockquote:Naming a source/wiki ( edit • edit original • compare )

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Wiki markup , modified code

<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>

original code

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alternate displays

mod HTML:Ex:Getbootstrap.com/css/Typography/Blockquote:Alternate displays/wiki ( edit • edit original • compare )

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Wiki markup , modified code

<blockquote class="blockquote-reverse">
  <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>

original code

<blockquote class="blockquote-reverse">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lists

Unordered

ok HTML:Ex:Getbootstrap.com/css/Typography/List:Unordered ( fork • edit original )

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Wiki markup , original code

    <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>

Unordered (Wiki markup)

ok HTML:Ex:Getbootstrap.com/css/Typography/List:Unordered (Wiki markup) ( fork • edit original )

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Wiki markup , original code

* Lorem ipsum dolor sit amet
* Consectetur adipiscing elit
* Integer molestie lorem at massa
* Facilisis in pretium nisl aliquet
* Nulla volutpat aliquam velit
** Phasellus iaculis neque
** Purus sodales ultricies
** Vestibulum laoreet porttitor sem
** Ac tristique libero volutpat at
* Faucibus porta lacus fringilla vel
* Aenean sit amet erat nunc
* Eget porttitor lorem

Ordered

ok HTML:Ex:Getbootstrap.com/css/Typography/List:Ordered ( fork • edit original )

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Wiki markup , original code

<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>

Ordered (Wiki markup)

ok HTML:Ex:Getbootstrap.com/css/Typography/List:Ordered (Wiki markup) ( fork • edit original )

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Wiki markup , original code

# Lorem ipsum dolor sit amet
# Consectetur adipiscing elit
# Integer molestie lorem at massa
# Facilisis in pretium nisl aliquet
# Nulla volutpat aliquam velit
# Faucibus porta lacus fringilla vel
# Aenean sit amet erat nunc
# Eget porttitor lorem

Unstyled

All unbulled lists do not work properly due to the specification .mw-body ul. They have to specifically add a class .corr-plainlist to correct.

ul HTML:Ex:Getbootstrap.com/css/Typography/List:Unstyled/wiki ( edit • edit original • compare )

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Wiki markup , modified code

<ul class="list-unstyled corr-plainlist">
  <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>

original code

<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>

Inline

ul HTML:Ex:Getbootstrap.com/css/Typography/List:Inline/wiki ( edit • edit original • compare )

Lorem ipsum
Phasellus iaculis
Nulla volutpat

Wiki markup , modified code

<ul class="list-inline corr-plainlist">
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

original code

<ul class="list-inline">
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

Description

ok HTML:Ex:Getbootstrap.com/css/Typography/List:Description ( fork • edit original )

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Wiki markup , original code

<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>

Description (Wiki markup)

ok HTML:Ex:Getbootstrap.com/css/Typography/List:Description (Wiki markup) ( fork • edit original )

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Wiki markup , original code

; Description lists : A description list is perfect for defining terms.<!-- One line -->
; Euismod <!-- Multiple lines -->
: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
: Donec id elit non mi porta gravida at eget metus.
; Malesuada porta:Etiam porta sem malesuada magna mollis euismod.<!-- without spaces -->

Horizontal description

no HTML:Ex:Getbootstrap.com/css/Typography/List:Horizontal description ( fork • edit original )

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Wiki markup , original code

<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>
</dl>

no HTML:Ex:Getbootstrap.com/css/Typography/List:Horizontal description ( fork • edit original )

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Raw HTML , original code

<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>
</dl>

Inline

ok HTML:Ex:Getbootstrap.com/css/Code/Inline ( fork • edit original )

For example, <section> should be wrapped as inline.

Wiki markup , original code

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

User Input

ok HTML:Ex:Getbootstrap.com/css/Code/User Input ( fork • edit original )

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

Wiki markup , original code

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Basic block

ok HTML:Ex:Getbootstrap.com/css/Code/Basic block ( fork • edit original )

<p>Sample text here...</p>

Wiki markup , original code

<pre><p>Sample text here...</p></pre>

Variables

ok HTML:Ex:Getbootstrap.com/css/Code/Variables ( fork • edit original )

y = mx + b

Wiki markup , original code

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Sample output

ok HTML:Ex:Getbootstrap.com/css/Code/Sample output ( fork • edit original )

This text is meant to be treated as sample output from a computer program.

Wiki markup , original code

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Basic example

ok HTML:Ex:Getbootstrap.com/css/Tables/Basic example ( fork • edit original )

Optional table caption.
#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Wiki markup , original code

<table class="table">
<caption>Optional table caption.</caption>
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Username</th>
  </tr>
  <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>@twitter</td>
  </tr>
</table>

Striped rows

ok HTML:Ex:Getbootstrap.com/css/Tables/Striped rows ( fork • edit original )

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Wiki markup , original code

<table class="table table-striped">
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Username</th>
  </tr>
  <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>@twitter</td>
  </tr>
</table>

Bordered table

ok HTML:Ex:Getbootstrap.com/css/Tables/Bordered table ( fork • edit original )

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Wiki markup , original code

<table class="table table-bordered">
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Username</th>
  </tr>
  <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>@twitter</td>
  </tr>
</table>

Hover rows

ok HTML:Ex:Getbootstrap.com/css/Tables/Hover rows ( fork • edit original )

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Wiki markup , original code

<table class="table table-hover">
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Username</th>
  </tr>
  <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>@twitter</td>
  </tr>
</table>

Condensed table

ok HTML:Ex:Getbootstrap.com/css/Tables/Condensed table ( fork • edit original )

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Wiki markup , original code

<table class="table table-condensed">
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Username</th>
  </tr>
  <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>@twitter</td>
  </tr>
</table>

Contextual classes

ok HTML:Ex:Getbootstrap.com/css/Tables/Contextual classes ( fork • edit original )

#	Column heading	Column heading	Column heading
1	Column content (active)	Column content	Column content
2	Column content (regular)	Column content	Column content
3	Column content (success)	Column content	Column content
4	Column content	Column content	Column content
5	Column content (info)	Column content	Column content
6	Column content	Column content	Column content
7	Column content (warning)	Column content	Column content
8	Column content	Column content	Column content
9	Column content (danger)	Column content	Column content

Wiki markup , original code

<table class="table">
  <tr>
    <th>#</th>
    <th>Column heading</th>
    <th>Column heading</th>
    <th>Column heading</th>
  </tr>
  <tr class="active">
    <th scope="row">1</th>
    <td>Column content (active)</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Column content (regular)</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr class="success">
    <th scope="row">3</th>
    <td>Column content (success)</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr>
    <th scope="row">4</th>
    <td>Column content</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr class="info">
    <th scope="row">5</th>
    <td>Column content (info)</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr>
    <th scope="row">6</th>
    <td>Column content</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr class="warning">
    <th scope="row">7</th>
    <td>Column content (warning)</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr>
    <th scope="row">8</th>
    <td>Column content</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
  <tr class="danger">
    <th scope="row">9</th>
    <td>Column content (danger)</td>
    <td>Column content</td>
    <td>Column content</td>
  </tr>
</table>

Responsive tables

ok HTML:Ex:Getbootstrap.com/css/Tables/Responsive tables ( fork • edit original )

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

Wiki markup , original code

<div class="table-responsive">
  <table class="table table-bordered">
    <tr>
      <th>#</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </table>
</div>

n/a Forms are not supported by Mediawiki markup (but see mw:Manual:$wgRawHtml and mw:Extension:NamespaceHTML).

Basic Example

ok HTML:Ex:Getbootstrap.com/css/Forms/Basic Example ( fork • edit original )

Raw HTML , original code

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Inline form

ok HTML:Ex:Getbootstrap.com/css/Forms/Inline form (1) ( fork • edit original )

Raw HTML , original code

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

ok HTML:Ex:Getbootstrap.com/css/Forms/Inline form (2) ( fork • edit original )

Raw HTML , original code

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

ok HTML:Ex:Getbootstrap.com/css/Forms/Inline form (3) ( fork • edit original )

Raw HTML , original code

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Horizontal form

ok HTML:Ex:Getbootstrap.com/css/Forms/Horizontal form ( fork • edit original )

Raw HTML , original code

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Supported controls

Inputs

ok HTML:Ex:Getbootstrap.com/css/Forms/Supported controls:Inputs ( fork • edit original )

Raw HTML , original code

<input type="text" class="form-control" placeholder="Text input">

Textarea

ok HTML:Ex:Getbootstrap.com/css/Forms/Supported controls:Textarea ( fork • edit original )

Raw HTML , original code

<textarea class="form-control" rows="3"></textarea>

Checkboxes and radios

Default (stacked)

ok HTML:Ex:Getbootstrap.com/css/Forms/Supported controls:Checkboxes and radios:Default (stacked) ( fork • edit original )

Option one is this and that—be sure to include why it's great

Option two is disabled

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Raw HTML , original code

<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>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>
 
<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>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Inline checkboxes and radios

ok HTML:Ex:Getbootstrap.com/css/Forms/Supported controls:Checkboxes and radios:Inline checkboxes and radios ( fork • edit original )

Raw HTML , original code

<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>
 
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Checkboxes and radios without label text

ok HTML:Ex:Getbootstrap.com/css/Forms/Supported controls:Checkboxes and radios:Checkboxes and radios without label text ( fork • edit original )

Raw HTML , original code

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Selects

ok HTML:Ex:Getbootstrap.com/css/Forms/Supported controls:Selects ( fork • edit original )

Raw HTML , original code

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select><br>
 
<select multiple  class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Static control

ok HTML:Ex:Getbootstrap.com/css/Forms/Static control (1) ( fork • edit original )

Raw HTML , original code

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

ok HTML:Ex:Getbootstrap.com/css/Forms/Static control (2) ( fork • edit original )

Raw HTML , original code

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">email@example.com</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Focus state

ok HTML:Ex:Getbootstrap.com/css/Forms/Focus state ( fork • edit original )

???????????????????

Raw HTML , original code

<input type="text" class="form-control" placeholder="Demonstrative focus state">
???????????????????

Disabled state

ok HTML:Ex:Getbootstrap.com/css/Forms/Disabled state ( fork • edit original )

Raw HTML , original code

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Disabled fieldsets

ok HTML:Ex:Getbootstrap.com/css/Forms/Disabled fieldsets ( fork • edit original )

Raw HTML , original code

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <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>

Readonly state

ok HTML:Ex:Getbootstrap.com/css/Forms/Readonly state ( fork • edit original )

Raw HTML , original code

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Validation states

ok HTML:Ex:Getbootstrap.com/css/Forms/Validation states ( fork • edit original )

Input with success

Input with warning

Input with error

Checkbox with success

Checkbox with warning

Checkbox with error

Raw HTML , original code

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

With optional icons

no HTML:Ex:Getbootstrap.com/css/Forms/With optional icons ( fork • edit original )

Input with success

Input with warning

Input with error

Input group with success

@

Raw HTML , original code

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Optional icons in horizontal and inline forms

no HTML:Ex:Getbootstrap.com/css/Forms/Optional icons in horizontal and inline forms (1) ( fork • edit original )

Raw HTML , original code

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

no HTML:Ex:Getbootstrap.com/css/Forms/Optional icons in horizontal and inline forms (2) ( fork • edit original )

Raw HTML , original code

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Optional icons with hidden .sr-only labels

no HTML:Ex:Getbootstrap.com/css/Forms/Optional icons with hidden .sr-only labels ( fork • edit original )

@

Raw HTML , original code

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Control sizing

Height sizing

Добавление <br> в режиме rawHTML ненормально.

mod HTML:Ex:Getbootstrap.com/css/Forms/Height sizing/html ( edit • edit original • compare )

Raw HTML , modified code

<input class="form-control input-lg" type="text" placeholder=".input-lg"><br>
<input class="form-control" type="text" placeholder="Default input"><br>
<input class="form-control input-sm" type="text" placeholder=".input-sm"><br>
 
<select class="form-control input-lg">
  <option value="">.input-lg</option>
</select><br>
<select class="form-control">
  <option value="">Default select</option>
</select><br>
<select class="form-control input-sm">
  <option value="">.input-sm</option>
</select>

original code

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
 
<select class="form-control input-lg">
  <option value="">.input-lg</option>
</select>
<select class="form-control">
  <option value="">Default select</option>
</select>
<select class="form-control input-sm">
  <option value="">.input-sm</option>
</select>

Horizontal form group sizes

ok HTML:Ex:Getbootstrap.com/css/Forms/Horizontal form group sizes ( fork • edit original )

Raw HTML , original code

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Column sizing

ok HTML:Ex:Getbootstrap.com/css/Forms/Column sizing ( fork • edit original )

Raw HTML , original code

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Help text

ok HTML:Ex:Getbootstrap.com/css/Forms/Help text ( fork • edit original )

A block of help text that breaks onto a new line and may extend beyond one line.

Raw HTML , original code

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

n/a Buttons are not supported by Mediawiki markup (but see mw:Manual:$wgRawHtml and mw:Extension:NamespaceHTML).

An example is considered successful if they meet conservation design. However, maintaining the correct processing of events (which may be associated with the type of tag) are not fully tested.

Button tags

ok HTML:Ex:Getbootstrap.com/css/Buttons/Button tags/wiki ( edit • edit original • compare )

Link Button Input Submit

Wiki markup , modified code

[[#|<span class="btn btn-default" href="#" role="button">Link</span>]]<!-- or 
[{{fullurl:{{FULLPAGENAME}}}}# <span class="btn btn-default" href="#" role="button">Link</span>] -->
<span class="btn btn-default" type="submit">Button</span>
<span class="btn btn-default" type="button" value="Input">Input</span>
<span class="btn btn-default" type="submit" value="Submit">Submit</span>

ok HTML:Ex:Getbootstrap.com/css/Buttons/Button tags ( edit )

Link

Raw HTML , original code

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Options

ok HTML:Ex:Getbootstrap.com/css/Buttons/Options/wiki ( edit • edit original • compare )

Default Primary Success Info Warning Danger Link

Wiki markup , modified code

<!-- Standard button -->
<span type="button" class="btn btn-default">Default</span>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<span type="button" class="btn btn-primary">Primary</span>
<!-- Indicates a successful or positive action -->
<span type="button" class="btn btn-success">Success</span>
<!-- Contextual button for informational alert messages -->
<span type="button" class="btn btn-info">Info</span>
<!-- Indicates caution should be taken with this action -->
<span type="button" class="btn btn-warning">Warning</span>
<!-- Indicates a dangerous or potentially negative action -->
<span type="button" class="btn btn-danger">Danger</span>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<span type="button" class="btn btn-link">Link</span>

ok HTML:Ex:Getbootstrap.com/css/Buttons/Options ( edit )

Raw HTML , original code

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Sizes

ok HTML:Ex:Getbootstrap.com/css/Buttons/Sizes/wiki ( edit • edit original • compare )

Large button Large button

Default button Default button

Small button Small button

Extra small button Extra small button

Block level button Block level button

Wiki markup , modified code

<p>
  <span type="button" class="btn btn-primary btn-lg">Large button</span>
  <span type="button" class="btn btn-default btn-lg">Large button</span>
</p>
<p>
  <span type="button" class="btn btn-primary">Default button</span>
  <span type="button" class="btn btn-default">Default button</span>
</p>
<p>
  <span type="button" class="btn btn-primary btn-sm">Small button</span>
  <span type="button" class="btn btn-default btn-sm">Small button</span>
</p>
<p>
 <span type="button" class="btn btn-primary btn-xs">Extra small button</span>
 <span type="button" class="btn btn-default btn-xs">Extra small button</span>
</p>
<div class="well center-block" style="max-width: 400px;">
<span type="button" class="btn btn-primary btn-lg btn-block">Block level button</span>
<span type="button" class="btn btn-default btn-lg btn-block">Block level button</span>
</div>

ok HTML:Ex:Getbootstrap.com/css/Buttons/Sizes ( edit )

Raw HTML , original code

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
<div class="well center-block" style="max-width: 400px;">
  <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
  <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</div>

Active state

Button element

ok HTML:Ex:Getbootstrap.com/css/Buttons/Active state:Button element/wiki ( edit • edit original • compare )

Primary button Button

Wiki markup , modified code

<span type="button" class="btn btn-primary btn-lg active">Primary button</span>
<span type="button" class="btn btn-default btn-lg active">Button</span>

ok HTML:Ex:Getbootstrap.com/css/Buttons/Active state:Button element ( edit )

Raw HTML , original code

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Anchor element

ok HTML:Ex:Getbootstrap.com/css/Buttons/Active state:Anchor element/wiki ( edit • edit original • compare )

Primary link Link

Wiki markup , modified code

[[#|<span class="btn btn-primary btn-lg active" role="button">Primary link</span>]]
[[#|<span class="btn btn-default btn-lg active" role="button">Link</span>]]

ok HTML:Ex:Getbootstrap.com/css/Buttons/Active state:Anchor element ( edit )

Primary link Link

Raw HTML , original code

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Disabled state

Button element

ok HTML:Ex:Getbootstrap.com/css/Buttons/Disabled state:Button element/wiki ( edit • edit original • compare )

Primary button Button

Wiki markup , modified code

<span type="button" class="btn btn-lg btn-primary disabled" disabled="disabled">Primary button</span>
<span type="button" class="btn btn-default btn-lg disabled" disabled="disabled">Button</span>

ok HTML:Ex:Getbootstrap.com/css/Buttons/Disabled state:Button element ( edit )

Raw HTML , original code

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Anchor element

ok HTML:Ex:Getbootstrap.com/css/Buttons/Disabled state:Anchor element/wiki ( edit • edit original • compare )

Primary link Link

Wiki markup , modified code

[[#|<span class="btn btn-primary btn-lg disabled" role="button">Primary link</span>]]
[[#|<span class="btn btn-default btn-lg disabled" role="button">Link</span>]]

no HTML:Ex:Getbootstrap.com/css/Buttons/Disabled state:Anchor element ( edit )

Link color blends with the color primary button.

Primary link Link

Raw HTML , original code

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

$wgAllowImageTag=true is used.

Responsive images

ok HTML:Ex:Getbootstrap.com/css/Images/Responsive images ( fork • edit original )

Responsive image

Wiki markup , original code

<img src="http://lorempixel.com/1920/1200/fashion" class="img-responsive" alt="Responsive image">

Image shapes

ok HTML:Ex:Getbootstrap.com/css/Images/Image shapes ( fork • edit original )

cats people

Wiki markup , original code

<img src="http://lorempixel.com/140/140/cats" alt="cats" class="img-rounded"> 
<img src="http://lorempixel.com/140/140/people" alt="people" class="img-circle">
<img src="http://lorempixel.com/140/140/animals" alt="animals" class="img-thumbnail">

Contextual colors

ok HTML:Ex:Getbootstrap.com/css/Helpers/Contextual colors ( fork • edit original )

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Wiki markup , original code

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Contextual backgrounds

The original line is much thicker.

ok HTML:Ex:Getbootstrap.com/css/Helpers/Contextual backgrounds ( fork • edit original )

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Wiki markup , original code

<p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Close icon

ok HTML:Ex:Getbootstrap.com/css/Helpers/Close icon/wiki ( edit • edit original • compare )

Some text×

Wiki markup , modified code

Some text<span type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></span>

original code

Some text<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Carets

ok HTML:Ex:Getbootstrap.com/css/Helpers/Carets ( fork • edit original )

Wiki markup , original code

<span class="caret"></span>

Quick floats

ok HTML:Ex:Getbootstrap.com/css/Helpers/Quick floats ( fork • edit original )

Float left

Float right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Wiki markup , original code

<div class="btn btn-default pull-left">Float left</div>
<div class="btn btn-default pull-right">Float right</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Center content blocks

ok HTML:Ex:Getbootstrap.com/css/Helpers/Center content blocks ( fork • edit original )

center block

Wiki markup , original code

<img src="http://lorempixel.com/200/140/technics" class="center-block" alt="center block">

Clearfix

no examples

Showing and hiding content

no examples

Screen reader and keyboard navigation content

no examples

Image replacement

no examples

ok HTML:Ex:Getbootstrap.com/css/Responsive utilities/Test cases ( fork • edit original )

Extra small ✔ Visible on x-small

Small ✔ Visible on small

Medium ✔ Visible on medium

Large ✔ Visible on large

Extra small and small ✔ Visible on x-small and small

Medium and large ✔ Visible on medium and large

Extra small and medium ✔ Visible on x-small and medium

Small and large ✔ Visible on small and large

Extra small and large ✔ Visible on x-small and large

Small and medium ✔ Visible on small and medium

Wiki markup , original code

<div class="row">
  <div class="col-xs-6 col-sm-3">
<span class="btn btn-default btn-lg btn-block disabled hidden-xs">Extra small</span>
<span class="btn btn-success btn-lg btn-block visible-xs-block">✔ Visible on x-small</span>
  </div>
  <div class="col-xs-6 col-sm-3">
<span class="btn btn-default btn-lg btn-block disabled hidden-sm">Small</span>
<span class="btn btn-success btn-lg btn-block visible-sm-block">✔ Visible on small</span>
  </div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-3">
<span class="btn btn-default btn-lg btn-block disabled hidden-md">Medium</span>
<span class="btn btn-success btn-lg btn-block visible-md-block">✔ Visible on medium</span>
  </div>
  <div class="col-xs-6 col-sm-3">
<span class="btn btn-default btn-lg btn-block disabled hidden-lg">Large</span>
<span class="btn btn-success btn-lg btn-block visible-lg-block">✔ Visible on large</span>
  </div>
</div>
<div class="row responsive-utilities-test visible-on">
  <div class="col-xs-6">
<span class="btn btn-default btn-lg btn-block disabled hidden-xs hidden-sm">Extra small and small</span>
<span class="btn btn-success btn-lg btn-block visible-xs-block visible-sm-block">✔ Visible on x-small and small</span>
  </div>
  <div class="col-xs-6">
<span class="btn btn-default btn-lg btn-block disabled hidden-md hidden-lg">Medium and large</span>
<span class="btn btn-success btn-lg btn-block visible-md-block visible-lg-block">✔ Visible on medium and large</span>
  </div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6">
<span class="btn btn-default btn-lg btn-block disabled hidden-xs hidden-md">Extra small and medium</span>
<span class="btn btn-success btn-lg btn-block visible-xs-block visible-md-block">✔ Visible on x-small and medium</span>
  </div>
  <div class="col-xs-6">
<span class="btn btn-default btn-lg btn-block disabled hidden-sm hidden-lg">Small and large</span>
<span class="btn btn-success btn-lg btn-block visible-sm-block visible-lg-block">✔ Visible on small and large</span>
  </div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6">
<span class="btn btn-default btn-lg btn-block disabled hidden-xs hidden-lg">Extra small and large</span>
<span class="btn btn-success btn-lg btn-block visible-xs-block visible-lg-block">✔ Visible on x-small and large</span>
  </div>
  <div class="col-xs-6">
<span class="btn btn-default btn-lg btn-block disabled hidden-sm hidden-md">Small and medium</span>
<span class="btn btn-success btn-lg btn-block visible-sm-block visible-md-block">✔ Visible on small and medium</span>
  </div>
</div>

Getbootstrap.com/css

Содержание

Grid system

Example: Stacked-to-horizontal

Example: Mobile and desktop

Example: Mobile, tablet, desktop

Example: Column wrapping

Responsive column resets

Offsetting columns

Nesting columns

Column ordering

Appendix

Typography

Heading

Body copy

Lead body copy

Inline text elements

Marked text

Deleted, strikethrough, inserted and underlined texts

Small text

Bold and italic texts

Alignment classes

Transformation classes

Abbreviations

Basic abbreviation

Initializm

Addresses

Blockquotes

Default blockquote

Blockquote options

Naming a source

Alternate displays

Lists

Unordered

Unordered (Wiki markup)

Ordered

Ordered (Wiki markup)

Unstyled

Inline

Description

Description (Wiki markup)

Horizontal description

Code

Inline

User Input

Basic block

Variables

Sample output

Tables

Basic example

Striped rows

Bordered table

Hover rows

Condensed table

Contextual classes

Responsive tables

Forms

Basic Example

Inline form

Horizontal form

Supported controls

Inputs

Textarea

Checkboxes and radios

Default (stacked)

Inline checkboxes and radios

Checkboxes and radios without label text

Selects

Static control

Focus state

Disabled state

Disabled fieldsets

Readonly state

Validation states

With optional icons

Optional icons in horizontal and inline forms

Optional icons with hidden .sr-only labels

Control sizing

Height sizing

Horizontal form group sizes