Ui-Bootstrap
THIS MONTH
$58,356
LAST MONTH
$48,356
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
Range
Collapse (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.Get HTMl
<div id="accordionexample" 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="#accordionexample" href="#collapseexaOne" aria-expanded="true" aria-controls="collapseexaOne">
Collapsible Group Item #1
</a>
</h5>
</div>
<div id="collapseexaOne" 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.
</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="#accordionexample" href="#collapseexaTwo" aria-expanded="false" aria-controls="collapseexaTwo">
Collapsible Group Item #2
</a>
</h5>
</div>
<div id="collapseexaTwo" 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.
</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="#accordionexample" href="#collapseexaThree" aria-expanded="false" aria-controls="collapseexaThree">
Collapsible Group Item #3
</a>
</h5>
</div>
<div id="collapseexaThree" 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.
</div>
</div>
</div>
</div>
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.
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
Sizing
Fancy larger or smaller pagination?
Add.pagination-lg for additional sizes.
Sizing
Fancy larger or smaller pagination?
Add.pagination-sm for additional sizes.
Alignment
Change the alignment of pagination components with
felxbox justify-content-center, justify-content-end,
Image with round corner
.rounded
Image with circle
.rounded-circle Make sure the image is
square not ractangle
Image with Thumbnail
img-thumbnail
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.
Service Panel
