Bootstrap Buttons and Badges
Duration : 00:04:00
Button Styles:
Bootstrap offers different button styles, including primary, secondary, success, danger, warning, info, and light, which allow you to highlight buttons in various contexts.Example:
<button class="btn btn-primary">Primary</button>
<button class="btn btn-danger">Danger</button>
Button Outline:
Outline buttons have transparent backgrounds and a border, making them a subtle option for buttons.Example:
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
Button Sizes:
Bootstrap allows you to control button sizes with classes like `btn-lg`, `btn-sm`, and `btn-block`.Example:
<button class="btn btn-lg btn-primary">Large Button</button>
<button class="btn btn-sm btn-danger">Small Button</button>
Block Level Buttons:
Block-level buttons span the full width of their container.Example:
<button class="btn btn-primary btn-block">Block Button</button>
Active/Disabled Buttons:
You can style buttons as active (pressed) or disabled.Example:
<button class="btn btn-primary active">Active Button</button>
<button class="btn btn-danger" disabled>Disabled Button</button>
Spinner Buttons:
Spinner buttons show loading indicators to indicate ongoing actions.Example:
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading...
</button>
Button Groups:
Button groups allow you to group buttons together for a cohesive UI.Example:
<div class="btn-group">
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-secondary">Button 2</button>
</div>
Large, Default, and Small Buttons:
Buttons can have different sizes (large, default, small).Example:
<button class="btn btn-lg btn-primary">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-sm btn-primary">Small</button>
Vertical Button Groups:
Vertical button groups stack buttons vertically.Example:
<div class="btn-group-vertical">
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-secondary">Button 2</button>
</div>
Button Groups Side by Side:
Buttons groups can also be placed side by side.Example:
<div class="btn-group">
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-secondary">Button 2</button>
</div>
<div class="btn-group">
<button class="btn btn-success">Button 3</button>
</div>
Nesting Button Groups & Dropdown Menus:
You can nest button groups within other button groups, or include dropdown menus.Example:
<div class="btn-group">
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
</div>
</div>
Badges:
Badges are used to display small pieces of information, such as notification counts.Example:
<span class="badge badge-primary">5</span>
Contextual Badges:
Contextual badges can be styled with different colors.Example:
<span class="badge badge-danger">Alert</span>
<span class="badge badge-success">Success</span>
Pill Badges:
Pill badges have rounded edges.Example:
<span class="badge badge-pill badge-warning">New</span>
Badge inside an Element:
Badges can be placed inside various HTML elements.Example:
<a href="#">Inbox <span class="badge badge-info">42</span></a>
Still have some questions? Let's discuss.
CONTACT US