Skip to main content

Bootstrap Buttons

Bootstrap Buttons

Bootstrap provides a versatile set of button styles that can be easily customized and integrated into your web projects. Buttons in Bootstrap are styled using CSS classes, making it simple to create primary, secondary, success, warning, danger, and other button variations.

1. Basic Button Styles

Bootstrap offers several basic button styles:

  • Primary Button: Indicates the main action in a layout.
  • Secondary Button: Used for secondary actions or as alternatives to primary buttons.
  • Success Button: Indicates a successful or positive action.
  • Warning Button: Indicates a potentially dangerous action.
  • Danger Button: Indicates a dangerous or potentially negative action.
  • Info Button: Provides additional information or actions.
  • Light Button: Used for light-colored backgrounds.
  • Dark Button: Used for dark-colored backgrounds.

Example:

<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-light">Light Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>

2. Outline Buttons

Bootstrap also provides outline button styles for a cleaner and less prominent appearance:

  • Outline Primary Button
  • Outline Secondary Button
  • Outline Success Button
  • Outline Warning Button
  • Outline Danger Button
  • Outline Info Button
  • Outline Light Button
  • Outline Dark Button

Example:

<button type="button" class="btn btn-outline-primary">Outline Primary Button</button>
<button type="button" class="btn btn-outline-secondary">Outline Secondary Button</button>
<button type="button" class="btn btn-outline-success">Outline Success Button</button>
<button type="button" class="btn btn-outline-warning">Outline Warning Button</button>
<button type="button" class="btn btn-outline-danger">Outline Danger Button</button>
<button type="button" class="btn btn-outline-info">Outline Info Button</button>
<button type="button" class="btn btn-outline-light">Outline Light Button</button>
<button type="button" class="btn btn-outline-dark">Outline Dark Button</button>

3. Button Sizes

Bootstrap allows you to customize the size of buttons:

  • Large Button
  • Default Button
  • Small Button
  • Extra Small Button

Example:

<button type="button" class="btn btn-primary btn-lg">Large Button</button>
<button type="button" class="btn btn-primary">Default Button</button>
<button type="button" class="btn btn-primary btn-sm">Small Button</button>
<button type="button" class="btn btn-primary btn-xs">Extra Small Button</button>

4. Block Buttons

Bootstrap offers block level buttons that span the full width of their parent:

<button type="button" class="btn btn-primary btn-block">Block Button</button>

Conclusion

Bootstrap provides a comprehensive set of button styles and options to enhance the visual appeal and functionality of your web applications. By utilizing the various button classes and customization options, developers can create attractive and responsive buttons that meet their design requirements.

Comments

Post a Comment