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

Getbootstrap.com/components

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

Available glyphs

See Glyphicons.

Examples

ok HTML:Ex:Getbootstrap.com/components/Glyphicon/Example/wiki ( editedit originalcompare )


Star
Star
Star
Star
Wiki markup ,   modified code
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <div type="button" class="btn btn-default" aria-label="Left Align">
      <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></div>
    <div type="button" class="btn btn-default" aria-label="Center Align">
      <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span></div>
    <div type="button" class="btn btn-default" aria-label="Right Align">
      <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span></div>
    <div type="button" class="btn btn-default" aria-label="Justify">
      <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></div>
  </div>
</div><br>
<div class="btn-toolbar" role="toolbar">
  <div type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</div>
  <div type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</div>
  <div type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</div>
  <div type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</div>
</div>

partial HTML:Ex:Getbootstrap.com/components/Glyphicon/Example ( forkedit original )

Отличаются от оригинала вертикальным выравниванием

Raw HTML ,   original code
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default" aria-label="Left Align">
      <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button>
    <button type="button" class="btn btn-default" aria-label="Center Align">
      <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span></button>
    <button type="button" class="btn btn-default" aria-label="Right Align">
      <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span></button>
    <button type="button" class="btn btn-default" aria-label="Justify">
      <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></button>
  </div>
</div>
<div class="btn-toolbar" role="toolbar">
  <button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
  <button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
  <button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
</div>


Во всех случаях <ul> приходилось дополнять .corr-plainlist

Examples

Example 1

