Ejemplos de Layouts con Bootstrap 5

Explorador de Layouts con Bootstrap 5

Descubre y copia los patrones de diseño más comunes para webs y aplicaciones, construidos con Bootstrap 5.

1. Layout Clásico con Navbar Superior y Contenido Principal

Un diseño fundamental que presenta una barra de navegación fija en la parte superior, ideal para sitios web tradicionales.

Contenido Principal

Este es el área principal de contenido de tu página web.

Código HTML

<!-- Layout Clásico -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Sitio Clásico</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 ms-auto">
                <li class="nav-item"><a class="nav-link" href="#">Inicio</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Acerca de</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Servicios</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contacto</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="container mt-4">
    <h1>Título de Contenido Principal</h1>
    <p>Aquí va el contenido principal de la página.</p>
</div>

3. Layout Tipo Dashboard con Barra Lateral Colapsable

Un diseño común para paneles de administración, donde el sidebar puede ser ocultado o mostrado, optimizando el espacio.

Menú Dash
Menú Dashboard

Área de Contenido del Dashboard

Aquí se muestran los gráficos e información.

Código HTML

<!-- Layout Tipo Dashboard (con Offcanvas para móvil) -->
<div class="d-flex">
    <!-- Sidebar para pantallas grandes -->
    <div class="d-none d-md-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
        <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
            <span class="fs-4">Dashboard</span>
        </a>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
                <a href="#" class="nav-link active" aria-current="page">
                    <i class="fas fa-home me-2"></i>Inicio
                </a>
            </li>
            <li>
                <a href="#" class="nav-link text-white">
                    <i class="fas fa-chart-line me-2"></i>Reportes
                </a>
            </li>
        </ul>
        <hr>
        <div class="dropdown">
            <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fas fa-user-circle me-2"></i>
                <strong>M. Smith</strong>
            </a>
            <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser2">
                <li><a class="dropdown-item" href="#">Configuración</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Cerrar Sesión</a></li>
            </ul>
        </div>
    </div>

    <!-- Offcanvas para pantallas pequeñas -->
    <div class="offcanvas offcanvas-start text-bg-dark" tabindex="-1" id="offcanvasSidebar" aria-labelledby="offcanvasSidebarLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasSidebarLabel">Menú</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <ul class="nav nav-pills flex-column mb-auto">
                <li class="nav-item"><a href="#" class="nav-link active">Inicio</a></li>
                <li><a href="#" class="nav-link text-white">Dashboard</a></li>
            </ul>
        </div>
    </div>

    <!-- Contenido principal -->
    <main class="flex-grow-1 p-4">
        <!-- Botón para abrir Offcanvas en pantallas pequeñas -->
        <button class="btn btn-primary d-md-none mb-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSidebar" aria-controls="offcanvasSidebar">
            Abrir Menú
        </button>
        <h1>Bienvenido al Dashboard</h1>
        <p>Aquí puedes gestionar tus datos y configuraciones.</p>
        <div class="row row-cols-1 row-cols-md-2 g-4">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Estadísticas</h5>
                        <p class="card-text">Datos resumidos y gráficos.</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

4. Layout de Landing Page con Secciones

Diseño atractivo para páginas de aterrizaje, divididas en secciones claras que guían al usuario a través de la información.

Hero Section

Slogan impactante y llamada a la acción principal.

Características

Rápido

Llamada a la Acción Final

No esperes más, únete a nosotros hoy.

Código HTML

<!-- Layout de Landing Page -->
<!-- Sección Hero -->
<section class="bg-primary text-white text-center py-5">
    <div class="container">
        <h1 class="display-4">Tu Solución Innovadora</h1>
        <p class="lead">Un subtítulo que destaque el valor de tu propuesta.</p>
        <a href="#" class="btn btn-light btn-lg mt-3">Descubre Más</a>
    </div>
</section>

<!-- Sección de Características -->
<section class="py-5">
    <div class="container">
        <h2 class="text-center mb-4">Características Clave</h2>
        <div class="row text-center">
            <div class="col-md-4">
                <div class="p-3 border rounded shadow-sm">
                    <i class="fas fa-star fa-3x text-warning mb-3"></i>
                    <h3>Característica 1</h3>
                    <p>Descripción concisa de la primera característica destacada.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-3 border rounded shadow-sm">
                    <i class="fas fa-heart fa-3x text-danger mb-3"></i>
                    <h3>Característica 2</h3>
                    <p>Detalles sobre la segunda característica que agrega valor.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-3 border rounded shadow-sm">
                    <i class="fas fa-code fa-3x text-info mb-3"></i>
                    <h3>Característica 3</h3>
                    <p>Explicación de la tercera característica, mostrando su beneficio.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Sección de Llamada a la Acción (CTA) -->
<section class="bg-dark text-white text-center py-5">
    <div class="container">
        <h2 class="mb-4">Listo para Empezar?</h2>
        <p class="lead">Únete a miles de usuarios satisfechos hoy mismo.</p>
        <a href="#" class="btn btn-success btn-lg mt-3">Regístrate Gratis</a>
    </div>
</section>

5. Layout de Blog (con Listado de Posts y Barra Lateral)

Estructura común para blogs, con una columna principal para los artículos y una barra lateral para categorías, etiquetas o posts recientes.

Título del Post 1

Un breve resumen del contenido del primer post del blog.

Título del Post 2

Otro resumen corto para el segundo post. La barra lateral complementa el contenido principal.

Código HTML

<!-- Layout de Blog -->
<div class="container mt-4">
    <div class="row">
        <!-- Columna Principal de Posts -->
        <div class="col-lg-8">
            <h1 class="mb-4">Últimos Artículos</h1>

            <!-- Artículo de Blog Ejemplo 1 -->
            <div class="card mb-4">
                <div class="card-body">
                    <h2 class="card-title"><a href="#" class="text-decoration-none">Dominando el Diseño Responsivo con Bootstrap</a></h2>
                    <p class="card-subtitle mb-2 text-muted">Publicado el <span>10 de Mayo, 2024</span> por <span>Juan Pérez</span></p>
                    <p class="card-text">Descubre cómo Bootstrap 5 facilita la creación de interfaces de usuario que se adaptan a cualquier tamaño de pantalla...</p>
                    <a href="#" class="btn btn-primary">Continuar Leyendo</a>
                </div>
            </div>

            <!-- Artículo de Blog Ejemplo 2 -->
            <div class="card mb-4">
                <div class="card-body">
                    <h2 class="card-title"><a href="#" class="text-decoration-none">Guía Esencial de Componentes de Bootstrap</a></h2>
                    <p class="card-subtitle mb-2 text-muted">Publicado el <span>5 de Mayo, 2024</span> por <span>María García</span></p>
                    <p class="card-text">Un vistazo a los componentes más útiles de Bootstrap, desde botones hasta modales y formularios...</p>
                    <a href="#" class="btn btn-primary">Continuar Leyendo</a>
                </div>
            </div>

        </div>

        <!-- Sidebar del Blog -->
        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">Acerca de Nosotros</h5>
                    <p class="card-text">Somos un equipo apasionado por el desarrollo web y compartimos nuestros conocimientos aquí.</p>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">Categorías</h5>
                    <ul class="list-unstyled mb-0">
                        <li><a href="#">Desarrollo Frontend</a></li>
                        <li><a href="#">Diseño UI/UX</a></li>
                    </ul>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Síguenos</h5>
                    <p>Conéctate con nosotros en redes sociales.</p>
                    <a href="#" class="btn btn-primary btn-sm me-2"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>