-
English
-
Clear All Notification
View AllCaleb Flakelar commented on Admin 1 min ago
New user registered. 5 hours ago
Cristina Pride
Hi, How are you? What about our next meeting
Caleb Flakelar commented on Admin 4 days ago
Karen Robinson
Wow ! this admin looks good and awesome design
Carlos Crouch liked Admin 13 days ago
-
Dominic Keller
Founder
Buttons
Default Buttons
Use the button classes on an <a>, <button>, or <input> element.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Button Outline
Use a classes .btn-outline-** to quickly create a bordered buttons.
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success"><i class="uil-cloud-computing"></i> Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info"><i class="uil-circuit"></i> Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Button-Rounded
Add .btn-rounded to default button to get rounded corners.
<button type="button" class="btn btn-primary btn-rounded">Primary</button>
<button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
<button type="button" class="btn btn-success btn-rounded">Success</button>
<button type="button" class="btn btn-danger btn-rounded">Danger</button>
<button type="button" class="btn btn-warning btn-rounded">Warning</button>
<button type="button" class="btn btn-info btn-rounded">Info</button>
<button type="button" class="btn btn-light btn-rounded">Light</button>
<button type="button" class="btn btn-dark btn-rounded">Dark</button>
<button type="button" class="btn btn-link btn-rounded">Link</button>
Button Outline Rounded
Use a classes .btn-outline-** to quickly create a bordered buttons.
<button type="button" class="btn btn-outline-primary btn-rounded">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-rounded">Secondary</button>
<button type="button" class="btn btn-outline-success btn-rounded"><i class="uil-cloud-computing"></i> Success</button>
<button type="button" class="btn btn-outline-danger btn-rounded">Danger</button>
<button type="button" class="btn btn-outline-warning btn-rounded">Warning</button>
<button type="button" class="btn btn-outline-info btn-rounded"><i class="uil-circuit"></i> Info</button>
<button type="button" class="btn btn-outline-light btn-rounded">Light</button>
<button type="button" class="btn btn-outline-dark btn-rounded">Dark</button>
Button-Sizes
Add .btn-lg, .btn-sm for additional sizes.
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-info">Normal</button>
<button type="button" class="btn btn-success btn-sm">Small</button>
Button-Disabled
Add the disabled attribute to <button> buttons.
<button type="button" class="btn btn-info" disabled>Info</button>
<button type="button" class="btn btn-success" disabled>Success</button>
<button type="button" class="btn btn-danger" disabled>Danger</button>
<button type="button" class="btn btn-dark" disabled>Dark</button>
Icon Buttons
Icon only button.
<button type="button" class="btn btn-light"><i class="mdi mdi-heart-outline"></i> </button>
<button type="button" class="btn btn-danger"><i class="mdi mdi-window-close"></i> </button>
<button type="button" class="btn btn-dark"><i class="mdi mdi-music"></i> </button>
<button type="button" class="btn btn-primary"><i class="mdi mdi-star"></i> </button>
<button type="button" class="btn btn-success"><i class="mdi mdi-thumb-up-outline"></i> </button>
<button type="button" class="btn btn-info"><i class="mdi mdi-keyboard"></i> </button>
<button type="button" class="btn btn-warning"><i class="mdi mdi-wrench"></i> </button>
<button type="button" class="btn btn-light"><i class="mdi mdi-heart me-1"></i> <span>Like</span> </button>
<button type="button" class="btn btn-warning"><i class="mdi mdi-rocket me-1"></i> <span>Launch</span> </button>
<button type="button" class="btn btn-info"><i class="mdi mdi-cloud me-1"></i> <span>Cloud Hosting</span> </button>
<button type="button" class="btn btn-outline-success"><i class="uil-money-withdrawal"></i> Money</button>
<button type="button" class="btn btn-outline-primary"><i class="uil-paypal"></i> PayPal</button>
<button type="button" class="btn btn-outline-danger"><i class="uil-cog"></i> Settings</button>
Block Button
Create block level buttons by adding class .d-grid to parent div.
<div class="d-grid">
<button type="button" class="btn btn-primary">Block Button</button>
<button type="button" class="btn btn-sm btn-info">Block Button</button>
<button type="button" class="btn btn-xs btn-success">Block Button</button>
</div>
<!-- end d-grid -->
Button Group
Wrap a series of buttons with .btn in .btn-group.
<!-- Button Group -->
<div class="btn-group mb-2">
<button type="button" class="btn btn-light">Left</button>
<button type="button" class="btn btn-light">Middle</button>
<button type="button" class="btn btn-light">Right</button>
</div>
<!-- Button Group with Dropdowns-->
<div class="btn-group mb-2">
<button type="button" class="btn btn-light">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-light">3</button>
<div class="btn-group">
<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<!-- Button Group Vertical-->
<div class="btn-group-vertical mb-2">
<button type="button" class="btn btn-light">Top</button>
<button type="button" class="btn btn-light">Middle</button>
<button type="button" class="btn btn-light">Bottom</button>
</div>
<!-- Button Group Vertical with Dropdowns-->
<div class="btn-group-vertical mb-2">
<button type="button" class="btn btn-light">Button 1</button>
<button type="button" class="btn btn-light">Button 2</button>
<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Button 3 </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>