Badges
Use class .badge and for colors badge-success
for get desire badge.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Contextual Badge variations
Use class .badge and for colors badge-success
for get desire badge.
Default
Primary
Success
Info
Warning
Danger
Pill badges
Use class .badge-pill and for colors
badge-success for get desire badge.
Default
Primary
Success
Info
Warning
Danger
<h1>Example heading <span class="badge badge-default">New</span></h1>
<h2>Example heading <span class="badge badge-success">New</span></h2>
<h3>Example heading <span class="badge badge-info">New</span></h3>
<h4>Example heading <span class="badge badge-primary">New</span></h4>
<h5>Example heading <span class="badge badge-danger">New</span></h5>
<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-pill badge-default">Default</span>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>
Badges
Contextual variations
Primary Secondary Success Danger Warning Info Light DarkPill badges
Primary Secondary Success Danger Warning Info Light DarkCollapse (Toggle)
click below button, for Use a link with the href
attribute, with class .collapse get desire toggle.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred nesciunt sapiente ea proident.
Accordion example
Extend the default collapse behavior to create an accordion.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
<p>
<a class="btn btn-info" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-success" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
<div id="accordion2" class="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapse1" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h5>
</div>
<div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body">
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.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse2" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h5>
</div>
<div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-body">
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.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse3" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h5>
</div>
<div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-body">
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.
</div>
</div>
</div>
</div>
Label Example
Use class .label for get desire text.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Contextual Label variations
Use class .label and for colors label-success
for get desire label.
Default
Primary
Success
Info
Warning
Danger
Label rounded
Use class .label .label-rounded and for
colors label-success for get desire label.
Default
Primary
Success
Info
Warning
Danger
<h1>Example heading <span class="label label-inverse">New</span></h1>
<h2>Example heading <span class="label label-success">New</span></h2>
<h3>Example heading <span class="label label-info">New</span></h3>
<h4>Example heading <span class="label label-primary">New</span></h4>
<h5>Example heading <span class="label label-danger">New</span></h5>
<h6>Example heading <span class="label label-warning">New</span></h6>
<span class="label label-inverse">Default</span> <span class="label label-light-inverse">Default</span>
<span class="label label-primary">Primary</span> <span class="label label-light-primary">Primary</span>
<span class="label label-success">Success</span> <span class="label label-light-success">Success</span>
<span class="label label-info">Info</span> <span class="label label-light-info">Info</span>
<span class="label label-warning">Warning</span> <span class="label label-light-warning">Warning</span>
<span class="label label-danger">Danger</span> <span class="label label-light-danger">Danger</span>
<span class="label label-rounded label-inverse">Default</span>
<span class="label label-rounded label-primary">Primary</span>
<span class="label label-rounded label-success">Success</span>
<span class="label label-rounded label-info">Info</span>
<span class="label label-rounded label-warning">Warning</span>
<span class="label label-rounded label-danger">Danger</span>
Simple pagination
To make pagination give class pagination
to ul
Working with icons
To make pagination give class pagination
to ul
Disabled and active states
To make pagination active or disable give class .disabled & .active
to ul
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="javascript:void(0)">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">Next</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="javascript:void(0)" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item">
<a class="page-link" href="javascript:void(0)" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0)">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item">
<a class="page-link" href="javascript:void(0)">Next</a>
</li>
</ul>
</nav>
Sizing
Fancy larger or smaller pagination? Add.pagination-sm
for additional sizes.
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item">
<a class="page-link" href="javascript:void(0)">Next</a>
</li>
</ul>
</nav>
Alignment
Change the alignment of pagination components with
felxbox justify-content-center, justify-content-end,
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item">
<a class="page-link" href="javascript:void(0)">Next</a>
</li>
</ul>
</nav>
Sizing
Fancy larger or smaller pagination? Add.pagination-lg
for additional sizes.
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li>
<li class="page-item">
<a class="page-link" href="javascript:void(0)">Next</a>
</li>
</ul>
</nav>
Image with round corner
.img-rounded
Image with circle
.img-circle Make sure the image is
square not ractangle
Image with Thumbnail
img-thumbnail
<img src="https://via.placeholder.com/600x600?text=Image" alt="image" class="img-responsive img-rounded" width="200">
<img src="https://via.placeholder.com/600x600?text=Image" alt="image" class="img-circle" width="290">
<img src="https://via.placeholder.com/600x600?text=Image" alt="image" class="img-thumbnail" width="290">
jumbotron
A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Fluid jumbotron
To make the jumbotron full width, and without rounded
corners, add the jumbotron-fluid
Fluid jumbotron
This is a modified jumbotron that occupies the entire horizontal space of its parent.
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="javascript:void(0)" role="button">Learn more</a>
</p>
</div>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>