Components - Product Documentation

Buttons

Use button classes for actions in forms, dialogs, and more.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>

Outline Buttons

Cards

Cards provide a flexible content container with multiple variants and options.

Card Title

Some quick example text to build on the card title.

Go somewhere

Featured

Special title

With supporting text below.

Action

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Some quick example text.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Forms

Form controls and layouts for collecting user input.

<form>
    <div class="mb-3">
        <label for="email" class="form-label">Email address</label>
        <input type="email" class="form-control" id="email">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Modals

Use modals to add dialogs for user notifications or custom content.

<button data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch Modal
</button>

<div class="modal fade" id="exampleModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
            </div>
            <div class="modal-body">...</div>
        </div>
    </div>
</div>

Alerts

Provide contextual feedback messages for typical user actions.

A simple primary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

<div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
    A simple success alert—check it out!
</div>

Tables

Documentation and examples for opt-in styling of tables.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	Bird	@twitter

<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>First</th>
            <th>Last</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
        </tr>
    </tbody>
</table>