Buttons
Please follow this link to view all bootstrap 5 framework classes
<button class="btn btn-primary">btn-primary</button>
<button class="btn btn-secondary">btn-secondary</button>
<button class="btn btn-success">btn-success</button>
<button class="btn btn-info">btn-info</button>
<button class="btn btn-warning">btn-warning</button>
<button class="btn btn-danger">btn-danger</button>
<button class="btn btn-dark">btn-dark</button>
<button class="btn btn-light">btn-light</button>
<button class="btn btn-white">btn-white</button>
<button class="btn btn-third">btn-third</button>
<button class="btn btn-fourth">btn-fourth</button>
<button class="btn btn-fifth">btn-fifth</button>
<button class="btn btn-outline-primary">btn-outline-primary</button>
<button class="btn btn-outline-secondary">btn-outline-secondary</button>
<button class="btn btn-outline-success">btn-outline-success</button>
<button class="btn btn-outline-info">btn-outline-info</button>
<button class="btn btn-outline-warning">btn-outline-warning</button>
<button class="btn btn-outline-danger">btn-outline-danger</button>
<button class="btn btn-outline-dark">btn-outline-dark</button>
<button class="btn btn-outline-light">btn-outline-light</button>
<button class="btn btn-outline-white">btn-outline-white</button>
<button class="btn btn-outline-third">btn-outline-third</button>
<button class="btn btn-outline-fourth">btn-outline-fourth</button>
<button class="btn btn-outline-fifth">btn-outline-fifth</button>
<a class="btn btn-info btn-sm" href="#">
<i class="icon ion-android-lock"></i>
Button
</a>
<a class="btn btn-primary" href="#">
<i class="icon ion-android-calendar"></i>
Button
</a>
<a class="btn btn-success btn-lg" href="#">
<i class="icon ion-android-drafts"></i>
Button
</a>
<a class="btn btn-danger" href="#">
Button
<i class="icon ion-android-contact"></i>
</a>
Wavies Color
<button class="btn btn-lg btn-white m-btn-waves-float waves-primary">Primary</button><button class="btn btn-lg btn-white m-btn-waves-float waves-secondary">Secondary</button><button class="btn btn-lg btn-white m-btn-waves-float waves-success">Success</button><button class="btn btn-lg btn-white m-btn-waves-float waves-info">Info</button><button class="btn btn-lg btn-white m-btn-waves-float waves-warning">Warning</button><button class="btn btn-lg btn-white m-btn-waves-float waves-danger">Danger</button><button class="btn btn-lg btn-white m-btn-waves waves-primary">Primary</button><button class="btn btn-lg btn-white m-btn-waves waves-secondary">Secondary</button><button class="btn btn-lg btn-white m-btn-waves waves-success">Success</button><button class="btn btn-lg btn-white m-btn-waves waves-info">Info</button><button class="btn btn-lg btn-white m-btn-waves waves-warning">Warning</button><button class="btn btn-lg btn-white m-btn-waves waves-danger">Danger</button>Primary Buttons
<button class="btn btn-lg btn-white m-btn-waves-float">White</button><button class="btn btn-lg btn-primary m-btn-waves-float">Primary</button><button class="btn btn-lg btn-secondary m-btn-waves-float">Secondary</button><button class="btn btn-lg btn-success m-btn-waves-float">Success</button><button class="btn btn-lg btn-info m-btn-waves-float">Info</button><button class="btn btn-lg btn-warning m-btn-waves-float">Warning</button><button class="btn btn-lg btn-danger m-btn-waves-float">Danger</button>Primary Outline Buttons
<button class="btn btn-lg btn-outline-primary m-btn-waves-float">Primary</button><button class="btn btn-lg btn-outline-secondary m-btn-waves-float">Secondary</button><button class="btn btn-lg btn-outline-success m-btn-waves-float">Success</button><button class="btn btn-lg btn-outline-info m-btn-waves-float">Info</button><button class="btn btn-lg btn-outline-warning m-btn-waves-float">Warning</button><button class="btn btn-lg btn-outline-danger m-btn-waves-float">Danger</button>Secondary Buttons
<button class="btn btn-lg btn-third m-btn-waves-float">Third</button><button class="btn btn-lg btn-fourth m-btn-waves-float">Fourth</button><button class="btn btn-lg btn-fifth m-btn-waves-float">Fifth</button><button class="btn btn-lg btn-outline-third m-btn-waves-float">Third</button> <button class="btn btn-lg btn-outline-fourth m-btn-waves-float">Fourth</button> <button class="btn btn-lg btn-outline-fifth m-btn-waves-float">Fifth</button> Social Hover Button
<div class="m-hvr-circle-region bg-primary">
<a href="https://www.facebook.com/pages/Inroads-LLC/123794954233" class="btn m-btn-top-left" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/InroadsUS" class="btn m-btn-top-right" target="_blank">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/company/inroads-llc-" class="btn m-btn-bottom-right" target="_blank">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://www.youtube.com/channel/UCONGYmrcq6AWzuJl8ll5-gg" class="btn m-btn-bottom-left" target="_blank">
<i class="fab fa-youtube"></i>
</a>
</div>
<button class="btn btn-primary btn-rounded btn-sm">btn-primary</button>
<button class="btn btn-secondary btn-rounded">btn-secondary</button>
<button class="btn btn-success btn-rounded btn-lg">btn-success</button>
<button class="btn btn-primary btn-lg">btn-primary btn-lg</button>
<button class="btn btn-primary btn-sm">btn-primary btn-sm</button>
<button class="btn btn-primary btn-block">btn-primary btn-block</button>
<button class="btn btn-success btn-block">btn-success btn-block</button>
disabled
<button type="button" class="btn btn-primary btn-lg" data-toggle="button" aria-pressed="false"
Single toggle
</button>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">disabled</a>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" Radio 2
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" Radio 3
</label>
</div>
Buttons Group
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div> <div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div> <div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button> </div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Dropdown link</a>
</li>
<li>
<a class="dropdown-item" href="#">Dropdown link</a>
</li>
</ul>
</div>
</div>
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Dropdown link
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Dropdown link
</a>
</li>
</ul>
</div>
<button type="button" class="btn btn-primary">
Button
</button>
<button type="button" class="btn btn-primary">
Button
</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">
Dropdown link
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Dropdown link
</a>
</li>
</ul>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary"
>
Action
</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
aria-expanded="false">
<span class="visually-hidden">
Toggle Dropdown
</span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#"
>Something else here</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item" href="#"
>Separated link</a>
</li>
</ul>
</div>
Email Sign-Up
Join our mailing list for the latest news and offers.
Your information is 100% safe. We hate spam too.
