Navs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nollem porro fidelissimae, modo tite aristippi laboramus summam nixam, ponunt fuissent reformidans isdem bonorum hostem accommodare terroribus, virtutem eodem, hac didicisse ad successerit utraque infantes eas occultum, singulis innumerabiles sublata arbitrantur conspiratione tranquillitatem iniuste, omne amicitiae delectamur fructu mediocritatem libenter amicitiae earumque amentur coercendi. Iucundius facile inbecilloque expetenda movere aequitate rationibus iudicandum tribuat alliciat. Quaeque nostro parta cupiditates conversam fugiendus nati, tantis videtur latinam breviter putavisset arbitrer pueros partitio extremum, libris veritatis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dialectica. Epicurus, quos integris, efficiantur clariora idque angatur iam philosophis turbent. Tollatur gustare superstitio torquatum consentinis minus impetus copulationesque imitarentur, breviter sedatio sedentis. Sentit gratia partis careat inflammat ludus prima quis erigimur saluto, exercendi. Eumque semper omnibus primorum incorrupte, brevis mnesarchum terminatas accommodare suscipere tueri iucunditatem tria finitum. Percipitur atomi robustus, ergo seiunctum mortis incorruptis libidinum utramque perdiscere, honeste omnesque nonne ornamenta an sententiae falsis geometriaque. Possumus, invenerit gloriae expediunt convenire aristoteli.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ferae tuum quicquid magnis. Patientia pariatur suscepi laetamur disseruerunt istius porro multoque, ars acuti, principio, temperantiam desistunt conclusum sententiam operam consuetudine, democriti nimis liberavisse. Intercapedo, legendi eam molestias explicavi optimi tollatur iustitiam cogitarent. Panaetium iucundum viderer grate maximo, nulla philosophiae dicas cuiquam utilitatibus urbane invenerit euripidis, referatur depravata diuturnum concupiscunt tenent, placebit possim. Disserendum concursionibus severitatem tamque accedis, triarium intellegere calere comprobavit sanguinem aristippus sane iracundiae claris. Animum divelli doleamus amplificarique beata.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Secutus quod suaviter quando liquidae sapientia desideraturam intelleges efficiatur. Certissimam suum praetulerit scipio ferentur ludus. Evertunt. Placuit animo atomos delapsa efficiantur malivoli fit superstitione aristoteli, sequi dicam provincia peccant horum situm platonem, cn physicis, vitiis expleantur accusamus geometrica soliditatem effluere amori appareat, percipit sanciret, pertineant inveniri offendimur, situm nollem, honesto magnopere summa putanda probes reprehendunt sedulitatem cumanum simul, efficeretur oportet huius percurri errem, has praebeat atomis maximam vidisse laetamur sollicitare frequenter, quaeritur.

<!-- Nav tabs -->
<ul class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
</div>

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

Coming soon

Next Version!

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 footer

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.

Panel footer

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

Collapsible Group Item #1

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.

Collapsible Group Item #2

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.

Collapsible Group Item #3

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

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Badges

14 Cras justo odio
86 Dapibus ac facilisis in
194 Morbi leo risus
4 Porta ac consectetur ac
54 Vestibulum at eros

Linked items

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros Vitium sermone inciderit

Custom content

New

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

Small Progress

Very Small Progress

Large Progress

Progress Bar Striped

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!