Components

Bootstrap Buttons, Forms & Tables — Essential Components

Buttons, forms, and tables are the most frequently used components in web development. Bootstrap provides beautifully styled, accessible, and responsive versions of all three. Mastering these components will allow you to build functional, professional interfaces quickly.

1. Bootstrap Buttons

Bootstrap buttons are versatile, accessible, and come in multiple styles, sizes, and states. Use the .btn class with a contextual color class.

Button Styles

Class	Style	Use Case
`.btn-primary`	Primary (brand blue)	Primary actions (Submit, Save)
`.btn-secondary`	Secondary (gray)	Secondary actions (Cancel, Back)
`.btn-success`	Success (green)	Positive actions (Approve, Confirm)
`.btn-danger`	Danger (red)	Destructive actions (Delete, Remove)
`.btn-warning`	Warning (yellow)	Cautionary actions (Alert, Notice)
`.btn-info`	Info (cyan)	Informational actions (Help, More)
`.btn-light`	Light (white)	Light backgrounds
`.btn-dark`	Dark (black)	Dark backgrounds
`.btn-link`	Link style	Text-like button
`.btn-outline-*`	Outlined	Less prominent actions

Button Examples

<!-- Solid buttons -->
<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>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

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

<!-- Link button -->
<button type="button" class="btn btn-link">Link Button</button>

Button Sizes

Use .btn-lg (large), .btn-sm (small), or .btn-xs (extra small) to control button size.

<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 States

<!-- Active state -->
<button type="button" class="btn btn-primary active">Active</button>

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

<!-- Block (full width) button -->
<button type="button" class="btn btn-primary d-block w-100">Full Width</button>

<!-- Button with icon -->
<button type="button" class="btn btn-success">
    <i class="fas fa-check"></i> Save
</button>

Button Groups

Group buttons together using .btn-group.

<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

2. Bootstrap Forms

Bootstrap forms provide a clean, consistent, and accessible way to collect user input. They support validation, responsive layouts, and various input types.

Basic Form Structure

<form>
    <div class="mb-3">
        <label for="email" class="form-label">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="name@example.com">
    </div>
    <div class="mb-3">
        <label for="password" class="form-label">Password</label>
        <input type="password" class="form-control" id="password">
    </div>
    <div class="mb-3">
        <label for="textarea" class="form-label">Textarea</label>
        <textarea class="form-control" id="textarea" rows="3"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Form Input Types

Input Type	Example Class	Use Case
`text`	`.form-control`	Single line text
`email`	`.form-control`	Email addresses
`password`	`.form-control`	Passwords
`number`	`.form-control`	Numbers
`textarea`	`.form-control`	Multi-line text
`select`	`.form-select`	Dropdown selection
`checkbox`	`.form-check-input`	Checkboxes
`radio`	`.form-check-input`	Radio buttons
`range`	`.form-range`	Slider
`file`	`.form-control`	File upload

Form Layout Options

Inline Form

<form class="row g-3">
    <div class="col-auto">
        <label for="inlineEmail" class="visually-hidden">Email</label>
        <input type="text" class="form-control" id="inlineEmail" placeholder="Email">
    </div>
    <div class="col-auto">
        <label for="inlinePassword" class="visually-hidden">Password</label>
        <input type="password" class="form-control" id="inlinePassword" placeholder="Password">
    </div>
    <div class="col-auto">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

Horizontal Form

<form>
    <div class="row mb-3">
        <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3">
        </div>
    </div>
    <div class="row mb-3">
        <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3">
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Form Sizing

<!-- Large form -->
<input class="form-control form-control-lg" type="text" placeholder="Large input">

<!-- Default form -->
<input class="form-control" type="text" placeholder="Default input">

<!-- Small form -->
<input class="form-control form-control-sm" type="text" placeholder="Small input">

Floating Labels

Floating labels create a modern, clean look where the label floats above the input when focused or filled.

<div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
    <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
    <textarea class="form-control" id="floatingTextarea" style="height: 100px"></textarea>
    <label for="floatingTextarea">Comments</label>
</div>

Form Validation

