Components

Panels

Basic Panel

Basic panel example

Panel with heading

Panel heading without title
Panel content

Panel title

Panel content

Panel with footer

Panel content

Panel with heading and footer

Panel heading title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenere iucundius affecta appellant quietus gravissimis praesidium invenire, perpetuis benivolentiam mnesarchum quosvis nullam scientia, inmortalibus per probo magnopere fugiendus corrupisti, sum doceat dolores viveremus mutae victi volunt laborat, quanti facilis tantopere gloriae damna an periculum quippiam virtutem, obruamus salutatus malum declinationem ibidem docere sermo semper accusator, omne ceramico cognoscerem habeo paratus quibusdam effectrices praetorem patriam. Rationis saepti sensibus, desperantes sentiamus, usus pondere expeteremus afferat pulchraeque suscipere, sumus desiderare. Modum perspiciatis magistra iure.

Color panels

Panel default
Panel content
Panel primary
Panel content
Panel success
Panel content
Panel info
Panel content
Panel warning
Panel content
Panel danger
Panel content

Basic Panel


<div class="panel panel-primary">
    <div class="panel-body">
        Basic panel example
    </div>
</div>
                                    

Panel with heading


<div class="panel panel-primary">
    <div class="panel-heading">Panel heading without title</div>
    <div class="panel-body">
        Panel content
    </div>
</div>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Panel content
    </div>
</div>
                                    

Panel with footer


<div class="panel panel-primary">
    <div class="panel-body">
        Panel content
    </div>
    <div class="panel-footer">Panel footer</div>
</div>
                                    

Panel with heading and footer


<div class="panel panel-primary">
    <div class="panel-heading">Panel heading title</div>
    <div class="panel-body">
        ...
    </div>
    <div class="panel-footer">Panel footer</div>
</div>
                                    

Color panels


<div class="panel panel-default">
    ...
</div>

<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>
                                    
You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Collapses

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed">
                    Collapsible Group Item #2
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed">
                    Collapsible Group Item #3
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div>
</div>
                                    
You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Lists

Basic 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> <!--list-group -->
                                    

Badges

<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">14</span>
        Cras justo odio
    </li>
    <li class="list-group-item">
        <span class="badge">86</span>
        Dapibus ac facilisis in
    </li>
    <li class="list-group-item">
        <span class="badge">194</span>
        Morbi leo risus
    </li>
    <li class="list-group-item">
        <span class="badge">4</span>
        Porta ac consectetur ac
    </li>
    <li class="list-group-item">
        <span class="badge">54</span>
        Vestibulum at eros
    </li>
</ul> <!--list-group -->
                                    

Linked items

<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>
    <a href="#" class="list-group-item">Vitium sermone inciderit</a>
</div> <!--list-group -->
                                    

Custom content

<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>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">...</p>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">...</p>
    </a>
</div> <!--list-group -->

                                    
You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Wells

Well

Venisset lucifugi philosopho sententia dicitis.

Well large

Venisset lucifugi philosopho sententia dicitis.

Well Small

Venisset lucifugi philosopho sententia dicitis.

Well

<div class="well">
   Venisset lucifugi philosopho sententia dicitis.
</div>
                                    

Well large

<div class="well well-lg">
    Venisset lucifugi philosopho sententia dicitis.
</div>
                                    

Well Small

<div class="well well-sm">
    Venisset lucifugi philosopho sententia dicitis.
</div>
                                    
You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Alerts

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it’s not super important.
Warning! Best check yo self, you’re not looking too good.
Oh snap! Change a few things up and try submitting again.
<div class="alert alert-success">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<div class="alert alert-info">
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>

<div class="alert alert-warning">
    <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

<div class="alert alert-danger">
    <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
                                   
You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Progress bars

Default Progress

60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

Small Progress

60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

Very Small Progress

60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

Large Progress

60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

Progress Bar Striped

60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Default Progress

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

<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</span>
    </div>
</div>
                                    

Small Progress

<div class="progress progress-sm">
    <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>

<div class="progress progress-sm">
    <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 progress-sm">
    <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 progress-sm">
    <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 progress-sm">
    <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</span>
    </div>
</div>
                                    

Very Small Progress

<div class="progress progress-xs">
    <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>

<div class="progress progress-xs">
    <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 progress-xs">
    <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 progress-xs">
    <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 progress-xs">
    <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</span>
    </div>
</div>
                                    

Large Progress

<div class="progress progress-lg">
    <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>

<div class="progress progress-lg">
    <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 progress-lg">
    <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 progress-lg">
    <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 progress-lg">
    <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</span>
    </div>
                                    </div>
                                    

Progress Bar Striped

<div class="progress progress-striped active">
    <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>

<div class="progress progress-striped active">
    <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 progress-striped active">
    <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 progress-striped active">
    <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 progress-striped active">
    <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>
                                    
You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Modals

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- modal-content -->
    </div><!-- modal-dialog -->
</div><!-- modal -->
                                   
You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!

Jumbotron

Hello, world!

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

Learn more

<div class="jumbotron">
    <h1>Hello, world!</h1>
    <p>...</p>
    <p><a class="btn btn-primary btn-lg pull-right" role="button">Learn more</a></p>
</div>
                                   
You can use the Easy Bootstrap Shortcode plugin! Comes bundled and is 100 percent compatible!

Coming soon

Next Version!