Grid Layout

col-8
col-4
col-4
col-4
col-4
col-9
col-3
col-12
col
col
col
col
col
col
col
col
col
col
col
col

Headings

Heading 1 SubHeading 1

Heading 2 SubHeading 2

Heading 3 SubHeading 3

Heading 4 SubHeading 4

Heading 5 SubHeading 5
Heading 6 SubHeading 6

Display Heading 1

Display Heading 2

Display Heading 3

Display Heading 4

Default Font Sizes in Bootstrap 4

HTML Tag / CSS Class Font Size in rem Font Size in Pixel
h1, .h1 2.5rem 40px
h2, .h2 2rem 32px
h3, .h3 1.75rem 28px
h4, .h4 1.5rem 24px
h5, .h5 1.25rem 20px
h6, .h6 1rem 16px
.display-1 6rem 90px
.display-2 5.5rem 82.5px
.display-3 4.5rem 67.5px
.display-4 3.5rem 52.5px
p 1rem 16px

Text Colors & Utility

Heading 1 SubHeading 1

Heading 2 SubHeading 2

Heading 3 SubHeading 3

Heading 4 SubHeading 4

Heading 5 SubHeading 5
Heading 6 SubHeading 6

Lead in Bootstrap 4

This is normal Text without any lead class not emphasized.

Example of Lead class with paragraph showing its use to emphasize text.


Class Name Description
.text-primary This class is used to display texts in blue color.
.text-secondary This class can be used for various purposes.
.text-success This class can be used for various purposes.
.text-danger Red is mostly avoided in most designs because it shows danger or anger. But you can use it according to your design needs.
.text-warning This class can be used for various purposes.
.text-info This class is used to display texts in blue color which is different from .text_primary.
.text-light This class displays text in light colors that are not white.
.text-dark This class can be used for various purposes.
.text-muted The information is silent and is used to represent obsolete data.
.text-white This class displays text in white.

Class Name Description
.font-weight-bold For creating bold text.
.font-weight-bolder For creating bolder text.
.font-italic For creating italic text.
.font-weight-light For creating lightweight text.
.font-weight-lighter For creating lighter weight text.
.font-weight-normal For creating normal text.
.small For creating smaller text which is comparatively 85% smaller than the size of the parent.
.text-break This class helps in preventing long text from breaking design and layout.
.text-decoration-none For removing the underline from any hyperlink.
.text-justify For creating justified text.
.text-monospace For creating mono-spaced text.
.text-nowrap For creating no wrap text.
.text-lowercase For creating lowercased text.
.text-reset For resetting the text color or a link.
.text-uppercase For creating uppercased text.
.text-capitalize For creating capitalized text.


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

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

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 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="[removed]void(0)">Previous</a></li>
        <li class="page-item"><a class="page-link" href="[removed]void(0)">1</a></li>
        <li class="page-item"><a class="page-link" href="[removed]void(0)">2</a></li>
        <li class="page-item"><a class="page-link" href="[removed]void(0)">3</a></li>
        <li class="page-item"><a class="page-link" href="[removed]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="[removed]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="[removed]void(0)">1</a></li>
        <li class="page-item"><a class="page-link" href="[removed]void(0)">2</a></li>
        <li class="page-item"><a class="page-link" href="[removed]void(0)">3</a></li>
        <li class="page-item">
            <a class="page-link" href="[removed]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="[removed]void(0)" tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><a class="page-link" href="[removed]void(0)">1</a></li>
        <li class="page-item active">
            <a class="page-link" href="[removed]void(0)">2 <span class="sr-only">(current)</span></a>
        </li>
        <li class="page-item"><a class="page-link" href="[removed]void(0)">3</a></li>
        <li class="page-item">
            <a class="page-link" href="[removed]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="[removed]void(0)" tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><a class="page-link" href="[removed]void(0)">1</a></li>
        <li class="page-item"><a class="page-link" href="[removed]void(0)">2</a></li>
        <li class="page-item"><a class="page-link" href="[removed]void(0)">3</a></li>
        <li class="page-item">
            <a class="page-link" href="[removed]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="[removed]void(0)" tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><a class="page-link" href="[removed]void(0)">1</a></li>
        <li class="page-item"><a class="page-link" href="[removed]void(0)">2</a></li>
        <li class="page-item"><a class="page-link" href="[removed]void(0)">3</a></li>
        <li class="page-item">
            <a class="page-link" href="[removed]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="[removed]void(0)" tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><a class="page-link" href="[removed]void(0)">1</a></li>
        <li class="page-item"><a class="page-link" href="[removed]void(0)">2</a></li>
        <li class="page-item"><a class="page-link" href="[removed]void(0)">3</a></li>
        <li class="page-item">
            <a class="page-link" href="[removed]void(0)">Next</a>
        </li>
    </ul>
</nav>





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

<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="[removed]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