Bootstrap Ui

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





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 & .label-light-success for get desire label.
Default Default
Primary Primary
Success Success
Info Info
Warning Warning
Danger Danger

Label rounded

Use class .label .label-rounded and for colors label-success for get desire label.
Default
Primary
Success
Info
Warning
Danger





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

.img-rounded
image

Image with circle

.img-circle Make sure the image is square not ractangle
image

Image with Thumbnail

img-thumbnail
image






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.

Learn more

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.