+190098765

Bootstrap Items

Dropdowns

Simple Dropdown
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
    </ul>
</div>
Simple Dropup
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
        Dropup
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
    </ul>
</div>
Dropdown with Headers
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
        <li class="dropdown-header">Dropdown header</li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li class="dropdown-header">Dropdown header</li>
        <li><a href="#">Something else here</a></li>
    </ul>
</div>
Dropdown with Divider
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
        <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>
Dropdown with disabled items
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
        <li><a href="#">Regular link</a></li>
        <li class="disabled"><a href="#">Disabled link</a></li>
        <li><a href="#">Another link</a></li>
    </ul>
</div>

Button groups

Basic example
<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
<div class="btn-toolbar" role="toolbar" aria-label="...">
    <div class="btn-group" role="group" aria-label="...">...</div>
    <div class="btn-group" role="group" aria-label="...">...</div>
    <div class="btn-group" role="group" aria-label="...">...</div>
</div>
Sizing




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
Nesting
<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
<div class="btn-group-vertical" role="group" aria-label="...">
    ...
</div>
Justified button groups
With <a> element
Left Middle Right 
<div class="btn-group btn-group-justified" role="group" aria-label="...">
    <a class="btn btn-default">Left</a>
    <a class="btn btn-default">Middle</a>
    <a class="btn btn-default">Right</a>
</div>
With <button> element
Left Middle 
<div class="btn-group btn-group-justified" role="group" aria-label="...">
    <a class="btn btn-default">Left</a>
    <a class="btn btn-default">Middle</a>

    <div class="btn-group" role="group">
        <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
        </ul>
    </div>
</div>

Button dropdowns

Single button dropdowns
<div class="btn-group">
    <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">
        <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>
Split button dropdowns
<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>
Sizing


<!-- Large button group -->
<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">
        ...
    </ul>
</div>

<!-- Small button group -->
<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">
        ...
    </ul>
</div>

<!-- Extra small button group -->
<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">
        ...
    </ul>
</div>
Dropup variation
<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">
        <!-- Dropdown menu links -->
    </ul>
</div>

Input groups

Basic example
@
@example.com
$ .00
https://example.com/users/ 
<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>

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

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

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
    <span class="input-group-addon" id="basic-addon3v>https://example.com/users/</span>
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
Sizing
@

@

@ 
<div class="input-group input-group-lg">
    <span class="input-group-addon" id="sizing-addon1">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
    <span class="input-group-addon" id="sizing-addon2">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
    <span class="input-group-addon" id="sizing-addon3">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
Checkboxes and radio addons
<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
<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
<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">
                    <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 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
<div class="input-group">
    <div class="input-group-btn">
        <!-- Button and dropdown menu -->
    </div>
    <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
    <input type="text" class="form-control" aria-label="...">
    <div class="input-group-btn">
        <!-- Button and dropdown menu -->
    </div>
</div>
Multiple buttons
<div class="input-group">
    <div class="input-group-btn">
        <!-- Buttons -->
    </div>
    <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
    <input type="text" class="form-control" aria-label="...">
    <div class="input-group-btn">
        <!-- Buttons -->
    </div>
</div>

Navs

Tabs
<ul class="nav nav-tabs">
    <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
Horizontal type
Vertical type
<ul class="nav nav-pills">
    <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>

<ul class="nav nav-pills nav-stacked">
    ...
</ul>
Justified
<ul class="nav nav-tabs nav-justified">
    ...
</ul>
<ul class="nav nav-pills nav-justified">
    ...
</ul>
Disabled links
<ul class="nav nav-pills">
    ...
    <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
    ...
</ul>
Using dropdowns
Tabs with dropdowns
<ul class="nav nav-tabs">
    ...
    <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">
            ...
        </ul>
    </li>
    ...
</ul>
Pills with dropdowns
<ul class="nav nav-pills">
    ...
    <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">
            ...
        </ul>
    </li>
    ...
</ul>

Breadcrumbs

  1. Home
  2. Library
  3. Data
<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>

Pagination

Default pagination
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">«</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">»</span>
            </a>
        </li>
    </ul>
</nav>
Disabled and active states
<nav aria-label="...">
    <ul class="pagination">
        <li class="disabled">
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">«</span>
            </a>
        </li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></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">»</span>
            </a>
        </li>
    </ul>
</nav>
Sizing
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
Pager
<nav aria-label="...">
    <ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</nav>
Aligned links
<nav aria-label="...">
    <ul class="pager">
        <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
        <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
    </ul>
</nav>
Optional disabled state
<nav aria-label="...">
    <ul class="pager">
        <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
        <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
    </ul>
</nav>

Labels

Example

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
<h3>Example heading <span class="label label-default">New</span></h3>
Available variations
Default Primary Success Info Warning Danger 
<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>

Badges

Inbox 42 

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
    Messages <span class="badge">4</span>
</button>
Adapts to active nav states
<ul class="nav nav-pills" 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>

Page header

Example page header Subtext for header

<div class="page-header">
    <h1>Example page header <small>Subtext for header</small></h1>
</div>

Thumbnails

Default example
...
...
...
... 
<div class="row">
    <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="..." alt="...">
        </a>
    </div>
    ...
</div>
Custom content
...

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

<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="..." alt="...">
            <div class="caption">
                <h3>Thumbnail label</h3>
                <p>...</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>

Alerts

Examples
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
Dismissible alerts
<div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert"
aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <strong>Warning!</strong> Better check yourself, you're not looking
    too good.
</div>
Links in alerts
<div class="alert alert-success" role="alert">
    <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
    <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
    <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
    <a href="#" class="alert-link">...</a>
</div>

Progress bars

Basic example
60% Complete 
<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
60% 
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 60%;">
        60%
    </div>
</div>
Contextual alternatives
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger) 
<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
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger) 
<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
45% Complete 
<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
35% Complete (success)
20% Complete (warning)
10% Complete (danger) 
<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>

List group

Basic example
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
    <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>
Badges
  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus 
<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">14</span>
        Cras justo odio
    </li>
</ul>
Linked items
Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 
<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>
Button items
<div class="list-group">
    <button type="button" class="list-group-item">Cras justo odio</button>
    <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
    <button type="button" class="list-group-item">>Morbi leo risus</button>
    <button type="button" class="list-group-item">Porta ac consectetur ac</button>
    <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
Disabled items
Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 
<div class="list-group">
    <a href="#" class="list-group-item disabled">
        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>
Contextual classes
  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros
Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros 
<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 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>
Custom content

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

 
<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">...</p>
    </a>
</div>

Panels

Basic example
Basic panel example 
<div class="panel panel-default">
    <div class="panel-body">
        Basic panel example
    </div>
</div>
Panel with heading
Panel heading without title
Panel content

Panel title

Panel content 
<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">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Panel content
    </div>
</div>
Panel with footer
Panel content
Panel footer
<div class="panel panel-default">
    <div class="panel-body">
        Panel content
    </div>
    <div class="panel-footer">Panel footer</div>
</div>
Contextual alternatives

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content 
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
With tables
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 
<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <div class="panel-body">
        <p>...</p>
    </div>

    
    <table class="table">
        ...
    </table>
</div>
With list groups
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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <div class="panel-body">
        <p>...</p>
    </div>

    <!-- List group -->
    <ul class="list-group">
        <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>

Wells

Default well
Look, I'm in a well!
<div class="well">...</div>
Optional classes
Look, I'm in a well!
<div class="well well-lg">...</div>
Look, I'm in a well!
<div class="well well-sm">...</div>