Elements
These modular elements can be readily used and customized across pages and in different blocks.
Elements
- Alerts
- Animation
- Background
- Badge
- Breadcrumb
- Buttons
- Button group
- Card
- Carousel
- Collapse
- Columns
- Countdown
- Dropdowns
- Forms
- Gallery
- Icon Set
- Image
- Input group
- List group
- Map
- Modal
- Navs
- Navbar
- Pagination
- Popovers
- Pricing Table
- Progress
- Responsive Utilities
- Scrollspy
- Seperators
- Tabs & wizards
- Tables
- Team
- Testimonials
- Tooltips
- Typography
- Video & Audio
Button groups <> show code
<!-- Default button group -->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<!-- Outlined button group -->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary-outlined">Left</button>
<button type="button" class="btn btn-primary-outlined">Middle</button>
<button type="button" class="btn btn-primary-outlined">Right</button>
</div>
<!-- Rounded button group -->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-success btn-rounded">Left</button>
<button type="button" class="btn btn-success btn-rounded">Middle</button>
<button type="button" class="btn btn-success btn-rounded">Right</button>
</div>
How to use
- Wrap a series of buttons with .btn into a .btn-group parent wrapper.
Example:
Outlined button group
Rounded button group
Size Variations <> show code
btn-search
<!-- Small button group -->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary btn-sm">Left</button>
<button type="button" class="btn btn-secondary btn-sm">Middle</button>
<button type="button" class="btn btn-secondary btn-sm">Right</button>
</div>
<!-- Medium button group -->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary btn-mid">Left</button>
<button type="button" class="btn btn-primary btn-mid">Middle</button>
<button type="button" class="btn btn-primary btn-mid">Right</button>
</div>
<!-- Default size button group -->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-info btn-default">Left</button>
<button type="button" class="btn btn-info btn-default">Middle</button>
<button type="button" class="btn btn-info btn-default">Right</button>
</div>
<!-- Large button group -->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-danger btn-lg">Left</button>
<button type="button" class="btn btn-danger btn-lg">Middle</button>
<button type="button" class="btn btn-danger btn-lg">Right</button>
</div>
How to use
- Based on different button size use .btn-sm ,.btn-mid , .btn-lg , .btn-default class with .btn
Example: