Elysia Tools

Browse tools, examples, visual explainers, and topic guides from one clear workspace.

Top Categories

Hubs

Language
ZHDERUPTENFRES

Elysia Tools

Navigation

CSS Frameworks

Bootstrap 5 Samples

Bootstrap 5 CSS framework examples including components, utilities, layout system, and responsive design patterns

Samples

Entries inside this sample collection

CodehtmlSimple

Bootstrap Grid Layout System

Complete Bootstrap 5 grid system examples with responsive breakpoints and layout utilities

Difficulty

3/10

Estimated time

20 min

Tags

bootstrap, grid, layout, responsive

Prerequisites

HTML basics, CSS basics

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Grid System</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .demo-cell {
            background-color: #007bff;
            color: white;
            border: 1px solid rgba(255,255,255,0.3);
            padding: 1rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h1>Bootstrap 5 Grid System Examples</h1>

        <!-- Basic Grid -->
        <h2 class="mt-4">Basic Grid</h2>
        <div class="row">
            <div class="col demo-cell">Column 1</div>
            <div class="col demo-cell">Column 2</div>
            <div class="col demo-cell">Column 3</div>
        </div>

        <!-- Grid with Column Sizing -->
        <h2 class="mt-4">Column Sizing</h2>
        <div class="row">
            <div class="col-4 demo-cell">col-4</div>
            <div class="col-4 demo-cell">col-4</div>
            <div class="col-4 demo-cell">col-4</div>
        </div>

        <div class="row mt-2">
            <div class="col-6 demo-cell">col-6</div>
            <div class="col-6 demo-cell">col-6</div>
        </div>

        <!-- Responsive Grid -->
        <h2 class="mt-4">Responsive Grid</h2>
        <div class="row">
            <div class="col-12 col-md-6 col-lg-4 demo-cell">
                12 on mobile, 6 on tablet, 4 on desktop
            </div>
            <div class="col-12 col-md-6 col-lg-4 demo-cell">
                12 on mobile, 6 on tablet, 4 on desktop
            </div>
            <div class="col-12 col-md-12 col-lg-4 demo-cell">
                12 on mobile/tablet, 4 on desktop
            </div>
        </div>

        <!-- Auto Layout Columns -->
        <h2 class="mt-4">Auto Layout Columns</h2>
        <div class="row">
            <div class="col demo-cell">Auto column</div>
            <div class="col demo-cell">Auto column</div>
            <div class="col demo-cell">Auto column</div>
        </div>

        <!-- Nested Grid -->
        <h2 class="mt-4">Nested Grid</h2>
        <div class="row">
            <div class="col-8 demo-cell" style="background-color: #28a745;">
                <div class="row">
                    <div class="col-6" style="background-color: #17a2b8;">Nested 1</div>
                    <div class="col-6" style="background-color: #17a2b8;">Nested 2</div>
                </div>
            </div>
            <div class="col-4 demo-cell">Column</div>
        </div>

        <!-- Offset Columns -->
        <h2 class="mt-4">Offset Columns</h2>
        <div class="row">
            <div class="col-4 demo-cell">Column</div>
            <div class="col-4 offset-4 demo-cell">Offset 4</div>
        </div>

        <!-- Gutter Utilities -->
        <h2 class="mt-4">Gutter Utilities</h2>
        <div class="row g-0">
            <div class="col-6 demo-cell">No gutter</div>
            <div class="col-6 demo-cell">No gutter</div>
        </div>

        <div class="row g-3 mt-2">
            <div class="col-6 demo-cell">Gutter 3</div>
            <div class="col-6 demo-cell">Gutter 3</div>
        </div>

        <!-- Row and Column Utilities -->
        <h2 class="mt-4">Row and Column Utilities</h2>
        <div class="row justify-content-center">
            <div class="col-4 demo-cell">Centered</div>
        </div>

        <div class="row justify-content-end">
            <div class="col-4 demo-cell">Right aligned</div>
        </div>

        <div class="row justify-content-between">
            <div class="col-3 demo-cell">Left</div>
            <div class="col-3 demo-cell">Right</div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CodehtmlIntermediate

Bootstrap 5 Components

Essential Bootstrap 5 UI components including buttons, cards, modals, navigation, and forms

Difficulty

4/10

Estimated time

30 min

Tags

bootstrap, components, ui

Prerequisites

HTML basics, CSS basics, Bootstrap grid system

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Components</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
    <div class="container mt-4">
        <h1>Bootstrap 5 Components</h1>

        <!-- Buttons -->
        <h2 class="mt-5">Buttons</h2>
        <div class="mb-3">
            <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>
        </div>

        <div class="mb-3">
            <button type="button" class="btn btn-outline-primary">Primary Outline</button>
            <button type="button" class="btn btn-outline-secondary">Secondary Outline</button>
            <button type="button" class="btn btn-outline-success">Success Outline</button>
        </div>

        <div class="mb-3">
            <button type="button" class="btn btn-primary btn-lg">Large button</button>
            <button type="button" class="btn btn-primary btn-sm">Small button</button>
        </div>

        <!-- Alerts -->
        <h2 class="mt-5">Alerts</h2>
        <div class="alert alert-primary" role="alert">
            A simple primary alert—check it out!
        </div>
        <div class="alert alert-secondary" role="alert">
            A simple secondary alert—check it out!
        </div>
        <div class="alert alert-success" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i>
            Success! Your changes have been saved.
        </div>
        <div class="alert alert-danger" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>
            Danger! Something went wrong.
        </div>

        <!-- Cards -->
        <h2 class="mt-5">Cards</h2>
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card image">
                    <div class="card-body">
                        <h5 class="card-title">Card Title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        Featured
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Special Title Treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                    <div class="card-footer text-muted">
                        2 days ago
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-white bg-primary">
                    <div class="card-body">
                        <h5 class="card-title">Primary Card</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Badges -->
        <h2 class="mt-5">Badges</h2>
        <div class="mb-3">
            <h1>Example heading <span class="badge bg-secondary">New</span></h1>
            <h2>Example heading <span class="badge bg-secondary">New</span></h2>
            <h3>Example heading <span class="badge bg-secondary">New</span></h3>
            <h4>Example heading <span class="badge bg-secondary">New</span></h4>
            <h5>Example heading <span class="badge bg-secondary">New</span></h5>
            <h6>Example heading <span class="badge bg-secondary">New</span></h6>
        </div>

        <div class="mb-3">
            <button type="button" class="btn btn-primary">
                Notifications <span class="badge bg-secondary">4</span>
            </button>
        </div>

        <div class="mb-3">
            <span class="badge bg-primary">Primary</span>
            <span class="badge bg-secondary">Secondary</span>
            <span class="badge bg-success">Success</span>
            <span class="badge bg-danger">Danger</span>
            <span class="badge bg-warning text-dark">Warning</span>
            <span class="badge bg-info text-dark">Info</span>
            <span class="badge bg-light text-dark">Light</span>
            <span class="badge bg-dark">Dark</span>
        </div>

        <!-- Progress -->
        <h2 class="mt-5">Progress</h2>
        <div class="progress mb-3">
            <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress mb-3">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
        </div>
        <div class="progress mb-3">
            <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
        </div>
        <div class="progress mb-3">
            <div class="progress-bar bg-info" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
        </div>

        <!-- List Groups -->
        <h2 class="mt-5">List Groups</h2>
        <div class="row">
            <div class="col-md-4">
                <ul class="list-group">
                    <li class="list-group-item">An item</li>
                    <li class="list-group-item">A second item</li>
                    <li class="list-group-item">A third item</li>
                    <li class="list-group-item">A fourth item</li>
                    <li class="list-group-item">And a fifth one</li>
                </ul>
            </div>
            <div class="col-md-4">
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
                        The current link item
                    </a>
                    <a href="#" class="list-group-item list-group-item-action">A second link item</a>
                    <a href="#" class="list-group-item list-group-item-action">A third link item</a>
                    <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
                    <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
                </div>
            </div>
            <div class="col-md-4">
                <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        A list item
                        <span class="badge bg-primary rounded-pill">14</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        A second list item
                        <span class="badge bg-primary rounded-pill">2</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        A third list item
                        <span class="badge bg-primary rounded-pill">1</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CodehtmlIntermediate

Bootstrap 5 Forms

Bootstrap 5 form components including inputs, validation, checkboxes, radio buttons, and form layouts

Difficulty

5/10

Estimated time

35 min

Tags

bootstrap, forms, validation, ui

Prerequisites

HTML forms, Bootstrap basics, JavaScript basics

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Forms</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h1>Bootstrap 5 Forms</h1>

        <!-- Basic Form -->
        <h2 class="mt-5">Basic Form</h2>
        <form>
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
            </div>
            <div class="mb-3">
                <label for="exampleInputPassword1" class="form-label">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1">
            </div>
            <div class="mb-3 form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>

        <!-- Form Controls -->
        <h2 class="mt-5">Form Controls</h2>
        <form>
            <div class="mb-3">
                <label for="exampleFormControlInput1" class="form-label">Email address</label>
                <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
            </div>
            <div class="mb-3">
                <label for="exampleFormControlSelect1" class="form-label">Select dropdown</label>
                <select class="form-select" id="exampleFormControlSelect1">
                    <option selected>Choose...</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="exampleFormControlSelect2" class="form-label">Multiple select</label>
                <select multiple class="form-select" id="exampleFormControlSelect2">
                    <option selected>Choose...</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                    <option value="4">Four</option>
                    <option value="5">Five</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
            <div class="mb-3">
                <label for="formFile" class="form-label">Default file input example</label>
                <input class="form-control" type="file" id="formFile">
            </div>
            <div class="mb-3">
                <label for="formFileMultiple" class="form-label">Multiple files input example</label>
                <input class="form-control" type="file" id="formFileMultiple" multiple>
            </div>
        </form>

        <!-- Sizing -->
        <h2 class="mt-5">Form Sizing</h2>
        <div class="mb-3">
            <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
        </div>
        <div class="mb-3">
            <input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
        </div>
        <div class="mb-3">
            <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
        </div>

        <!-- Checkboxes and Radios -->
        <h2 class="mt-5">Checkboxes and Radios</h2>
        <div class="row">
            <div class="col-md-6">
                <h5>Checkboxes</h5>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                    <label class="form-check-label" for="flexCheckDefault">
                        Default checkbox
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
                    <label class="form-check-label" for="flexCheckChecked">
                        Checked checkbox
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
                    <label class="form-check-label" for="flexCheckDisabled">
                        Disabled checkbox
                    </label>
                </div>
            </div>
            <div class="col-md-6">
                <h5>Radio buttons</h5>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                    <label class="form-check-label" for="flexRadioDefault1">
                        Default radio
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
                    <label class="form-check-label" for="flexRadioDefault2">
                        Default checked radio
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDisabled" disabled>
                    <label class="form-check-label" for="flexRadioDisabled">
                        Disabled radio
                    </label>
                </div>
            </div>
        </div>

        <!-- Inline Checkboxes and Radios -->
        <h2 class="mt-5">Inline Checkboxes and Radios</h2>
        <div class="mb-3">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                <label class="form-check-label" for="inlineCheckbox1">1</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
                <label class="form-check-label" for="inlineCheckbox2">2</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
                <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
            </div>
        </div>

        <div class="mb-3">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label class="form-check-label" for="inlineRadio1">1</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                <label class="form-check-label" for="inlineRadio2">2</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
                <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
            </div>
        </div>

        <!-- Form Validation -->
        <h2 class="mt-5">Form Validation</h2>
        <form class="row g-3 needs-validation" novalidate>
            <div class="col-md-6">
                <label for="validationCustom01" class="form-label">First name</label>
                <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
                <div class="valid-feedback">
                    Looks good!
                </div>
            </div>
            <div class="col-md-6">
                <label for="validationCustom02" class="form-label">Last name</label>
                <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
                <div class="valid-feedback">
                    Looks good!
                </div>
            </div>
            <div class="col-md-6">
                <label for="validationCustomUsername" class="form-label">Username</label>
                <div class="input-group has-validation">
                    <span class="input-group-text" id="inputGroupPrepend">@</span>
                    <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
                    <div class="invalid-feedback">
                        Please choose a username.
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <label for="validationCustom03" class="form-label">City</label>
                <input type="text" class="form-control" id="validationCustom03" required>
                <div class="invalid-feedback">
                    Please provide a valid city.
                </div>
            </div>
            <div class="col-md-6">
                <label for="validationCustom04" class="form-label">State</label>
                <select class="form-select" id="validationCustom04" required>
                    <option selected disabled value="">Choose...</option>
                    <option>...</option>
                </select>
                <div class="invalid-feedback">
                    Please select a valid state.
                </div>
            </div>
            <div class="col-md-6">
                <label for="validationCustom05" class="form-label">Zip</label>
                <input type="text" class="form-control" id="validationCustom05" required>
                <div class="invalid-feedback">
                    Please provide a valid zip.
                </div>
            </div>
            <div class="col-12">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
                    <label class="form-check-label" for="invalidCheck">
                        Agree to terms and conditions
                    </label>
                    <div class="invalid-feedback">
                        You must agree before submitting.
                    </div>
                </div>
            </div>
            <div class="col-12">
                <button class="btn btn-primary" type="submit">Submit form</button>
            </div>
        </form>

        <!-- Input Groups -->
        <h2 class="mt-5">Input Groups</h2>
        <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">@</span>
            <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
        </div>

        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
            <span class="input-group-text" id="basic-addon2">@example.com</span>
        </div>

        <div class="input-group mb-3">
            <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
            <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
        </div>

        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="button-addon2">
            <button class="btn btn-outline-secondary" type="button" id="button-addon2">Search</button>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function () {
            'use strict'
            var forms = document.querySelectorAll('.needs-validation')
            Array.prototype.slice.call(forms).forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
        })()
    </script>