Bootstrap provides validation styles for form feedback using .was-validated and .is-valid/.is-invalid classes.

<form class="was-validated">
    <div class="mb-3">
        <label for="validationName" class="form-label">Name</label>
        <input type="text" class="form-control is-valid" id="validationName" value="John Doe" required>
        <div class="valid-feedback">Looks good!</div>
    </div>
    <div class="mb-3">
        <label for="validationEmail" class="form-label">Email</label>
        <input type="email" class="form-control is-invalid" id="validationEmail" value="invalid" required>
        <div class="invalid-feedback">Please provide a valid email.</div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Input Groups

Add text, buttons, or icons before/after inputs using .input-group.

<div class="input-group mb-3">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control" placeholder="Amount">
    <span class="input-group-text">.00</span>
</div>

<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Search...">
    <button class="btn btn-primary" type="button">Search</button>
</div>

3. Bootstrap Tables

Bootstrap tables are clean, responsive, and highly customizable. Use the .table class on any <table> element.

Basic Table

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jane</td>
            <td>Smith</td>
            <td>jane@example.com</td>
        </tr>
    </tbody>
</table>

Table Variants

Class	Effect
`.table-striped`	Adds zebra-striping to rows
`.table-bordered`	Adds borders on all sides
`.table-hover`	Highlight row on hover
`.table-sm`	Compact table (smaller padding)
`.table-dark`	Dark theme table
`.table-responsive`	Makes table horizontally scrollable

Table Examples

<!-- Striped + Hover + Bordered -->
<table class="table table-striped table-hover table-bordered">
    <!-- table content -->
</table>

<!-- Responsive table (scrollable on small screens) -->
<div class="table-responsive">
    <table class="table">
        <!-- table content -->
    </table>
</div>

Contextual Table Rows

Use contextual classes on rows (<tr>) to highlight specific data.

<table class="table">
    <tbody>
        <tr class="table-primary">
            <td>Primary row</td>
            <td>Info</td>
        </tr>
        <tr class="table-success">
            <td>Success row</td>
            <td>Positive</td>
        </tr>
        <tr class="table-danger">
            <td>Danger row</td>
            <td>Negative</td>
        </tr>
        <tr class="table-warning">
            <td>Warning row</td>
            <td>Caution</td>
        </tr>
        <tr class="table-info">
            <td>Info row</td>
            <td>Neutral</td>
        </tr>
    </tbody>
</table>

Table Head Options

<table class="table">
    <thead class="table-dark">
        <tr>
            <th>#</th>
            <th>Name</th>
        </tr>
    </thead>
    <thead class="table-light">
        <tr>
            <th>#</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <!-- data -->
    </tbody>
</table>

Putting It All Together

Here's a complete example combining buttons, forms, and tables:

<div class="container mt-4">
    <h2>User Management</h2>
    
    <!-- Form to add a user -->
    <form class="row g-3 mb-4">
        <div class="col-md-4">
            <input type="text" class="form-control" placeholder="First name">
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control" placeholder="Last name">
        </div>
        <div class="col-md-3">
            <input type="email" class="form-control" placeholder="Email">
        </div>
        <div class="col-md-1">
            <button type="submit" class="btn btn-success">
                <i class="fas fa-plus"></i> Add
            </button>
        </div>
    </form>

    <!-- Table of users -->
    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead class="table-dark">
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>John</td>
                    <td>Doe</td>
                    <td>john@example.com</td>
                    <td>
                        <button class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></button>
                        <button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jane</td>
                    <td>Smith</td>
                    <td>jane@example.com</td>
                    <td>
                        <button class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></button>
                        <button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Pro Tip: These three components (buttons, forms, tables) appear on almost every web application. Practice combining them to build CRUD (Create, Read, Update, Delete) interfaces — it's the most common pattern in web development.

PreviousBootstrap Typography, Colors & Spacing — Core Utilities Next Bootstrap Navbar & Cards — Layout & Content Containers

Ready to master Bootstrap?

Master Bootstrap from scratch. Learn how to build modern, responsive websites with this complete frontend framework guide.

Explore Uncodemy