➜ Sección Vestidos

¿Cómo implementar la sección vestidos de la página con Bootstrap?

  <!-- productos-->


    <div class="container">

        <div class="row mt-5 mb-5">


            <div class="col-sm-3">

                <div class="card border-0 rounded-0">

                    <a href="producto.html"><img src="img/2.jpg" class="card-img-top"></a>

                    <div class="card-body">

                        <h2 class="text-center"> <a href="producto.html">Producto A</a></h2>

                    </div>

                </div>

            </div>

            <div class="col-sm-3">

                <div class="card border-0 rounded-0">

                    <a href="producto.html"><img src="img/2.jpg" class="card-img-top"></a>

                    <div class="card-body">

                        <h2 class="text-center"> <a href="producto.html">Producto A</a></h2>

                    </div>

                </div>

            </div>

            <div class="col-sm-3">

                <div class="card border-0 rounded-0">

                    <a href="producto.html"><img src="img/2.jpg" class="card-img-top"></a>

                    <div class="card-body">

                        <h2 class="text-center"> <a href="producto.html">Producto A</a></h2>

                    </div>

                </div>

            </div>

            <div class="col-sm-3">

                <div class="card border-0 rounded-0">

                    <a href="producto.html"><img src="img/2.jpg" class="card-img-top"></a>

                    <div class="card-body">

                        <h2 class="text-center"> <a href="producto.html">Producto A</a></h2>

                    </div>

                </div>

            </div>

            <div class="col-sm-3">

                <div class="card border-0 rounded-0">

                    <a href="producto.html"><img src="img/2.jpg" class="card-img-top"></a>

                    <div class="card-body">

                        <h2 class="text-center"> <a href="producto.html">Producto A</a></h2>

                    </div>

                </div>

            </div>

            <div class="col-sm-3">

                <div class="card border-0 rounded-0">

                    <a href="producto.html"><img src="img/2.jpg" class="card-img-top"></a>

                    <div class="card-body">

                        <h2 class="text-center"> <a href="producto.html">Producto A</a></h2>

                    </div>

                </div>

            </div>

            <div class="col-sm-3">

                <div class="card border-0 rounded-0">

                    <a href="producto.html"><img src="img/2.jpg" class="card-img-top"></a>

                    <div class="card-body">

                        <h2 class="text-center"> <a href="producto.html">Producto A</a></h2>

                    </div>

                </div>

            </div>

            <div class="col-sm-3">

                <div class="card border-0 rounded-0">

                    <a href="producto.html"><img src="img/2.jpg" class="card-img-top"></a>

                    <div class="card-body">

                        <h2 class="text-center"> <a href="producto.html">Producto A</a></h2>

                    </div>

                </div>

            </div>


        </div>

    </div>

    <!-- productos/-->

Descripción del Código:

Este código HTML utiliza Bootstrap 4.5 para crear una sección de productos en una página web. La estructura se basa en un contenedor fluido que contiene varias tarjetas de producto, organizadas en una fila con múltiples columnas. Aquí te explico cada parte:

1. Contenedor Principal (<div class="container">):

   • Agrupa toda la sección de productos, asegurando que el contenido esté centrado y con márgenes adecuados alrededor.

2. Fila de Productos (<div class="row mt-5 mb-5">):

   • La fila (row) contiene varias columnas (col-sm-3), cada una de las cuales ocupa un cuarto del ancho de la pantalla en dispositivos pequeños y superiores.
   • Las clases mt-5 y mb-5 añaden márgenes superiores e inferiores para separar visualmente la fila del resto del contenido de la página.

3. Tarjetas de Productos (<div class="card border-0 rounded-0">):

   • Cada producto se presenta dentro de una tarjeta (card) de Bootstrap, con bordes eliminados (border-0) y esquinas no redondeadas (rounded-0), proporcionando un diseño limpio y moderno.
   • La tarjeta incluye una imagen del producto (<img src="img/2.jpg" class="card-img-top">) que es un enlace (<a href="producto.html">) a la página del producto individual.

4. Cuerpo de la Tarjeta (<div class="card-body">):

   • Dentro del cuerpo de la tarjeta, se encuentra un título centrado (text-center) con un enlace al producto (<a href="producto.html">Producto A</a>). El enlace tiene la clase text-decoration-none para evitar el subrayado predeterminado.

5. Repetición de Tarjetas:

   • Este código muestra un total de ocho productos, cada uno en su propia tarjeta, organizados en una cuadrícula de 4x2 en pantallas más grandes.

Este diseño es ideal para presentar un catálogo de productos en una tienda en línea, permitiendo a los usuarios navegar de manera eficiente entre diferentes opciones.