Prev Next

BS5 Buttons

Bootstrap 5 provides a wide range of button styles and sizes, along with utility classes for additional customization. Buttons are versatile and can be easily styled for any project.

Key Topics

Basic Buttons

Bootstrap buttons are created using the .btn class with contextual color classes such as .btn-primary, .btn-success, and more.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>

Explanation: The .btn class is required for all buttons, while contextual classes apply specific colors.

Button Sizes

Buttons can be styled in different sizes using classes like .btn-lg for large and .btn-sm for small buttons.

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

Explanation: Adding .btn-lg or .btn-sm adjusts the size of buttons to fit various use cases.

Outline Buttons

Use .btn-outline-* classes for buttons with a border and transparent background.

<button type="button" class="btn btn-outline-primary">Primary Outline</button>
<button type="button" class="btn btn-outline-danger">Danger Outline</button>

Explanation: Outline buttons are great for subtle interactions while maintaining consistent styling.

Complete Button Example

Below is a complete HTML page demonstrating different Bootstrap button styles, sizes, and outlines.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Buttons Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>Bootstrap Buttons</h2>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-outline-secondary btn-lg">Large Outline</button>
        <button type="button" class="btn btn-warning btn-sm">Small Warning</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example includes basic, outline, and sized buttons with different contextual colors.

Key Takeaways

  • Bootstrap buttons use .btn and contextual classes like .btn-primary.
  • Size buttons with .btn-lg or .btn-sm for larger or smaller buttons.
  • Outline buttons provide a lightweight alternative to solid buttons.
Prev Next