Elysia Tools

Explora herramientas, ejemplos, explicaciones visuales y guías temáticas en un solo espacio claro.

Categorías populares

Temas

Idioma
ZHDERUPTENFRES

Elysia Tools

Navegación

Frameworks CSS

Ejemplos de Bootstrap 5

Ejemplos del framework CSS Bootstrap 5 incluyendo componentes, utilidades, sistema de diseño y patrones de diseño responsivo

Ejemplos

Entradas de esta colección

CódigohtmlSimple

Sistema de Cuadrícula Bootstrap

Ejemplos completos del sistema de cuadrícula Bootstrap 5 con breakpoints responsivos y utilidades de diseño

Dificultad

3/10

Tiempo estimado

20 min

Etiquetas

bootstrap, grid, layout, responsive

Requisitos previos

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>
CódigohtmlIntermedio

Componentes de Bootstrap 5

Componentes UI esenciales de Bootstrap 5 incluyendo botones, tarjetas, modales, navegación y formularios

Dificultad

4/10

Tiempo estimado

30 min

Etiquetas

bootstrap, components, ui

Requisitos previos

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>
CódigohtmlIntermedio

Formularios de Bootstrap 5

Componentes de formularios Bootstrap 5 incluyendo entradas, validación, casillas de verificación, botones de radio y diseños de formularios

Dificultad

5/10

Tiempo estimado

35 min

Etiquetas

bootstrap, forms, validation, ui

Requisitos previos

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>
CódigohtmlIntermedio

Navegación de Bootstrap 5

Componentes de navegación Bootstrap 5 incluyendo barra de navegación, navs, breadcrumbs, paginación y offcanvas

Dificultad

5/10

Tiempo estimado

30 min

Etiquetas

bootstrap, navigation, ui, layout

Requisitos previos

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>
CódigohtmlSimple

Utilidades de Bootstrap 5

Clases de utilidad Bootstrap 5 para espaciado, tipografía, colores, bordes, visualización y diseño responsivo

Dificultad

3/10

Tiempo estimado

25 min

Etiquetas

bootstrap, utilities, css, helper-classes

Requisitos previos

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>

Herramientas

Herramientas que suelen usarse con este ejemplo

Relacionado

Colecciones de ejemplos relacionadas

Relacionado

Temas relacionados

Tema

Creación de CSS, maquetación y flujo en cascada

Crea y revisa CSS con formato, diagnóstico de selectores, fragmentos responsivos, efectos visuales y comprobaciones renderizadas.

Tema

Flujo de sistema de color y efectos CSS

Extrae una paleta, construye relaciones accesibles, genera tokens y aplica efectos CSS coherentes en estados reales de interfaz.

Tema

Verificación de firmas separadas e integridad de archivos

Calcula o reproduce el hash de un archivo conocido, compáralo con un checksum publicado y verifica una firma Ed25519 separada con una clave pública cuya confianza se confirmó por otra vía.

Tema

Ingeniería de fórmulas Excel

Trate las fórmulas como código con una cadena de herramientas completa — constrúyalas con funciones y operadores comunes, evalúelas contra valores reales de celdas con las referencias explicadas, expanda y traduzca en reversa las fórmulas de matriz dinámica de Excel 365 como LET, LAMBDA, MAP y REDUCE, y promocione cualquier repetición a una macro VBA generada.

Inicio
Herramientas3212
Banco de trabajo
Ejemplos593
Visualizaciones471
Visores de archivos103
Temas239
Etiquetas333
Imágenes, audio y video657

Herramientas de procesamiento, conversión y optimización de imágenes, audio y video

Matemáticas, fechas y finanzas647

Calculadoras, herramientas numéricas, lógica de fechas, estadística y finanzas

Diseño y color298

Herramientas de color, maquetación, gráficos, estilo visual y apoyo al diseño

Texto y redacción209

Herramientas de redacción, limpieza, formato, extracción y análisis de texto

Desarrollo y Web193

Utilidades para desarrolladores, red, depuración web y automatización

Conversión y codificación175

Herramientas de conversión de formatos, archivos, unidades, archivos comprimidos y codificación

Lanzamiento de un cuestionario de captación y entrega de contactos
Textos conmemorativos: revisión familiar y entrega para impresión
Hábitos privados: copia, restauración y revisión antes de compartir
De artículo a borradores de X y LinkedIn: revisión factual y entrega
Revisión de una lección Markdown interactiva y entrega sin conexión

© 2026 Elysia Tools. Todos los derechos reservados.

DocumentaciónPreciosAcerca deTérminos de servicioPolítica de privacidadCookiesContacto

Media

Convertidor de AVI a MP4

Convierte archivos de video AVI a formato MP4

Media

Convertidor de MP4 a AVI

Convierte archivos de video MP4 a formato AVI

Media

Conversor de Video en Lote

Convierte múltiples archivos de video entre diferentes formatos como MP4, WebM, MKV, AVI, MOV con configuración de calidad y procesamiento por lotes

Media

Cortador de Video

Cortar y recortar clips de video con precisión, soportando múltiples formatos y configuraciones de calidad

Media

Video a APNG

Convertir clips de video a formato APNG (PNG Animado) con soporte de transparencia y mejor calidad que GIF

Media

Video a GIF Optimizado

Convierte videos a formato GIF optimizado con configuración avanzada de compresión

Media

Video a Secuencia de Imágenes

Extraer fotogramas del video como secuencia de imágenes con tasa de fotogramas, calidad y formato personalizables

Media

Recortar Video

Recortar clips de video rápidamente - extraer segmentos con procesamiento rápido sin pérdida

Frameworks CSS

Ejemplos del Framework CSS Bulma

Ejemplos del framework CSS Bulma incluyendo columnas, componentes, controles de formulario, sistema de diseño y patrones de diseño modernos basados en CSS

Frameworks CSS

Ejemplos del Framework CSS Milligram

Ejemplos del framework CSS Milligram incluyendo tipografía, formularios, grids y componentes

Medios

Ejemplos SVG

Ejemplos de Gráficos Vectoriales Escalables (SVG) que demuestran varias características y técnicas SVG

Pruebas

BDD with Cucumber - Prácticas de Desarrollo Orientado a Comportamiento

Ejemplos completos de Cucumber BDD incluyendo archivos de características, definiciones de pasos, tablas de datos, hooks y patrones BDD avanzados para desarrollo colaborativo

Frameworks CSS

Ejemplos TailUI

Ejemplos de componentes y patrones UI del framework TailUI CSS

Frameworks web

Ejemplos de Preact

Ejemplos del framework Preact incluyendo componentes, hooks, routing y patrones modernos de Preact