mod HTML:Ex:Getbootstrap.com/components/Dropdowns/Example (1)/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<div class="dropdown">
  <div class="btn btn-default dropdown-toggle" type="button" 
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown <span class="caret"></span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li>[[#|Another action]]</li>
    <li>[[#|Something else here]]</li>
    <li>[[#|Separated link]]</li>
  </ul>
</div>

mod HTML:Ex:Getbootstrap.com/components/Dropdowns/Example (1)/html ( editedit originalcompare )

Raw HTML ,   modified code
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu corr-plainlist">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

partial HTML:Ex:Getbootstrap.com/components/Dropdowns/Example (1) ( edit )

Здесь показано, как работает без .corr-plainlist

Raw HTML ,   original code
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>


Example 2

mod HTML:Ex:Getbootstrap.com/components/Dropdowns/Example (2)/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<div class="dropup">
  <div class="btn btn-default dropdown-toggle" type="button"  
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup <span class="caret"></span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li>[[#|Another action]]</li>
    <li>[[#|Something else here]]</li>
    <li>[[#|Separated link]]</li>
  </ul>
</div>

mod HTML:Ex:Getbootstrap.com/components/Dropdowns/Example (2)/html ( editedit originalcompare )

Raw HTML ,   modified code
<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" 
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu corr-plainlist">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

original code
<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" 
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>


Aligment

Надо разбираться, в Dropup variation это работает.

no HTML:Ex:Getbootstrap.com/components/Dropdowns/Aligment/html ( editedit originalcompare )

Raw HTML ,   modified code
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu corr-plainlist dropdown-menu-right">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

no HTML:Ex:Getbootstrap.com/components/Dropdowns/Aligment ( edit )

Raw HTML ,   original code
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>


Headers, Divider, Disabled menu items

mod HTML:Ex:Getbootstrap.com/components/Dropdowns/Headers, Divider, Disabled menu items/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<div class="dropdown">
  <div class="btn btn-default dropdown-toggle" type="button"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown <span class="caret"></span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li class="disabled">[[#|Another action]]</li>
    <li class="dropdown-header">Dropdown header</li>
    <li>[[#|Something else here]]</li>
    <li class="divider"></li>
    <li>[[#|Separated link]]</li>
  </ul>
</div>

mod HTML:Ex:Getbootstrap.com/components/Dropdowns/Headers, Divider, Disabled menu items/html ( editedit originalcompare )

Raw HTML ,   modified code
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu corr-plainlist">
    <li><a href="#">Action</a></li>
    <li class="disabled"><a href="#">Another action</a></li>
    <li class="dropdown-header">Dropdown header</li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

original code
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li class="disabled"><a href="#">Another action</a></li>
    <li class="dropdown-header">Dropdown header</li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>


Basic example

ok HTML:Ex:Getbootstrap.com/components/Button group/Basic example/wiki ( editedit originalcompare )

Left
Middle
Right
Wiki markup ,   modified code
<div class="btn-group" role="group" aria-label="...">
  <div type="button" class="btn btn-default">Left</div>
  <div type="button" class="btn btn-default">Middle</div>
  <div type="button" class="btn btn-default">Right</div>
</div>

ok HTML:Ex:Getbootstrap.com/components/Button group/Basic example ( forkedit original )

Raw HTML ,   original code
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>


Button toolbar

ok HTML:Ex:Getbootstrap.com/components/Button group/Button toolbar/wiki ( editedit originalcompare )

1
2
3
4
5
6
7
8
Wiki markup ,   modified code
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <div type="button" class="btn btn-default">1</div>
    <div type="button" class="btn btn-default">2</div>
    <div type="button" class="btn btn-default">3</div>
    <div type="button" class="btn btn-default">4</div>
  </div>
  <div class="btn-group" role="group" aria-label="...">
    <div type="button" class="btn btn-default">5</div>
    <div type="button" class="btn btn-default">6</div>
    <div type="button" class="btn btn-default">7</div>
  </div>
  <div class="btn-group" role="group" aria-label="...">
    <div type="button" class="btn btn-default">8</div>
  </div>
</div>

ok HTML:Ex:Getbootstrap.com/components/Button group/Button toolbar ( forkedit original )

Raw HTML ,   original code
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
    <button type="button" class="btn btn-default">3</button>
    <button type="button" class="btn btn-default">4</button>
  </div>
  <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">5</button>
    <button type="button" class="btn btn-default">6</button>
    <button type="button" class="btn btn-default">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">8</button>
  </div>
</div>


Sizing

ok HTML:Ex:Getbootstrap.com/components/Button group/Sizing/wiki ( editedit originalcompare )

Left
Middle
Right


Left
Middle
Right


Left
Middle
Right


Left
Middle
Right
Wiki markup ,   modified code
<div class="btn-group btn-group-lg" role="group" aria-label="...">
  <div type="button" class="btn btn-default">Left</div>
  <div type="button" class="btn btn-default">Middle</div>
  <div type="button" class="btn btn-default">Right</div>
</div><br><br>
<div class="btn-group" role="group" aria-label="...">
  <div type="button" class="btn btn-default">Left</div>
  <div type="button" class="btn btn-default">Middle</div>
  <div type="button" class="btn btn-default">Right</div>
</div><br><br>
<div class="btn-group btn-group-sm" role="group" aria-label="...">
  <div type="button" class="btn btn-default">Left</div>
  <div type="button" class="btn btn-default">Middle</div>
  <div type="button" class="btn btn-default">Right</div>
</div><br><br>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
  <div type="button" class="btn btn-default">Left</div>
  <div type="button" class="btn btn-default">Middle</div>
  <div type="button" class="btn btn-default">Right</div>
</div>

ok HTML:Ex:Getbootstrap.com/components/Button group/Sizing ( forkedit original )







Raw HTML ,   original code
<div class="btn-group btn-group-lg" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div><br><br>
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div><br><br>
<div class="btn-group btn-group-sm" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div><br><br>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>


Nesting

ok HTML:Ex:Getbootstrap.com/components/Button group/Nesting/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<div class="btn-group" role="group" aria-label="...">
  <div type="button" class="btn btn-default">1</div>
  <div type="button" class="btn btn-default">2</div>
 
  <div class="btn-group" role="group">
    <div type="button" class="btn btn-default dropdown-toggle" 
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span></div>
    <ul class="dropdown-menu corr-plainlist">
      <li>[[#|Dropdown link]]</li>
      <li>[[#|Dropdown link]]</li>
    </ul>
  </div>
</div>

mod HTML:Ex:Getbootstrap.com/components/Button group/Nesting/html ( editedit originalcompare )

Raw HTML ,   modified code
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
 
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu corr-plainlist">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

original code
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
 
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>


Vertical variation

ok HTML:Ex:Getbootstrap.com/components/Button group/Vertical variation/wiki ( editedit originalcompare )

Button
Button
Button
Button
Wiki markup ,   modified code
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <div type="button" class="btn btn-default">Button</div>
  <div type="button" class="btn btn-default">Button</div>
  <div class="btn-group" role="group">
    <div id="btnGroupVerticalDrop1-wiki" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown  <span class="caret"></span></div>
    <ul class="dropdown-menu corr-plainlist" role="menu" aria-labelledby="btnGroupVerticalDrop1-wiki">
      <li>[[#|Dropdown link]]</li>
      <li>[[#|Dropdown link]]</li>
    </ul>
  </div>
  <div type="button" class="btn btn-default">Button</div>
  <div type="button" class="btn btn-default">Button</div>
  <div class="btn-group" role="group">
    <div id="btnGroupVerticalDrop2-wiki" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown  <span class="caret"></span></div>
    <ul class="dropdown-menu corr-plainlist" role="menu" aria-labelledby="btnGroupVerticalDrop2-wiki">
      <li>[[#|Dropdown link]]</li>
      <li>[[#|Dropdown link]]</li>
    </ul>
  </div>
  <div class="btn-group" role="group">
    <div id="btnGroupVerticalDrop3-wiki" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown  <span class="caret"></span></div>
    <ul class="dropdown-menu corr-plainlist" role="menu" aria-labelledby="btnGroupVerticalDrop3-wiki">
      <li>[[#|Dropdown link]]</li>
      <li>[[#|Dropdown link]]</li>
    </ul>
  </div>
  <div class="btn-group" role="group">
    <div id="btnGroupVerticalDrop4-wiki" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown  <span class="caret"></span></div>
    <ul class="dropdown-menu corr-plainlist" role="menu" aria-labelledby="btnGroupVerticalDrop4-wiki">
      <li>[[#|Dropdown link]]</li>
      <li>[[#|Dropdown link]]</li>
    </ul>
  </div>
</div>

mod HTML:Ex:Getbootstrap.com/components/Button group/Vertical variation/html ( editedit originalcompare )

Raw HTML ,   modified code
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-default">Button</button>
  <button type="button" class="btn btn-default">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1-html" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown 
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu corr-plainlist" role="menu" aria-labelledby="btnGroupVerticalDrop1-html">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
  <button type="button" class="btn btn-default">Button</button>
  <button type="button" class="btn btn-default">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop2-html" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown 
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu corr-plainlist" role="menu" aria-labelledby="btnGroupVerticalDrop2-html">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop3-html" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown 
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu corr-plainlist" role="menu" aria-labelledby="btnGroupVerticalDrop3-html">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop4-html" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown 
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu corr-plainlist" role="menu" aria-labelledby="btnGroupVerticalDrop4-html">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

original code
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-default">Button</button>
  <button type="button" class="btn btn-default">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop1-orig" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown 
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1-orig">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
  <button type="button" class="btn btn-default">Button</button>
  <button type="button" class="btn btn-default">Button</button>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop2-orig" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown 
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2-orig">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop3-orig" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown 
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3-orig">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
  <div class="btn-group" role="group">
    <button id="btnGroupVerticalDrop4-orig" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown 
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4-orig">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>


Justified button groups

ok HTML:Ex:Getbootstrap.com/components/Button group/Justified button groups/wiki ( editedit originalcompare )

Кнопки получились только дивами со вложенной ссылкой, поэтому они выглядят криво.

Wiki markup ,   modified code
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
  <div class="btn btn-default" role="button">[[#|Left]]</div >
  <div class="btn btn-default" role="button">[[#|Middle]]</div >
  <div class="btn btn-default" role="button">[[#|Right]]</div >
</div>
<br>
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
  <div class="btn btn-default" role="button">[[#|Left]]</div >
  <div class="btn btn-default" role="button">[[#|Middle]]</div >
  <div class="btn-group" role="group">
  <div class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></div>
    <ul class="dropdown-menu corr-plainlist" role="menu">
      <li>[[#|Action]]</li>
      <li>[[#|Another action]]</li>
      <li>[[#|Something else here]]</li>
      <li class="divider"></li>
      <li>[[#|Separated link]]</li>
    </ul>
  </div>
</div>

ok HTML:Ex:Getbootstrap.com/components/Button group/Justified button groups/html ( editedit originalcompare )

Raw HTML ,   modified code
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
  <a href="#" class="btn btn-default" role="button">Left</a>
  <a href="#" class="btn btn-default" role="button">Middle</a>
  <a href="#" class="btn btn-default" role="button">Right</a>
</div>
<br>
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
  <a href="#" class="btn btn-default" role="button">Left</a>
  <a href="#" class="btn btn-default" role="button">Middle</a>
  <div class="btn-group" role="group">
    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu corr-plainlist">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
</div>

original code
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
  <a href="#" class="btn btn-default" role="button">Left</a>
  <a href="#" class="btn btn-default" role="button">Middle</a>
  <a href="#" class="btn btn-default" role="button">Right</a>
</div>
<br>
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
  <a href="#" class="btn btn-default" role="button">Left</a>
  <a href="#" class="btn btn-default" role="button">Middle</a>
  <div class="btn-group" role="group">
    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
</div>


Single button dropdowns

ok HTML:Ex:Getbootstrap.com/components/Button dropdowns/Single button dropdowns/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<div class="btn-group">
  <div type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Default <span class="caret"></span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li>[[#|Another action]]</li>
    <li>[[#|Something else here]]</li>
    <li role="separator" class="divider"></li>
    <li>[[#|Separated link]]</li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <div type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Primary <span class="caret"></span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li>[[#|Another action]]</li>
    <li>[[#|Something else here]]</li>
    <li role="separator" class="divider"></li>
    <li>[[#|Separated link]]</li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <div type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Success <span class="caret"></span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li>[[#|Another action]]</li>
    <li>[[#|Something else here]]</li>
    <li role="separator" class="divider"></li>
    <li>[[#|Separated link]]</li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <div type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Info <span class="caret"></span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li>[[#|Another action]]</li>
    <li>[[#|Something else here]]</li>
    <li role="separator" class="divider"></li>
    <li>[[#|Separated link]]</li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <div type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Warning <span class="caret"></span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li>[[#|Another action]]</li>
    <li>[[#|Something else here]]</li>
    <li role="separator" class="divider"></li>
    <li>[[#|Separated link]]</li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <div type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Danger <span class="caret"></span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li>[[#|Another action]]</li>
    <li>[[#|Something else here]]</li>
    <li role="separator" class="divider"></li>
    <li>[[#|Separated link]]</li>
  </ul>
</div><!-- /btn-group -->

mod HTML:Ex:Getbootstrap.com/components/Button dropdowns/Single button dropdowns/html ( editedit originalcompare )

Raw HTML ,   modified code
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Default <span class="caret"></span></button>
  <ul class="dropdown-menu corr-plainlist">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Primary <span class="caret"></span></button>
  <ul class="dropdown-menu corr-plainlist">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Success <span class="caret"></span></button>
  <ul class="dropdown-menu corr-plainlist">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Info <span class="caret"></span></button>
  <ul class="dropdown-menu corr-plainlist">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Warning <span class="caret"></span></button>
  <ul class="dropdown-menu corr-plainlist">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Danger <span class="caret"></span></button>
  <ul class="dropdown-menu corr-plainlist">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->

original code
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Default <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Primary <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Success <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Info <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Warning <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false">Danger <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->


Split button dropdowns

ok HTML:Ex:Getbootstrap.com/components/Button dropdowns/Split button dropdowns/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<div class="btn-group">
  <div type="button" class="btn btn-default">Default</div>
  <div type="button" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li>[[#|Another action]]</li>
    <li>[[#|Something else here]]</li>
    <li role="separator" class="divider"></li>
    <li>[[#|Separated link]]</li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <div type="button" class="btn btn-primary">Primary</div>
  <div type="button" class="btn btn-primary dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li>[[#|Another action]]</li>
    <li>[[#|Something else here]]</li>
    <li role="separator" class="divider"></li>
    <li>[[#|Separated link]]</li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <div type="button" class="btn btn-success">Success</div>
  <div type="button" class="btn btn-success dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li>[[#|Another action]]</li>
    <li>[[#|Something else here]]</li>
    <li role="separator" class="divider"></li>
    <li>[[#|Separated link]]</li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <div type="button" class="btn btn-info">Info</div>
  <div type="button" class="btn btn-info dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li>[[#|Another action]]</li>
    <li>[[#|Something else here]]</li>
    <li role="separator" class="divider"></li>
    <li>[[#|Separated link]]</li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <div type="button" class="btn btn-warning">Warning</div>
  <div type="button" class="btn btn-warning dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li>[[#|Another action]]</li>
    <li>[[#|Something else here]]</li>
    <li role="separator" class="divider"></li>
    <li>[[#|Separated link]]</li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <div type="button" class="btn btn-danger">Danger</div>
  <div type="button" class="btn btn-danger dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li>[[#|Another action]]</li>
    <li>[[#|Something else here]]</li>
    <li role="separator" class="divider"></li>
    <li>[[#|Separated link]]</li>
  </ul>
</div><!-- /btn-group -->

mod HTML:Ex:Getbootstrap.com/components/Button dropdowns/Split button dropdowns/html ( editedit originalcompare )

Raw HTML ,   modified code
<div class="btn-group">
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu corr-plainlist">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-primary dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu corr-plainlist">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-success dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu corr-plainlist">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-info dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu corr-plainlist">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-warning dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu corr-plainlist">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-danger dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu corr-plainlist">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->

original code
<div class="btn-group">
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-primary dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-success dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-info dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-warning dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-danger dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div><!-- /btn-group -->


Sizing

ok HTML:Ex:Getbootstrap.com/components/Button dropdowns/Sizing/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <div class="btn btn-default btn-lg dropdown-toggle"
        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span></div>
    <ul class="dropdown-menu corr-plainlist">
      <li>[[#|Action]]</li>
      <li>[[#|Another action]]</li>
      <li>[[#|Something else here]]</li>
      <li role="separator" class="divider"></li>
      <li>[[#|Separated link]]</li>
    </ul>
  </div><!-- /btn-group -->
</div><!-- /btn-toolbar --><br>
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <div class="btn btn-default btn-lg dropdown-toggle"
        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Regular button <span class="caret"></span></div>
    <ul class="dropdown-menu corr-plainlist">
      <li>[[#|Action]]</li>
      <li>[[#|Another action]]</li>
      <li>[[#|Something else here]]</li>
      <li role="separator" class="divider"></li>
      <li>[[#|Separated link]]</li>
    </ul>
  </div><!-- /btn-group -->
</div><!-- /btn-toolbar --><br>
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <div class="btn btn-default btn-sm dropdown-toggle"
        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span></div>
    <ul class="dropdown-menu corr-plainlist">
      <li>[[#|Action]]</li>
      <li>[[#|Another action]]</li>
      <li>[[#|Something else here]]</li>
      <li role="separator" class="divider"></li>
      <li>[[#|Separated link]]</li>
    </ul>
  </div><!-- /btn-group -->
</div><!-- /btn-toolbar --><br>
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <div class="btn btn-default btn-xs dropdown-toggle"
        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span></div>
    <ul class="dropdown-menu corr-plainlist">
      <li>[[#|Action]]</li>
      <li>[[#|Another action]]</li>
      <li>[[#|Something else here]]</li>
      <li role="separator" class="divider"></li>
      <li>[[#|Separated link]]</li>
    </ul>
  </div><!-- /btn-group -->
</div><!-- /btn-toolbar -->

mod HTML:Ex:Getbootstrap.com/components/Button dropdowns/Sizing/html ( editedit originalcompare )

Raw HTML ,   modified code
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-default btn-lg dropdown-toggle"
        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Large button <span class="caret"></span>
    </button>
    <ul class="dropdown-menu corr-plainlist">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<br>
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-default dropdown-toggle"
        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Regular button <span class="caret"></span>
    </button>
    <ul class="dropdown-menu corr-plainlist">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<br>
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-default btn-sm dropdown-toggle"
        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Small button <span class="caret"></span>
    </button>
    <ul class="dropdown-menu corr-plainlist">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<br>
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-default btn-xs dropdown-toggle"
        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Extra small button <span class="caret"></span>
    </button>
    <ul class="dropdown-menu corr-plainlist">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
</div><!-- /btn-toolbar -->

original code
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-default btn-lg dropdown-toggle"
        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Large button <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-default dropdown-toggle"
        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Regular button <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-default btn-sm dropdown-toggle"
        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Small button <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-default btn-xs dropdown-toggle"
        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Extra small button <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
</div><!-- /btn-toolbar -->


Dropup variation

ok HTML:Ex:Getbootstrap.com/components/Button dropdowns/Dropup variation/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group dropup">
    <div type="button" class="btn btn-default">Dropup</div>
    <div type="button" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></div>
    <ul class="dropdown-menu corr-plainlist">
      <li>[[#|Action]]</li>
      <li>[[#|Another action]]</li>
      <li>[[#|Something else here]]</li>
      <li role="separator" class="divider"></li>
      <li>[[#|Separated link]]</li>
    </ul>
  </div><!-- /btn-group -->
  <div class="btn-group dropup">
    <div type="button" class="btn btn-primary">Right dropup</div>
    <div type="button" class="btn btn-primary dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span><span class="sr-only">Toggle Dropdown</span></div>
    <ul class="dropdown-menu corr-plainlist dropdown-menu-right">
      <li>[[#|Action]]</li>
      <li>[[#|Another action]]</li>
      <li>[[#|Something else here]]</li>
      <li role="separator" class="divider"></li>
      <li>[[#|Separated link]]</li>
    </ul>
  </div><!-- /btn-group -->
</div>

mod HTML:Ex:Getbootstrap.com/components/Button dropdowns/Dropup variation/html ( editedit originalcompare )

Raw HTML ,   modified code
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group dropup">
    <button type="button" class="btn btn-default">Dropup</button>
    <button type="button" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu corr-plainlist">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
  <div class="btn-group dropup">
    <button type="button" class="btn btn-primary">Right dropup</button>
    <button type="button" class="btn btn-primary dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu corr-plainlist dropdown-menu-right">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
</div>

original code
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group dropup">
    <button type="button" class="btn btn-default">Dropup</button>
    <button type="button" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
  <div class="btn-group dropup">
    <button type="button" class="btn btn-primary">Right dropup</button>
    <button type="button" class="btn btn-primary dropdown-toggle"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
</div>


Basic example

ok HTML:Ex:Getbootstrap.com/components/Input group/Basic example ( forkedit original )

@

@example.com

$ .00
Raw HTML ,   original code
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<br>
<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>


Sizing

ok HTML:Ex:Getbootstrap.com/components/Input group/Sizing ( forkedit original )

@

@

@
Raw HTML ,   original code
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1-html">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1-html">
</div>
<br>
<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2-html">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2-html">
</div>
<br>
<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3-html">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3-html">
</div>

Checkbox and radios addons

ok HTML:Ex:Getbootstrap.com/components/Input group/Checkbox and radios addons ( forkedit original )

Raw HTML ,   original code
<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Button addons

ok HTML:Ex:Getbootstrap.com/components/Input group/Button addons ( forkedit original )

Raw HTML ,   original code
<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Buttons with dropdowns

ok HTML:Ex:Getbootstrap.com/components/Input group/Buttons with dropdowns/html ( editedit originalcompare )

Raw HTML ,   modified code
<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu corr-plainlist">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu corr-plainlist dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Segmented buttons

ok HTML:Ex:Getbootstrap.com/components/Input group/Segmented buttons/html ( editedit originalcompare )

Raw HTML ,   modified code
<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">Action</button>
        <button type="button" class="btn btn-default dropdown-toggle" 
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu corr-plainlist">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
      <input class="form-control" aria-label="Text input with segmented button dropdown" type="text">
    </div><!-- /.input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input class="form-control" aria-label="Text input with segmented button dropdown" type="text">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">Action</button>
        <button type="button" class="btn btn-default dropdown-toggle" 
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu corr-plainlist dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
    </div><!-- /.input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->


Все примеры требуют .corr-plainlist

Tabs

mod HTML:Ex:Getbootstrap.com/components/Navs/Tabs/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<ul class="nav nav-tabs corr-plainlist">
  <li role="presentation" class="active">[[#|Home]]</li>
  <li role="presentation">[[#|Profile]]</li>
  <li role="presentation">[[#|Messages]]</li>
</ul>

mod HTML:Ex:Getbootstrap.com/components/Navs/Tabs/html ( editedit originalcompare )

Raw HTML ,   modified code
<ul class="nav nav-tabs corr-plainlist">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>


Pills

Vertical pills

mod HTML:Ex:Getbootstrap.com/components/Navs/Vertical pills/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<ul class="nav nav-pills nav-stacked corr-plainlist">
  <li role="presentation" class="active">[[#|Home]]</li>
  <li role="presentation">[[#|Profile]]</li>
  <li role="presentation">[[#|Messages]]</li>
</ul>

mod HTML:Ex:Getbootstrap.com/components/Navs/Vertical pills/html ( editedit originalcompare )

Raw HTML ,   modified code
<ul class="nav nav-pills nav-stacked corr-plainlist">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>


Justified

mod HTML:Ex:Getbootstrap.com/components/Navs/Justified/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<ul class="nav nav-tabs nav-justified corr-plainlist">
  <li role="presentation" class="active">[[#|Home]]</li>
  <li role="presentation">[[#|Profile]]</li>
  <li role="presentation">[[#|Messages]]</li>
</ul>
<br>
<ul class="nav nav-pills nav-justified corr-plainlist">
  <li role="presentation" class="active">[[#|Home]]</li>
  <li role="presentation">[[#|Profile]]</li>
  <li role="presentation">[[#|Messages]]</li>
</ul>

mod HTML:Ex:Getbootstrap.com/components/Navs/Justified/html ( editedit originalcompare )

Raw HTML ,   modified code
<ul class="nav nav-tabs nav-justified corr-plainlist">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>
<br>
<ul class="nav nav-pills nav-justified corr-plainlist">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>


Disabled links

mod HTML:Ex:Getbootstrap.com/components/Navs/Disabled links/wiki ( editedit originalcompare )

mod HTML:Ex:Getbootstrap.com/components/Navs/Disabled links/html ( editedit originalcompare )


Using dropdowns

Вики-разметка не далась

Tabs with dropdowns

mod HTML:Ex:Getbootstrap.com/components/Navs/Tabs with dropdowns/html ( editedit originalcompare )

Raw HTML ,   modified code
<ul class="nav nav-tabs corr-plainlist">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Help</a></li>
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu corr-plainlist">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
</ul>


Pills with dropdowns

mod HTML:Ex:Getbootstrap.com/components/Navs/Pills with dropdowns/html ( editedit originalcompare )

Raw HTML ,   modified code
<ul class="nav nav-pills corr-plainlist">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Help</a></li>
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu corr-plainlist">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
</ul>


Все выглядит не совсем так. Основные проблемы с Brand, но и другие элементы сдвинуты

Default navbar

partial HTML:Ex:Getbootstrap.com/components/Navbar/Default navbar/html ( editedit originalcompare )

Raw HTML ,   modified code
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1-html" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
 
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1-html">
      <ul class="nav navbar-nav corr-plainlist">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown corr-plainlist">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu corr-plainlist">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right corr-plainlist">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu corr-plainlist">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

original code
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1-orig" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
 
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1-orig">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


Brand image

partial HTML:Ex:Getbootstrap.com/components/Navbar/Brand image ( forkedit original )

Raw HTML ,   original code
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="/resources/assets/wiki.png">
      </a>
    </div>
  </div>
</nav>


Forms

ok HTML:Ex:Getbootstrap.com/components/Navbar/Forms ( forkedit original )

Raw HTML ,   original code
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-2-html" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2-html">
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input class="form-control" placeholder="Search" type="text">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
</nav>


Buttons

ok HTML:Ex:Getbootstrap.com/components/Navbar/Buttons ( forkedit original )

Raw HTML ,   original code
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3-html" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3-html">
      <button type="button" class="btn btn-default navbar-btn">Sign in</button>
    </div>
  </div>
</nav>


Text

ok HTML:Ex:Getbootstrap.com/components/Navbar/Text ( forkedit original )

Raw HTML ,   original code
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4-html" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4-html">
      <p class="navbar-text">Signed in as Mark Otto</p>
    </div>
  </div>
</nav>


Non-nav links

ok HTML:Ex:Getbootstrap.com/components/Navbar/Non-nav links ( forkedit original )


Component alignment

No examples

Fixed to top

  • Собственно фиксация закомментирована, т.к. и вправду улетает в верх экрана (на всю его ширину)
  • всегда на полную ширину, не зависит от .container или .container-fluid
  • Непонятно, нужен ли .corr-plainlist, оба варианта лишь приблизительны

partial HTML:Ex:Getbootstrap.com/components/Navbar/Fixed to top/html ( editedit originalcompare )

Raw HTML ,   modified code
<nav class="navbar navbar-default <!-- navbar-fixed-top -->"> 
  <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-6-html" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6-html">
      <ul class="nav navbar-nav corr-plainlist">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</nav>

original code
<nav class="navbar navbar-default navbar-fixed-top">
  <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-6-orig" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6-orig">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</nav>


Fixed to bottom

аналогично top

partial HTML:Ex:Getbootstrap.com/components/Navbar/Fixed to bottom/html ( editedit originalcompare )

Raw HTML ,   modified code
<nav class="navbar navbar-default <!-- navbar-fixed-bottom -->">
  <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-7-html" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-7-html">
      <ul class="nav navbar-nav corr-plainlist">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</nav>

original code
<nav class="navbar navbar-default navbar-fixed-bottom">
  <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-7-orig" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-7-orig">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</nav>


Static top

  • Действие не обнаружено

no HTML:Ex:Getbootstrap.com/components/Navbar/Static top ( forkedit original )

Raw HTML ,   original code
<nav class="navbar navbar-default navbar-static-top">
  <!-- We use the fluid option here to avoid overriding the fixed width of a normal container 
      within the narrow content columns. -->
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-8-html" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
 
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8-html">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</nav>


Inverted navbar

ok HTML:Ex:Getbootstrap.com/components/Navbar/Inverted navbar ( forkedit original )

Raw HTML ,   original code
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-9-html" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
 
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9-html">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


Examples

ok HTML:Ex:Getbootstrap.com/components/Breadcrumbs/Examples/wiki ( editedit originalcompare )



Wiki markup ,   modified code
<ol class="breadcrumb">
  <li class="active">Home</li>
</ol><br>
<ol class="breadcrumb">
  <li>[[#|Home]]</li>
  <li class="active">Library</li>
</ol><br>
<ol class="breadcrumb">
  <li>[[#|Home]]</li>
  <li>[[#|Library]]</li>
  <li class="active">Data</li>
</ol>

ok HTML:Ex:Getbootstrap.com/components/Breadcrumbs/Examples ( forkedit original )



Raw HTML ,   original code
<ol class="breadcrumb">
  <li class="active">Home</li>
</ol><br>
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li class="active">Library</li>
</ol><br>
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>


Default pagination

mod HTML:Ex:Getbootstrap.com/components/Pagination/Default pagination/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<div class="nav"><!-- был nav, непонятно, нужен ли класс -->
  <ul class="pagination corr-plainlist">
    <li>
      [[#|<span aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </span>]]
    </li>
    <li>[[#|1]]</li>
    <li>[[#|2]]</li>
    <li>[[#|3]]</li>
    <li>[[#|4]]</li>
    <li>[[#|5]]</li>
    <li>
      [[#|<span aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </span>]]
    </li>
  </ul>
</div>

mod HTML:Ex:Getbootstrap.com/components/Pagination/Default pagination/html ( editedit originalcompare )

Raw HTML ,   modified code
<nav>
  <ul class="pagination corr-plainlist">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>


Disabled and active states

mod HTML:Ex:Getbootstrap.com/components/Pagination/Disabled and active states/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<div>
  <ul class="pagination corr-plainlist">
    <li class="disabled">
      [[#|<span aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </span>]]
    </li>
    <li class="active">[[#|1]]</li>
    <li>[[#|2]]</li>
    <li>[[#|3]]</li>
    <li>[[#|4]]</li>
    <li>[[#|5]]</li>
    <li>
      [[#|<span aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </span>]]
    </li>
  </ul>
</div>

mod HTML:Ex:Getbootstrap.com/components/Pagination/Disabled and active states/html ( editedit originalcompare )

Raw HTML ,   modified code
<nav>
  <ul class="pagination corr-plainlist">
    <li class="disabled">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>


Sizing

mod HTML:Ex:Getbootstrap.com/components/Pagination/Sizing/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<div>
  <ul class="pagination pagination-lg corr-plainlist">
    <li>
      [[#|<span aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </span>]]
    </li>
    <li>[[#|1]]</li>
    <li>[[#|2]]</li>
    <li>[[#|3]]</li>
    <li>[[#|4]]</li>
    <li>[[#|5]]</li>
    <li>
      [[#|<span aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </span>]]
    </li>
  </ul>
</div><br>
<div class="nav"><!-- был nav, непонятно, нужен ли класс -->
  <ul class="pagination corr-plainlist">
    <li>
      [[#|<span aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </span>]]
    </li>
    <li>[[#|1]]</li>
    <li>[[#|2]]</li>
    <li>[[#|3]]</li>
    <li>[[#|4]]</li>
    <li>[[#|5]]</li>
    <li>
      [[#|<span aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </span>]]
    </li>
  </ul>
</div><br>
<div class="nav"><!-- был nav, непонятно, нужен ли класс -->
  <ul class="pagination pagination-sm corr-plainlist">
    <li>
      [[#|<span aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </span>]]
    </li>
    <li>[[#|1]]</li>
    <li>[[#|2]]</li>
    <li>[[#|3]]</li>
    <li>[[#|4]]</li>
    <li>[[#|5]]</li>
    <li>
      [[#|<span aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </span>]]
    </li>
  </ul>
</div>

mod HTML:Ex:Getbootstrap.com/components/Pagination/Sizing/html ( editedit originalcompare )

Raw HTML ,   modified code
<nav>
  <ul class="pagination pagination-lg corr-plainlist">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav><br>
<nav>
  <ul class="pagination corr-plainlist">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav><br>
<nav>
  <ul class="pagination pagination-sm corr-plainlist">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>


Pager

Default example

ul HTML:Ex:Getbootstrap.com/components/Pagination/Default example/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<div>
  <ul class="pager corr-plainlist">
    <li>[[#|Previous]]</li>
    <li>[[#|Next]]</li>
  </ul>
</div>

ul HTML:Ex:Getbootstrap.com/components/Pagination/Default example/html ( editedit originalcompare )

Raw HTML ,   modified code
<nav>
  <ul class="pager corr-plainlist">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>


Aligned links

ul HTML:Ex:Getbootstrap.com/components/Pagination/Aligned links/wiki ( editedit originalcompare )

ul HTML:Ex:Getbootstrap.com/components/Pagination/Aligned links/html ( editedit originalcompare )


Optional disabled state

ul HTML:Ex:Getbootstrap.com/components/Pagination/Optional disabled state/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<div>
  <ul class="pager corr-plainlist">
    <li class="previous disabled">[[#|<span aria-hidden="true">&larr;</span> Older]]</li>
    <li class="next"><[[#|Newer <span aria-hidden="true">&rarr;</span>]]</li>
  </ul>
</div>

ul HTML:Ex:Getbootstrap.com/components/Pagination/Optional disabled state/html ( editedit originalcompare )

Raw HTML ,   modified code
<nav>
  <ul class="pager corr-plainlist">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>


Example

ok HTML:Ex:Getbootstrap.com/components/Labels/Example ( forkedit original )

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Wiki markup ,   original code
<p class="h1">Example heading <span class="label label-default">New</span></p>
<p class="h2">Example heading <span class="label label-default">New</span></p>
<p class="h3">Example heading <span class="label label-default">New</span></p>
<p class="h4">Example heading <span class="label label-default">New</span></p>
<p class="h5">Example heading <span class="label label-default">New</span></p>
<p class="h6">Example heading <span class="label label-default">New</span></p>


Available variations

ok HTML:Ex:Getbootstrap.com/components/Labels/Available variations ( forkedit original )

Default Primary Success Info Warning Danger

Wiki markup ,   original code
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>


Examples

ok HTML:Ex:Getbootstrap.com/components/Badges/Examples/wiki ( editedit originalcompare )

Inbox 42

Messages 4


Wiki markup ,   modified code
[[#|Inbox <span class="badge">42</span>]]<br><br>
<div class="btn btn-primary" type="button">
Messages <span class="badge">4</span></div><br><br>

ok HTML:Ex:Getbootstrap.com/components/Badges/Examples ( forkedit original )

Inbox 42

Raw HTML ,   original code
<a href="#">Inbox <span class="badge">42</span></a><br><br>
<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>


Adapts to active nav states

ul HTML:Ex:Getbootstrap.com/components/Badges/Adapts to active nav states/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<ul class="nav nav-pills corr-plainlist" role="tablist">
  <li role="presentation" class="active">[[#|Home <span class="badge">42</span>]]</li>
  <li role="presentation">[[#|Profile]]</li>
  <li role="presentation">[[#|Messages <span class="badge">3</span>]]</li>
</ul>

ul HTML:Ex:Getbootstrap.com/components/Badges/Adapts to active nav states/html ( editedit originalcompare )

Raw HTML ,   modified code
<ul class="nav nav-pills corr-plainlist" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>


Examples

проблема цвета ссылок и цвета primary button

ok HTML:Ex:Getbootstrap.com/components/Jumbotron/Examples/wiki ( editedit originalcompare )

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Wiki markup ,   modified code
<div class="jumbotron">
  <p class=h1>Hello, world!</p>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p>[[#|<span class="btn btn-primary btn-lg" href="#" role="button">Learn more</span>]]</p>
</div>

partial HTML:Ex:Getbootstrap.com/components/Jumbotron/Examples ( forkedit original )

проблема цвета ссылок и цвета primary button

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Raw HTML ,   original code
<div class="jumbotron">
  <p class="h1">Hello, world!</p>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>


Examples

ok HTML:Ex:Getbootstrap.com/components/Page header/Examples ( forkedit original )

Wiki markup ,   original code
<div class="page-header">
  <p class="h1">Example page header <small>Subtext for header</small></p>
</div>


Default example

ok HTML:Ex:Getbootstrap.com/components/Thumbnails/Default example/wiki ( editedit originalcompare )

thumbnail

thumbnail

thumbnail

thumbnail

Wiki markup ,   modified code
<div class="row">
  <div class="col-xs-6 col-md-3">
[[#|<span class="thumbnail"><img src="http://lorempixel.com/1024/768/abstract" alt="thumbnail"></span>]]
  </div>
  <div class="col-xs-6 col-md-3">
[[#|<span class="thumbnail"><img src="http://lorempixel.com/1024/768/nature" alt="thumbnail"></span>]]
  </div>
  <div class="col-xs-6 col-md-3">
[[#|<span class="thumbnail"><img src="http://lorempixel.com/1024/768/food" alt="thumbnail"></span>]]
  </div>
  <div class="col-xs-6 col-md-3">
[[#|<span class="thumbnail"><img src="http://lorempixel.com/1024/768/city" alt="thumbnail"></span>]]
  </div>
</div>

ok HTML:Ex:Getbootstrap.com/components/Thumbnails/Default example ( forkedit original )

Raw HTML ,   original code
<div class="row">
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="http://lorempixel.com/1024/768/abstract"  alt="thumbnail">
        </a>
      </div>
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="http://lorempixel.com/1024/768/nature"  alt="thumbnail">
        </a>
      </div>
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="http://lorempixel.com/1024/768/food"  alt="thumbnail">
        </a>
      </div>
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="http://lorempixel.com/1024/768/city"  alt="thumbnail">
        </a>
      </div>
</div>


Custom content

mod HTML:Ex:Getbootstrap.com/components/Thumbnails/Custom content/wiki ( editedit originalcompare )

Thumbnail

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Wiki markup ,   modified code
<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
<img src="http://lorempixel.com/1024/1024/business" class="img-responsive" alt="Thumbnail">
      <div class="caption">
        <p class="h3">Thumbnail label</p>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p>[[#|<span class="btn btn-primary" role="button">Button</span>]] [[#|<span class="btn btn-default" role="button">Button</span>]]</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
<img src="http://lorempixel.com/1024/1024/nightlife" class="img-responsive" alt="Thumbnail">
      <div class="caption">
        <p class="h3">Thumbnail label</p>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p>[[#|<span class="btn btn-primary" role="button">Button</span>]] [[#|<span class="btn btn-default" role="button">Button</span>]]</p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
<img src="http://lorempixel.com/1024/1024/transport" class="img-responsive" alt="Thumbnail">
      <div class="caption">
        <p class="h3">Thumbnail label</p>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p>[[#|<span class="btn btn-primary" role="button">Button</span>]] [[#|<span class="btn btn-default" role="button">Button</span>]]</p>
      </div>
    </div>
  </div>
</div>

partial HTML:Ex:Getbootstrap.com/components/Thumbnails/Custom content ( forkedit original )

primary-button with link

Thumbnail

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Raw HTML ,   original code
<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="http://lorempixel.com/1024/1024/business" alt="Thumbnail">
      <div class="caption">
        <p class="h3">Thumbnail label</p>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="http://lorempixel.com/1024/1024/nightlife" alt="Thumbnail">
      <div class="caption">
        <p class="h3">Thumbnail label</p>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="http://lorempixel.com/1024/1024/transport" alt="Thumbnail">
      <div class="caption">
        <p class="h3">Thumbnail label</p>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>


Examples

ok HTML:Ex:Getbootstrap.com/components/Alerts/Examples ( forkedit original )

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Wiki markup ,   original code
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message. </div>
<div class="alert alert-info" role="alert"><strong>Heads up!</strong> This alert needs your attention, but it's not super important.</div>
<div class="alert alert-warning" role="alert"><strong>Warning!</strong> Better check yourself, you're not looking too good. </div>
<div class="alert alert-danger" role="alert"><strong>Oh snap!</strong> Change a few things up and try submitting again.</div>


Dismissible alerts

ok HTML:Ex:Getbootstrap.com/components/Alerts/Dismissible alerts/wiki ( editedit originalcompare )

×

Warning! Better check yourself, you're not looking too good.

Wiki markup ,   modified code
<div class="alert alert-warning alert-dismissible" role="alert">
  <div type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></div>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

ok HTML:Ex:Getbootstrap.com/components/Alerts/Dismissible alerts ( forkedit original )

Raw HTML ,   original code
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>


Links in alerts

ok HTML:Ex:Getbootstrap.com/components/Alerts/Links in alerts/wiki ( editedit originalcompare )

ok HTML:Ex:Getbootstrap.com/components/Alerts/Links in alerts ( forkedit original )

Basic example

ok HTML:Ex:Getbootstrap.com/components/Progress bars/Basic example/wiki ( editedit originalcompare )

60% Complete

Wiki markup ,   modified code
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
  </div>
</div>


With label

ok HTML:Ex:Getbootstrap.com/components/Progress bars/With label/wiki ( editedit originalcompare )

60%

0%

2%

Wiki markup ,   modified code
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
  </div>
</div>


Contextual alternatives

ok HTML:Ex:Getbootstrap.com/components/Progress bars/Contextual alternatives/wiki ( editedit originalcompare )

40% Complete (success)

20% Complete

60% Complete (warning)

80% Complete (danger)

Wiki markup ,   modified code
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
  </div>
</div>


Striped

ok HTML:Ex:Getbootstrap.com/components/Progress bars/Striped/wiki ( editedit originalcompare )

40% Complete (success)

20% Complete

60% Complete (warning)

80% Complete (danger)

Wiki markup ,   modified code
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
  </div>
</div>


Animated

ok HTML:Ex:Getbootstrap.com/components/Progress bars/Animated/wiki ( editedit originalcompare )

45% Complete

Wiki markup ,   modified code
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
  </div>
</div>


Stacked

ok HTML:Ex:Getbootstrap.com/components/Progress bars/Stacked/wiki ( editedit originalcompare )

35% Complete (success)

20% Complete (warning)

10% Complete (danger)

Wiki markup ,   modified code
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Default media

ok HTML:Ex:Getbootstrap.com/components/Media object/Default media/wiki ( editedit originalcompare )

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Wiki markup ,   modified code
<div class="media">
  <div class="media-left">
[[#|
<img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
]]
  </div>
  <div class="media-body">
    <p class="h4 media-heading">Media heading</p>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>
<div class="media">
  <div class="media-left">
[[#|
<img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
]]
  </div>
  <div class="media-body">
    <p class="h4 media-heading">Media heading</p>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    <div class="media">
      <div class="media-left">
[[#|
<img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
]]
      </div>
      <div class="media-body">
        <p class="h4 media-heading">Nested media heading</p>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>
<div class="media">
  <div class="media-body">
    <p class="h4 media-heading">Media heading</p>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  </div>
  <div class="media-right">
[[#|
<img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
]]
  </div>
</div>
<div class="media">
  <div class="media-left">
[[#|
<img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
]]
  </div>
  <div class="media-body">
    <p class="h4 media-heading">Media heading</p>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  </div>
  <div class="media-right">
[[#|
<img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
]]
  </div>
</div>

ok HTML:Ex:Getbootstrap.com/components/Media object/Default media ( forkedit original )

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Raw HTML ,   original code
<div class="media">
  <div class="media-left">
    <a href="#">
      <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
    </a>
  </div>
  <div class="media-body">
    <p class="h4 media-heading">Media heading</p>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 
    Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
    </a>
  </div>
  <div class="media-body">
    <p class="h4 media-heading">Media heading</p>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 
    Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    <div class="media">
      <div class="media-left">
        <a href="#">
          <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
        </a>
      </div>
      <div class="media-body">
        <p class="h4 media-heading">Nested media heading</p>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 
        Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>
<div class="media">
  <div class="media-body">
    <p class="h4 media-heading">Media heading</p>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  </div>
  <div class="media-right">
    <a href="#">
      <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
    </a>
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
    </a>
  </div>
  <div class="media-body">
    <p class="h4 media-heading">Media heading</p>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  </div>
  <div class="media-right">
    <a href="#">
      <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
    </a>
  </div>
</div>


Media alignment

ok HTML:Ex:Getbootstrap.com/components/Media object/Media alignment/wiki ( editedit originalcompare )

Top aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Middle aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Bottom aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Wiki markup ,   modified code
<div class="media">
  <div class="media-left">
[[#|
<img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
]]
  </div>
  <div class="media-body">
    <p class="h4 media-heading">Top aligned media</p>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. 
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
<div class="media">
  <div class="media-left media-middle">
[[#|
<img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
]]
  </div>
  <div class="media-body">
    <p class="h4 media-heading">Middle aligned media</p>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. 
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
<div class="media">
  <div class="media-left media-bottom">
[[#|
<img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
]]
  </div>
  <div class="media-body">
    <p class="h4 media-heading">Bottom aligned media</p>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. 
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

ok HTML:Ex:Getbootstrap.com/components/Media object/Media alignment ( forkedit original )

Top aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Middle aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Bottom aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Raw HTML ,   original code
<div class="media">
  <div class="media-left">
    <a href="#">
      <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
    </a>
  </div>
  <div class="media-body">
    <p class="h4 media-heading">Top aligned media</p>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 
    Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. 
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
    </a>
  </div>
  <div class="media-body">
    <p class="h4 media-heading">Middle aligned media</p>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 
    Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. 
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
<div class="media">
  <div class="media-left media-bottom">
    <a href="#">
      <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
    </a>
  </div>
  <div class="media-body">
    <p class="h4 media-heading">Bottom aligned media</p>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 
    Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. 
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>


Media list

ul HTML:Ex:Getbootstrap.com/components/Media object/Media list/wiki ( editedit originalcompare )

  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Wiki markup ,   modified code
<ul class="media-list corr-plainlist">
  <li class="media">
    <div class="media-left">
[[#|
<img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
]]
    </div>
    <div class="media-body">
      <p class="h4 media-heading">Media heading</p>
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
      <!-- Nested media object -->
      <div class="media">
        <div class="media-left">
[[#|
<img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
]]
        </div>
        <div class="media-body">
          <p class="h4 media-heading">Nested media heading</p>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
          <!-- Nested media object -->
          <div class="media">
            <div class="media-left">
[[#|
<img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
]]
            </div>
            <div class="media-body">
              <p class="h4 media-heading">Nested media heading</p>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
            </div>
          </div>
        </div>
      </div>
      <!-- Nested media object -->
      <div class="media">
        <div class="media-left">
[[#|
<img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
]]
        </div>
        <div class="media-body">
          <p class="h4 media-heading">Nested media heading</p>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
        </div>
      </div>
    </div>
  </li>
</ul>

ul HTML:Ex:Getbootstrap.com/components/Media object/Media list/html ( editedit originalcompare )

  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Raw HTML ,   modified code
<ul class="media-list corr-plainlist">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
      Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
      <!-- Nested media object -->
      <div class="media">
        <div class="media-left">
          <a href="#">
            <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">Nested media heading</h4>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
          Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
          <!-- Nested media object -->
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Nested media heading</h4>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
              Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
            </div>
          </div>
        </div>
      </div>
      <!-- Nested media object -->
      <div class="media">
        <div class="media-left">
          <a href="#">
            <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">Nested media heading</h4>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
          Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
        </div>
      </div>
    </div>
  </li>
</ul>

original code
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
      Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
      <!-- Nested media object -->
      <div class="media">
        <div class="media-left">
          <a href="#">
            <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">Nested media heading</h4>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
          Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
          <!-- Nested media object -->
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Nested media heading</h4>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
              Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
            </div>
          </div>
        </div>
      </div>
      <!-- Nested media object -->
      <div class="media">
        <div class="media-left">
          <a href="#">
            <img src="http://dummyimage.com/64x64.png" class="media-object" alt="64x64">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">Nested media heading</h4>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 
          Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
        </div>
      </div>
    </div>
  </li>
</ul>


Basic example

ul HTML:Ex:Getbootstrap.com/components/List group/Basic example/wiki ( editedit originalcompare )

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
Wiki markup ,   modified code
<div class="row">
  <ul class="list-group corr-plainlist col-md-6"><!-- col-md-6 просто для компактности -->
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>


Badges

ul HTML:Ex:Getbootstrap.com/components/List group/Badges/wiki ( editedit originalcompare )

  • 14Cras justo odio
  • 2Dapibus ac facilisis in
  • 1Morbi leo risus
Wiki markup ,   modified code
<div class="row">
  <ul class="list-group corr-plainlist col-md-6"><!-- col-md-6 просто для компактности -->
    <li class="list-group-item"><span class="badge">14</span>Cras justo odio</li>
    <li class="list-group-item"><span class="badge">2</span>Dapibus ac facilisis in</li>
    <li class="list-group-item"><span class="badge">1</span>Morbi leo risus</li>
  </ul>
</div>


Linked items, Disabled Items

no HTML:Ex:Getbootstrap.com/components/List group/Linked items, Disabled Items ( forkedit original )

не работает в принципе

Wiki markup ,   original code

ok HTML:Ex:Getbootstrap.com/components/List group/Linked items, Disabled Items ( forkedit original )

Raw HTML ,   original code
<div class="row">
  <div class="col-md-6"><!-- col-md-6 просто для компактности, совместить со след. нельзя-->
    <div class="list-group">
      <a href="#" class="list-group-item active">
        Cras justo odio
      </a>
      <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item">Morbi leo risus</a>
      <a href="#" class="list-group-item">Porta ac consectetur ac</a>
      <a href="#" class="list-group-item">Vestibulum at eros</a>
    </div>
  </div>
</div>


Contextual classes

partial HTML:Ex:Getbootstrap.com/components/List group/Contextual classes/wiki ( editedit originalcompare )

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

Linked items не работают

Wiki markup ,   modified code
<div class="row">
  <div class="col-md-6">
    <ul class="list-group corr-plainlist">
      <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
      <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
      <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
    </ul>
  </div>
  <div class="col-md-6">
Linked items не работают
  </div>
</div>

ul HTML:Ex:Getbootstrap.com/components/List group/Contextual classes/html ( editedit originalcompare )

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros
Raw HTML ,   modified code
<div class="row">
  <div class="col-md-6">
    <ul class="list-group corr-plainlist">
      <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
      <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
      <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
    </ul>
  </div>
  <div class="col-md-6">
    <div class="list-group corr-plainlist">
      <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
      <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
      <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
    </div>
  </div>
</div>

original code
<div class="row">
  <div class="col-md-6">
    <ul class="list-group">
      <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
      <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
      <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
    </ul>
  </div>
  <div class="col-md-6">
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
      <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
      <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
    </div>
  </div>
</div>


Custom content

ok HTML:Ex:Getbootstrap.com/components/List group/Custom content ( forkedit original )

Raw HTML ,   original code
<div class="row">
  <div class="col-md-6"><!-- col-md-6 просто для компактности -->
    <div class="list-group">
      <a href="#" class="list-group-item active">
        <p class="h4 list-group-item-heading">List group item heading</p>
        <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. 
        Maecenas sed diam eget risus varius blandit.</p>
      </a>
      <a href="#" class="list-group-item">
        <p class="h4 list-group-item-heading">List group item heading</p>
        <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. 
        Maecenas sed diam eget risus varius blandit.</p>
      </a>
      <a href="#" class="list-group-item">
        <p class="h4 list-group-item-heading">List group item heading</p>
        <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. 
        Maecenas sed diam eget risus varius blandit.</p>
      </a>
    </div>
  </div>
</div>

Basic example

ok HTML:Ex:Getbootstrap.com/components/Panels/Basic example/wiki ( editedit originalcompare )

Basic panel example
Wiki markup ,   modified code
<div class="panel panel-default">
  <div class="panel-body">
Basic panel example</div>
</div>


Panel with heading

ok HTML:Ex:Getbootstrap.com/components/Panels/Panel with heading/wiki ( editedit originalcompare )

Panel heading without title
Panel content

Panel title

Panel content
Wiki markup ,   modified code
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
Panel content</div>
</div>
 
<div class="panel panel-default">
  <div class="panel-heading">
    <p class="h3 panel-title">Panel title</p>
  </div>
  <div class="panel-body">
Panel content</div>
</div>


Panel with footer

ok HTML:Ex:Getbootstrap.com/components/Panels/Panel with footer/wiki ( editedit originalcompare )


Contextual alternatives

ok HTML:Ex:Getbootstrap.com/components/Panels/Contextual alternatives/wiki ( editedit originalcompare )

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content
Wiki markup ,   modified code
<div class="panel panel-primary">
  <div class="panel-heading">
    <p id="panel-title-wiki-a" class="h3 panel-title">Panel title</p>
  </div>
  <div class="panel-body">
Panel content</div>
</div>
<div class="panel panel-success">
  <div class="panel-heading">
    <p id="panel-title-wiki-b" class="h3 panel-title">Panel title</p>
  </div>
  <div class="panel-body">
Panel content</div>
</div>
<div class="panel panel-info">
  <div class="panel-heading">
    <p id="panel-title-wiki-c" class="h3 panel-title">Panel title</p>
  </div>
  <div class="panel-body">
Panel content</div>
</div>
<div class="panel panel-warning">
  <div class="panel-heading">
    <p id="panel-title-wiki-d" class="h3 panel-title">Panel title</p>
  </div>
  <div class="panel-body">
Panel content</div>
</div>
<div class="panel panel-danger">
  <div class="panel-heading">
    <p id="panel-title-wiki-e" class="h3 panel-title">Panel title</p>
  </div>
  <div class="panel-body">
Panel content</div>
</div>


With tables

ok HTML:Ex:Getbootstrap.com/components/Panels/With tables/wiki ( editedit originalcompare )

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Wiki markup ,   modified code
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. 
    Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. 
    Pellentesque ornare sem lacinia quam venenatis vestibulum. 
    Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  </div>
 
  <!-- Table -->
  <table class="table">
      <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>
</div>

With tables (2)

ok HTML:Ex:Getbootstrap.com/components/Panels/With tables (2)/wiki ( editedit originalcompare )

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Wiki markup ,   modified code
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
 
  <!-- Table -->
  <table class="table">
      <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