#### Badges

###### Use class `.badge` and for colors `badge-success` for get desire badge.

# 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 Dark

#### Pill badges

Primary Secondary Success Danger Warning Info Light Dark

#### Collapse (Toggle)

###### click below button, for Use a link with the `href` attribute, with class `.collapse` get desire toggle.

Link with href

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

                                                     <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

#### 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="../../assets/images/big/img1.jpg" alt="image" class="img-responsive img-rounded" width="200">

                                                    <img src="../../assets/images/users/5.jpg" alt="image" class="img-circle" width="290">

                                                    <img src="../../assets/images/users/5.jpg" 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.

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.

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

#### Range

Ordinary Range Range with Min-Max Range with Step

##### Layout Settings

Dark Theme
Collapse Sidebar
Fixed Sidebar
Fixed Header
Boxed Layout

##### Logo Backgrounds

##### Navbar Backgrounds

##### Sidebar Backgrounds

- ##### Pavan kumar

  Just see the my admin! 9:30 AM

  ##### Sonu Nigam

  I've sung a song! See you at 9:10 AM

  ##### Arijit Sinh

  I am a singer! 9:08 AM

  ##### Nirav Joshi

  Just see the my admin! 9:02 AM

  ##### Sunil Joshi

  Just see the my admin! 9:02 AM

  ##### Akshay Kumar

  Just see the my admin! 9:02 AM

  ##### Pavan kumar

  Just see the my admin! 9:02 AM

  ##### Varun Dhavan

  Just see the my admin! 9:02 AM

###### Activity Timeline

Meeting today 5pm
you can write anything
Send documents to Clark
Lorem Ipsum is simply
Go to the Doctor 5 minutes ago
Contrary to popular belief
Stephen 5 minutes ago
Approve meeting with tiger
Meeting today 5pm
you can write anything
Send documents to Clark
Lorem Ipsum is simply
Go to the Doctor 5 minutes ago
Contrary to popular belief
Stephen 5 minutes ago
Approve meeting with tiger