Bootstrap Buttons

Bootstrap buttons are predefined CSS styles used to create professional looking buttons without writing a lot of custom CSS.

Example:

<button class="btn btn-primary">Click Me</button>

The .btn class provides the basic button styling, while .btn-primary defines the button's contextual appearance.

The simplest Bootstrap button uses the .btn class. Usually, it is combined with a contextual button class.

<button class="btn btn-primary">Primary Button</button>

Bootstrap provides consistent padding, border radius, font styling, and other visual properties.

The .btn-primary class is commonly used for the main or important action on a page.

<button class="btn btn-primary">Save</button>

Primary buttons are useful for actions such as Save, Submit, Continue, Login, and Next.

The .btn-success class is generally used for successful or positive actions.

<button class="btn btn-success">Success</button>

For example, you can use it for Confirm, Complete, Approve, or Save actions.

The .btn-danger class is commonly used for destructive or dangerous actions.

<button class="btn btn-danger">Delete</button>

It can be used for Delete, Remove, Cancel, or other actions that need extra attention.

The .btn-warning class creates a warning-style button.

<button class="btn btn-warning">Warning</button>

Warning buttons can be used when an action requires user attention.

The .btn-info class creates an informational button.

<button class="btn btn-info">More Info</button>

It can be useful for actions such as More Info, Details, or Help.

The .btn-light class creates a light-colored button.

<button class="btn btn-light">Light Button</button>

Light buttons are useful on darker backgrounds.

The .btn-dark class creates a dark button.

<button class="btn btn-dark">Dark Button</button>

Dark buttons are useful when you want strong visual contrast.

The .btn-secondary class is useful for secondary actions.

<button class="btn btn-secondary">Cancel</button>

For example, a form may use a primary button for Submit and a secondary button for Cancel.

Bootstrap can style an anchor element as a button.

<a href="#" class="btn btn-primary">
Go to Page
</a>

This is useful when clicking the button should navigate to another page.

Bootstrap provides outline button classes that display a transparent background with a colored border.

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

Outline buttons are useful when you want less visual emphasis.

Bootstrap provides outline versions for several contextual colors.

<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Delete</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-dark">Dark</button>

The .btn-lg class creates a larger button.

<button class="btn btn-primary btn-lg">
Large Button
</button>

Large buttons can be useful for important actions or prominent areas.

The .btn-sm class creates a smaller button.

<button class="btn btn-primary btn-sm">
Small Button
</button>

Small buttons can be useful in tables, dashboards, and compact interfaces.

If you do not use .btn-lg or .btn-sm, Bootstrap uses the normal button size.

<button class="btn btn-primary">
Normal Button
</button>

The normal size is suitable for most common interface actions.

A button can be disabled using the HTML disabled attribute.

<button class="btn btn-primary" disabled>
Disabled
</button>

A disabled button cannot normally be clicked or activated by the user.

For anchor elements, Bootstrap provides the .disabled class to visually indicate that the link is disabled.

<a href="#" class="btn btn-primary disabled">
Disabled Link
</a>

Remember that .disabled on a link is mainly a visual and interaction state. Proper application logic may still be required.

Bootstrap utilities can be combined with buttons to make them occupy the available width.

<button class="btn btn-primary w-100">
Full Width Button
</button>

The w-100 utility sets the width to 100%.

Icons can be placed inside buttons to make their purpose easier to understand.

<button class="btn btn-success">
✓ Save
</button>

<button class="btn btn-danger">
🗑 Delete
</button>

You can use Bootstrap Icons or another icon library when your project includes one.

Multiple Bootstrap buttons can be placed next to each other.

<button class="btn btn-primary">Save</button>
<button class="btn btn-secondary">Cancel</button>
<button class="btn btn-danger">Delete</button>

The .btn-group class combines multiple buttons into a single connected group.

<div class="btn-group">
    <button class="btn btn-primary">Left</button>
    <button class="btn btn-primary">Middle</button>
    <button class="btn btn-primary">Right</button>
</div>

The .btn-group-vertical class displays buttons vertically.

<div class="btn-group-vertical">
    <button class="btn btn-primary">Home</button>
    <button class="btn btn-primary">About</button>
    <button class="btn btn-primary">Contact</button>
</div>

Bootstrap buttons are commonly used with HTML forms.

<form>

<input type="text"
class="form-control mb-2"
placeholder="Enter your name">

<button type="submit"
class="btn btn-primary">
Submit
</button>

</form>

HTML provides different button types. The most common types are button, submit, and reset.

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

<button type="submit" class="btn btn-success">
Submit
</button>

<button type="reset" class="btn btn-danger">
Reset
</button>

Choosing the correct HTML button type is important when working with forms.

Bootstrap provides several contextual button classes.

.btn-primary
.btn-secondary
.btn-success
.btn-danger
.btn-warning
.btn-info
.btn-light
.btn-dark

Bootstrap classes can be combined to create different button sizes and styles.

<button class="btn btn-primary btn-lg">
Large Primary
</button>

<button class="btn btn-outline-success btn-sm">
Small Outline
</button>

<button class="btn btn-danger w-100 mt-2">
Full Width
</button>

Buttons should have clear text that explains what will happen when the user clicks them.

Good examples:

• Save Changes
• Submit Form
• Delete Account
• Download File
• View Details

Avoid unclear labels such as only "Click Here" when a more descriptive label can be used.

Here is a simple example of buttons commonly used in an admin panel.

<div class="mb-3">

    <button class="btn btn-primary">
        Add Student
    </button>

    <button class="btn btn-success">
        Save
    </button>

    <button class="btn btn-warning">
        Edit
    </button>

    <button class="btn btn-danger">
        Delete
    </button>

    <button class="btn btn-secondary">
        Cancel
    </button>

</div>

This type of button arrangement is frequently used in dashboards, management systems, and CRUD applications.

The following example combines several Bootstrap button features.

<div class="container mt-4">

    <h3>Student Management</h3>

    <button class="btn btn-primary">
        Add Student
    </button>

    <button class="btn btn-success">
        Save
    </button>

    <button class="btn btn-warning">
        Edit
    </button>

    <button class="btn btn-danger">
        Delete
    </button>

    <button class="btn btn-outline-secondary">
        Cancel
    </button>

</div>

This example demonstrates how Bootstrap buttons can be used to create a simple and professional action area.