Bootstrap Buttons and Badges

Level : Intermediate
Mentor: Shailendra Chauhan
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>

Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Still have some questions? Let's discuss.
CONTACT US
Accept cookies & close this