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

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

Ordinary Range Range with Min-Max Range with Step

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

#### 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 with circle

###### `.img-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.

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.