Bootstrap Ui
Badges
Use class .badgeand for colors badge-successfor 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 .badgeand for colors badge-successfor get desire badge.
DefaultPrimary
Success
Info
Warning
Danger
Pill badges
Use class .badge-pilland for colors badge-successfor get desire badge.
DefaultPrimary
Success
Info
Warning
Danger
Collapse (Toggle)
click below button, for Use a link with the hrefattribute, with class .collapseget 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
<divid="accordionexample"class="accordion"role="tablist"aria-multiselectable="true"><divclass="card"><divclass="card-header"role="tab"id="headingOne"><h5class="mb-0"><adata-toggle="collapse"data-parent="#accordionexample"href="#collapseexaOne"aria-expanded="true"aria-controls="collapseexaOne"> Collapsible Group Item #1 </a></h5></div><divid="collapseexaOne"class="collapse show"role="tabpanel"aria-labelledby="headingOne"><divclass="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><divclass="card"><divclass="card-header"role="tab"id="headingTwo"><h5class="mb-0"><aclass="collapsed"data-toggle="collapse"data-parent="#accordionexample"href="#collapseexaTwo"aria-expanded="false"aria-controls="collapseexaTwo"> Collapsible Group Item #2 </a></h5></div><divid="collapseexaTwo"class="collapse"role="tabpanel"aria-labelledby="headingTwo"><divclass="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><divclass="card"><divclass="card-header"role="tab"id="headingThree"><h5class="mb-0"><aclass="collapsed"data-toggle="collapse"data-parent="#accordionexample"href="#collapseexaThree"aria-expanded="false"aria-controls="collapseexaThree"> Collapsible Group Item #3 </a></h5></div><divid="collapseexaThree"class="collapse"role="tabpanel"aria-labelledby="headingThree"><divclass="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> 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.
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.
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.
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 .labeland for colors label-success & .label-light-successfor get desire label.
DefaultDefaultPrimaryPrimary
SuccessSuccess
InfoInfo
WarningWarning
DangerDanger
Label rounded
Use class .label .label-roundedand for colors label-successfor get desire label.
DefaultPrimary
Success
Info
Warning
Danger
Simple pagination
To make pagination give class paginationto ul
Working with icons
To make pagination give class paginationto ul
Disabled and active states
To make pagination active or disable give class .disabled & .activeto 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
.img-rounded
Image with circle
.img-circleMake 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