</body>
</html>
CodehtmlIntermediate

Bootstrap 5 Navigation

Bootstrap 5 navigation components including navbar, navs, breadcrumbs, pagination, and offcanvas

Difficulty

5/10

Estimated time

30 min

Tags

bootstrap, navigation, ui, layout

Prerequisites

HTML basics, Bootstrap components, JavaScript basics

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Navigation</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
    <!-- Basic Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Dropdown
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled">Disabled</a>
                    </li>
                </ul>
                <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-light" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <h1>Bootstrap 5 Navigation Examples</h1>

        <!-- Color Schemes -->
        <h2 class="mt-5">Navbar Color Schemes</h2>
        <div class="row">
            <div class="col-12 mb-3">
                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <div class="container-fluid">
                        <a class="navbar-brand" href="#">Light</a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarLight" aria-controls="navbarLight" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarLight">
                            <ul class="navbar-nav">
                                <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                                <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>

            <div class="col-12 mb-3">
                <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                    <div class="container-fluid">
                        <a class="navbar-brand" href="#">Dark</a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDark" aria-controls="navbarDark" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarDark">
                            <ul class="navbar-nav">
                                <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                                <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>

        <!-- Navs and Tabs -->
        <h2 class="mt-5">Navs and Tabs</h2>
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
            </li>
        </ul>

        <!-- Pills -->
        <h3 class="mt-4">Pills</h3>
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
            </li>
        </ul>

        <!-- Fill and Justify -->
        <h3 class="mt-4">Fill and Justify</h3>
        <ul class="nav nav-pills nav-fill">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Much longer nav link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
            </li>
        </ul>

        <!-- Tabs with Dropdown -->
        <h3 class="mt-4">Tabs with Dropdown</h3>
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
            </li>
        </ul>

        <!-- Breadcrumbs -->
        <h2 class="mt-5">Breadcrumbs</h2>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active" aria-current="page">Home</li>
            </ol>
        </nav>

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Library</li>
            </ol>
        </nav>

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item"><a href="#">Library</a></li>
                <li class="breadcrumb-item active" aria-current="page">Data</li>
            </ol>
        </nav>

        <!-- Pagination -->
        <h2 class="mt-5">Pagination</h2>
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item active"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">Next</a></li>
            </ul>
        </nav>

        <!-- Pagination with Icons -->
        <h3 class="mt-4">Pagination with Icons</h3>
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item active"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- Disabled and Active States -->
        <h3 class="mt-4">Disabled and Active States</h3>
        <nav aria-label="...">
            <ul class="pagination">
                <li class="page-item disabled">
                    <a class="page-link">Previous</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item active" aria-current="page">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>

        <!-- Sizing -->
        <h3 class="mt-4">Sizing</h3>
        <div class="mb-3">
            <nav aria-label="Page navigation example">
                <ul class="pagination pagination-lg">
                    <li class="page-item active" aria-current="page">
                        <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                </ul>
            </nav>

            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item active" aria-current="page">
                        <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                </ul>
            </nav>

            <nav aria-label="Page navigation example">
                <ul class="pagination pagination-sm">
                    <li class="page-item active" aria-current="page">
                        <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                </ul>
            </nav>
        </div>

        <!-- Offcanvas -->
        <h2 class="mt-5">Offcanvas</h2>
        <div class="d-grid gap-2 d-md-flex justify-content-md-start">
            <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                Toggle left offcanvas
            </button>
            <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
                Toggle right offcanvas
            </button>
        </div>

        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <div>
                    Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
                </div>
                <div class="dropdown mt-3">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
                        Dropdown button
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas Right</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <div>
                    Content for the offcanvas that appears from the right side.
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CodehtmlSimple

Bootstrap 5 Utilities

Bootstrap 5 utility classes for spacing, typography, colors, borders, display, and responsive design

Difficulty

3/10

Estimated time

25 min

Tags

bootstrap, utilities, css, helper-classes

Prerequisites

CSS basics, Bootstrap basics

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Utilities</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .demo-box {
            background-color: #e9ecef;
            border: 1px solid #dee2e6;
            min-height: 2rem;
        }
        .demo-text {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            padding: 0.5rem;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h1>Bootstrap 5 Utilities Examples</h1>

        <!-- Spacing -->
        <h2 class="mt-5">Spacing Utilities</h2>
        <h3>Margin</h3>
        <div class="demo-box m-0">m-0 (no margin)</div>
        <div class="demo-box m-1">m-1 (0.25rem)</div>
        <div class="demo-box m-2">m-2 (0.5rem)</div>
        <div class="demo-box m-3">m-3 (1rem)</div>
        <div class="demo-box m-4">m-4 (1.5rem)</div>
        <div class="demo-box m-5">m-5 (3rem)</div>

        <h4 class="mt-4">Directional Margins</h4>
        <div class="demo-box mt-3">mt-3 (margin-top)</div>
        <div class="demo-box me-3">me-3 (margin-end)</div>
        <div class="demo-box mb-3">mb-3 (margin-bottom)</div>
        <div class="demo-box ms-3">ms-3 (margin-start)</div>
        <div class="demo-box mx-3">mx-3 (margin left & right)</div>
        <div class="demo-box my-3">my-3 (margin top & bottom)</div>

        <h3 class="mt-4">Padding</h3>
        <div class="demo-box p-0">p-0 (no padding)</div>
        <div class="demo-box p-1">p-1 (0.25rem)</div>
        <div class="demo-box p-2">p-2 (0.5rem)</div>
        <div class="demo-box p-3">p-3 (1rem)</div>
        <div class="demo-box p-4">p-4 (1.5rem)</div>
        <div class="demo-box p-5">p-5 (3rem)</div>

        <!-- Typography -->
        <h2 class="mt-5">Typography Utilities</h2>
        <h3>Headings</h3>
        <h1 class="display-1">Display 1</h1>
        <h1 class="display-2">Display 2</h1>
        <h1 class="display-3">Display 3</h1>
        <h1 class="display-4">Display 4</h1>
        <h1 class="display-5">Display 5</h1>
        <h1 class="display-6">Display 6</h1>

        <h4 class="mt-4">Lead and Font Size</h4>
        <p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>
        <p class="fs-1">fs-1 text</p>
        <p class="fs-2">fs-2 text</p>
        <p class="fs-3">fs-3 text</p>
        <p class="fs-4">fs-4 text</p>
        <p class="fs-5">fs-5 text</p>
        <p class="fs-6">fs-6 text</p>

        <h4 class="mt-4">Font Weight and Style</h4>
        <p class="fw-bold">Bold text</p>
        <p class="fw-bolder">Bolder text</p>
        <p class="fw-normal">Normal weight text</p>
        <p class="fw-light">Light text</p>
        <p class="fw-lighter">Lighter text</p>
        <p class="fst-italic">Italic text</p>
        <p class="fst-normal">Normal style text</p>

        <h4 class="mt-4">Text Alignment</h4>
        <p class="text-start">Start aligned text.</p>
        <p class="text-center">Center aligned text.</p>
        <p class="text-end">End aligned text.</p>

        <h4 class="mt-4">Text Transform</h4>
        <p class="text-lowercase">Lowercased text.</p>
        <p class="text-uppercase">Uppercased text.</p>
        <p class="text-capitalize">Capitalized text.</p>

        <!-- Colors -->
        <h2 class="mt-5">Color Utilities</h2>
        <h3>Text Colors</h3>
        <p class="text-primary">Primary text</p>
        <p class="text-secondary">Secondary text</p>
        <p class="text-success">Success text</p>
        <p class="text-danger">Danger text</p>
        <p class="text-warning text-dark">Warning text</p>
        <p class="text-info text-dark">Info text</p>
        <p class="text-light bg-dark">Light text</p>
        <p class="text-dark">Dark text</p>
        <p class="text-body">Body text</p>
        <p class="text-muted">Muted text</p>
        <p class="text-white bg-dark">White text</p>

        <h4 class="mt-4">Background Colors</h4>
        <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
        <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
        <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
        <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
        <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
        <div class="p-3 mb-2 bg-info text-white">.bg-info</div>
        <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
        <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
        <div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
        <div class="p-3 mb-2 bg-white border">.bg-white</div>
        <div class="p-3 mb-2 bg-transparent border">.bg-transparent</div>

        <!-- Borders -->
        <h2 class="mt-5">Border Utilities</h2>
        <h3>Border Additive</h3>
        <div class="demo-box border">.border</div>
        <div class="demo-box border-top">.border-top</div>
        <div class="demo-box border-end">.border-end</div>
        <div class="demo-box border-bottom">.border-bottom</div>
        <div class="demo-box border-start">.border-start</div>

        <h4 class="mt-4">Border Subtractive</h4>
        <div class="demo-box border border-0">.border-0</div>
        <div class="demo-box border border-top-0">.border-top-0</div>
        <div class="demo-box border border-end-0">.border-end-0</div>
        <div class="demo-box border border-bottom-0">.border-bottom-0</div>
        <div class="demo-box border border-start-0">.border-start-0</div>

        <h4 class="mt-4">Border Color</h4>
        <div class="demo-box border border-primary">.border-primary</div>
        <div class="demo-box border border-secondary">.border-secondary</div>
        <div class="demo-box border border-success">.border-success</div>
        <div class="demo-box border border-danger">.border-danger</div>
        <div class="demo-box border border-warning">.border-warning</div>
        <div class="demo-box border border-info">.border-info</div>
        <div class="demo-box border border-light">.border-light</div>
        <div class="demo-box border border-dark">.border-dark</div>

        <h4 class="mt-4">Border Width</h4>
        <div class="demo-box border border-1">.border-1</div>
        <div class="demo-box border border-2">.border-2</div>
        <div class="demo-box border border-3">.border-3</div>
        <div class="demo-box border border-4">.border-4</div>
        <div class="demo-box border border-5">.border-5</div>

        <h4 class="mt-4">Border Radius</h4>
        <div class="demo-box border rounded">.rounded</div>
        <div class="demo-box border rounded-top">.rounded-top</div>
        <div class="demo-box border rounded-end">.rounded-end</div>
        <div class="demo-box border rounded-bottom">.rounded-bottom</div>
        <div class="demo-box border rounded-start">.rounded-start</div>
        <div class="demo-box border rounded-circle">.rounded-circle</div>
        <div class="demo-box border rounded-pill">.rounded-pill</div>
        <div class="demo-box border rounded-0">.rounded-0</div>

        <!-- Display -->
        <h2 class="mt-5">Display Utilities</h2>
        <div class="demo-box d-block">d-block</div>
        <div class="demo-box d-inline">d-inline</div>
        <span class="demo-box d-inline-block">d-inline-block</span>

        <h4 class="mt-4">Hiding Elements</h4>
        <div class="demo-box d-none">d-none (hidden)</div>
        <div class="demo-box d-inline d-none d-lg-block">Only visible on large screens and up</div>

        <h4 class="mt-4">Flexbox Utilities</h4>
        <div class="d-flex p-2 bg-light mb-3">
            <div class="p-2 bg-primary text-white flex-fill">Flex item</div>
            <div class="p-2 bg-secondary text-white flex-fill">Flex item</div>
            <div class="p-2 bg-info text-white flex-fill">Flex item</div>
        </div>

        <div class="d-flex p-2 bg-light mb-3">
            <div class="p-2 bg-primary text-white me-auto">Flex item with margin auto</div>
            <div class="p-2 bg-secondary text-white">Flex item</div>
            <div class="p-2 bg-info text-white">Flex item</div>
        </div>

        <!-- Position -->
        <h2 class="mt-5">Position Utilities</h2>
        <div class="position-relative p-3 bg-light" style="height: 200px;">
            <div class="position-absolute top-0 start-0">Top left</div>
            <div class="position-absolute top-0 end-0">Top right</div>
            <div class="position-absolute top-50 start-50 translate-middle">Center</div>
            <div class="position-absolute bottom-0 start-0">Bottom left</div>
            <div class="position-absolute bottom-0 end-0">Bottom right</div>
        </div>

        <!-- Sizing -->
        <h2 class="mt-5">Sizing Utilities</h2>
        <div class="demo-box w-25">Width 25%</div>
        <div class="demo-box w-50">Width 50%</div>
        <div class="demo-box w-75">Width 75%</div>
        <div class="demo-box w-100">Width 100%</div>
        <div class="demo-box w-auto">Width auto</div>

        <h4 class="mt-4">Height</h4>
        <div class="demo-box" style="height: 25vh;">Height 25vh</div>
        <div class="demo-box" style="height: 50vh;">Height 50vh</div>
        <div class="demo-box" style="height: 75vh;">Height 75vh</div>
        <div class="demo-box" style="height: 100vh;">Height 100vh</div>

        <!-- Shadow -->
        <h2 class="mt-5">Shadow Utilities</h2>
        <div class="demo-box shadow-none">No shadow</div>
        <div class="demo-box shadow-sm">Small shadow</div>
        <div class="demo-box shadow">Regular shadow</div>
        <div class="demo-box shadow-lg">Large shadow</div>

        <!-- Overflow -->
        <h2 class="mt-5">Overflow Utilities</h2>
        <div class="demo-box overflow-auto" style="height: 100px;">
            This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions.
            By design, this content will vertically scroll if the content exceeds the defined height of the element.
        </div>

        <div class="demo-box overflow-hidden mt-3" style="height: 100px;">
            This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
            By design, this content will be clipped to the dimensions of the element.
        </div>

        <!-- Responsive Utilities -->
        <h2 class="mt-5">Responsive Utilities</h2>
        <h3>Display Responsive</h3>
        <div class="d-none d-sm-block d-md-none">Hidden on mobile, visible only on tablet</div>
        <div class="d-none d-md-block d-lg-none">Hidden on tablet, visible only on desktop</div>
        <div class="d-none d-lg-block">Hidden on tablet and mobile, visible only on large screens</div>

        <h4 class="mt-4">Flex Direction Responsive</h3>
        <div class="d-flex flex-column flex-md-row">
            <div class="demo-box flex-fill">Item 1</div>
            <div class="demo-box flex-fill">Item 2</div>
            <div class="demo-box flex-fill">Item 3</div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Tools

Tools frequently paired with this sample

Related

Related sample collections

Related

Related workflows

Hub

CSS Authoring, Layout, and Cascade Workflows

Write and review CSS with readable formatting, selector diagnostics, responsive snippets, visual effects, and rendered-intent checks.

Hub

Infer JSON Schema from Samples and Spreadsheets

Derive a reviewable JSON Schema draft from representative JSON samples or XLSX rows, then inspect types, requiredness, nulls, and outliers before treating it as a contract.

Hub

Color System and CSS Effect Design Workflow

Extract a palette, build accessible color relationships, generate tokens, and apply CSS effects that stay consistent in real interface states.

Hub

Detached Signature and File Integrity Verification

Generate or reproduce a file hash, compare it with a published checksum, and verify a detached Ed25519 signature with a separately trusted public key.

Home
Tools3212
Workbench
Samples593
Visualizations471
Viewers103
Hubs239
Tags333
Images, Audio & Video657

Image, audio, and video processing, conversion, and optimization tools

Math, Date & Finance647

Calculators, numerics, date logic, statistics, and finance tools

Design & Color298

Color, layout, graphics, visual styling, and design helper tools

Text & Writing209

Writing, cleanup, formatting, extraction, and text analysis tools

Developer & Web193

Developer utilities, networking, web debugging, and automation helpers

Conversion & Encoding175

Format, file, archive, unit, and encoding conversion tools

Lead Generation Quiz Launch and Contact Handoff
Memorial Drafts: Family Review and Print Handoff
Private Habit Records: Backup, Restore and Sharing Review
Article to X and LinkedIn Drafts: Fact Review and Handoff
Markdown Interactive Deck Review and Offline Handoff

© 2026 Elysia Tools. All rights reserved.

DocsPricingAboutTerms of ServicePrivacy PolicyCookiesContact

Media

AVI to MP4 Converter

Convert AVI video files to MP4 format

Media

MP4 to AVI Converter

Convert MP4 video files to AVI format

Media

Batch Video Converter

Convert multiple video files between different formats like MP4, WebM, MKV, AVI, MOV with quality settings and batch processing

Media

Video Cutter

Cut and trim video clips with precision, supporting multiple formats and quality settings

Media

Video to APNG

Convert video clips to APNG (Animated PNG) format with transparency support and better quality than GIF

Media

Video to GIF Optimized

Convert videos to optimized GIF format with advanced compression settings

Media

Video to Image Sequence

Extract video frames as an image sequence with customizable frame rate, quality, and output format

Media

Video Trim

Quickly trim video clips - extract segments from videos with fast, lossless processing

CSS Frameworks

Bulma CSS Framework Samples

Bulma CSS framework examples including columns, components, form controls, layout system, and modern CSS-based design patterns

CSS Frameworks

Milligram CSS Framework Samples

Milligram CSS framework examples including typography, forms, grids, and components

Media

SVG Samples

Scalable Vector Graphics (SVG) samples demonstrating various SVG features and techniques

Testing

BDD with Cucumber - Behavior Driven Development

Comprehensive Cucumber BDD examples including feature files, step definitions, data tables, hooks, and advanced BDD patterns for collaborative development

CSS Frameworks

TailUI Samples

TailUI CSS framework component examples and UI patterns

Web Frameworks

Preact Samples

Preact framework examples including components, hooks, routing, and modern Preact patterns