Only registered users can edit. The registration requests please send to nablawiki@gm**l.com

Getbootstrap.com/css

Материал из Chameleon Test
Перейти к:навигация, поиск

Example: Stacked-to-horizontal

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

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.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 ( forkedit original )

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.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 ( forkedit original )

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-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 ( forkedit 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 ( forkedit original )

.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.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 ( forkedit original )

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.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 ( forkedit 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 ( forkedit 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

See also Appendix

Heading

ok HTML:Ex:Getbootstrap.com/css/Typography/Heading/wiki ( editedit originalcompare )

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 ( forkedit 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 ( forkedit 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 ( forkedit 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. ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit original )

attr

Wiki markup ,   original code
<abbr title="attribute">attr</abbr>


Initializm

ok HTML:Ex:Getbootstrap.com/css/Typography/Initializm ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( editedit originalcompare )

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 ( editedit originalcompare )

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 ( forkedit 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) ( forkedit 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 ( forkedit original )

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. 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) ( forkedit original )

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. 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 ( editedit originalcompare )

  • 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 ( editedit originalcompare )

  • 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 ( forkedit 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) ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit original )

Example block-level help text here.

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) ( forkedit 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) ( forkedit 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) ( forkedit original )

$
.00
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 ( forkedit 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 ( forkedit 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 ( forkedit 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) ( forkedit original )

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 ( forkedit 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 ( forkedit 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 ( forkedit 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) ( forkedit original )

email@example.com

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) ( forkedit original )

email@example.com

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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( forkedit original )

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 ( forkedit original )

(success)
(warning)
(error)
@
(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) ( forkedit original )

(success)
@
(success)
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) ( forkedit original )

(success)
@
(success)
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 ( forkedit original )

(success)
@
(success)
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 ( editedit originalcompare )






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 ( forkedit 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 ( forkedit 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 ( forkedit 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 ( editedit originalcompare )

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 ( editedit originalcompare )

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 ( editedit originalcompare )

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 ( editedit originalcompare )

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 ( editedit originalcompare )

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 )

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 ( editedit originalcompare )

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 ( editedit originalcompare )

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.

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 ( forkedit 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 ( forkedit original )

cats people animals

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 ( forkedit 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 ( forkedit 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 ( editedit originalcompare )

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 ( forkedit original )

Wiki markup ,   original code
<span class="caret"></span>


Quick floats

ok HTML:Ex:Getbootstrap.com/css/Helpers/Quick floats ( forkedit 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 ( forkedit 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 ( forkedit original )

✔ Visible on x-small

✔ Visible on small

Medium ✔ Visible on medium

✔ Visible on large

✔ Visible on x-small and small

✔ Visible on medium and large

✔ Visible on x-small and medium

✔ Visible on small and large

✔ Visible on x-small and large

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