Heading
Ex. <h1> H1. Bootstrap heading </h1>
H1. Bootstrap heading
H2. Bootstrap heading
H3. Bootstrap heading
H4. Bootstrap heading
H5. Bootstrap heading
H6. Bootstrap heading
Display
Ex. <p class="display-1"> Display 1 </p>
Display 1
Display 2
Display 3
Display 4
Buttons
Simple Buttons
Ex. <a href="#" class="btn btn-primary"> Primary </a>
PrimarySecondarySuccessDangerInfoWarningLightDarkCustomButtons Pills
Ex. <a href="#" class="btn btn-primary rounded-pill"> Primary </a>
PrimarySecondarySuccessDangerInfoWarningLightDarkCustomOutline Buttons
Ex. <a href="#" class="btn btn-outline-primary"> Primary </a>
PrimarySecondarySuccessDangerInfoWarningLightDarkCustomOutline Buttons Pills
Ex. <a href="#" class="btn btn-outline-primary rounded-pill"> Primary </a>
PrimarySecondarySuccessDangerInfoWarningLightDarkCustomButtons Sizing
Ex. <a href="#" class="btn btn-primary btn-sm"> Primary </a>
PrimaryWarningSuccessAlert
Simple Alert
Ex. <div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div>
Alert Link
Ex. <div class="alert alert-primary" role="alert"> A simple primary alert with <a href="#" class="alert-link"></a>. </div>
Additional Content
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Dismissing Alert
Ex. <div class="alert alert-success alert-dismissible fade show" role="alert"> <strong>Well done!</strong> You successfully read this important alert message. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"> × </span> </button> </div>
Modern Alert
Ex. <div class="alert alert-primary alert-pills" role="alert">
<span class="badge badge-danger badge-pill"> New </span>
<span class="alert-content"> A Modern primary alert—check it out! </span>
</div>
<span class="badge badge-danger badge-pill"> New </span>
<span class="alert-content"> A Modern primary alert—check it out! </span>
</div>
Modern Alert Outline
Ex. <div class="alert alert-outline-primary alert-pills" role="alert">
<span class="badge badge-danger badge-pill"> New </span>
<span class="alert-content"> A Modern primary alert—check it out! </span>
</div>
<span class="badge badge-danger badge-pill"> New </span>
<span class="alert-content"> A Modern primary alert—check it out! </span>
</div>
Badges
Badges
Ex. <span class="badge badge-primary"> primary </span>
PrimarySecondarySuccessDangerWarningInfoLightDarkCustomBadges Pills
Ex. <span class="badge badge-primary badge-pill"> primary </span>
PrimarySecondarySuccessDangerWarningInfoLightDarkCustomBadges Outlines
Ex. <span class="badge badge-outline-primary"> primary </span>
PrimarySecondarySuccessDangerWarningInfoLightDarkCustomBadges Outline pills
Ex. <span class="badge badge-outline-primary badge-pill"> primary </span>
PrimarySecondarySuccessDangerWarningInfoLightDarkCustomLink Badges
Ex. <a href="#" class="badge badge-primary"> primary </a>
PrimarySecondarySuccessDangerWarningInfoLightDarkCustomText Color
Ex. <div class="text-primary"> Uplead Multipurpose Template & UI Kit </div>
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-white
.text-white-50
.text-dark
.text-custom
Navtabs
Start work with Uplead. Build responsive, mobile-first projects on the web with the world's most popular front-end component library.
Start work with Uplead. Build responsive, mobile-first projects on the web with the world's most popular front-end component library.
Start work with Uplead. Build responsive, mobile-first projects on the web with the world's most popular front-end component library.
Modal
Breadcrumbs
Avatar
Default Avatar
Ex. <img src="/diy_templates/bootstrapmb-6748/images/home/01.jpg" class="img-fluid avatar avatar-small rounded">
Circle Avatar
Ex. <img src="/diy_templates/bootstrapmb-6748/images/home/01.jpg" class="img-fluid avatar avatar-small rounded-pill">
Thumbnail Avatar
Ex. <img src="/diy_templates/bootstrapmb-6748/images/home/01.jpg" class="img-fluid img-thumbnail avatar avatar-small rounded">
Accordion
Accordion #1
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
Accordion #2
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
Accordion #3
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.
Progressbar
WordPress
PHP / MYSQL
Angular / JavaScript
HTML
Forms & Inputs
Form
Checkboxes
Radio Buttons
Switches Button
Icons
Material Design Icons
There are 4400+ Material Design icons and you can get all icons info from here: https://materialdesignicons.com/
Ex. <i class="mdi mdi-home"> </i>
Themify Icons
There are 320+ Themify icons and you can get all icons info from here: https://themify.me/themify-icons