➜ Sección Nosotros

¿Cómo implementar la sección nosotros con Bootstrap?

<!-- NOSOTROS-->
    <div class="container">
        <div class="row mt-5 mb-5 justify-content-center">
            <div class="col-sm-8 pt-5 pb-5">
                <h1 class="text-center">Bienvenidos</h1>
                <h2 class="mt-5">Quiénes somos</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur accusamus alias nam ex a neque harum at? Unde pariatur consequuntur maxime cumque voluptatibus sapiente, atque odio deleniti quas corrupti distinctio!</p>
                <img src="img/empresa.jpg" class="img-fluid mx-auto d-block mt-5 mb-5">
                <h2 class="mt-5">Nuestra Visión</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur accusamus alias nam ex a neque harum at? Unde pariatur consequuntur maxime cumque voluptatibus sapiente, atque odio deleniti quas corrupti distinctio!</p>
                <h2 class="mt-5">Nuestra Misión</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur accusamus alias nam ex a neque harum at? Unde pariatur consequuntur maxime cumque voluptatibus sapiente, atque odio deleniti quas corrupti distinctio!</p>
                <h2 class="mt-5">Valores Corporativos</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur accusamus alias nam ex a neque harum at? Unde pariatur consequuntur maxime cumque voluptatibus sapiente, atque odio deleniti quas corrupti distinctio!</p>
            </div>
        </div>
    </div>
    <!-- NOSOTROS/-->

Descripción del Código:

Este código HTML utiliza Bootstrap 4.5 para crear una sección de "Nosotros" en una página web. La estructura está organizada dentro de un contenedor que presenta información sobre la empresa o entidad, incluyendo su visión, misión, y valores corporativos. Aquí está el desglose:

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

   • Agrupa todo el contenido de la sección "Nosotros", asegurando que esté centrado y tenga márgenes adecuados alrededor.

2. Fila de Contenido (<div class="row mt-5 mb-5 justify-content-center">):

   • La fila (row) contiene una columna (col-sm-8) que ocupa el 8/12 del ancho en dispositivos pequeños y superiores.
   • mt-5 y mb-5: Añaden márgenes superiores e inferiores para espaciar la fila del resto del contenido.
   • justify-content-center: Centra la columna horizontalmente dentro de la fila.

3. Columna de Contenido (<div class="col-sm-8 pt-5 pb-5">):

   • Dentro de la columna, se incluyen varios elementos de contenido con márgenes y padding añadidos para separar y espaciar los elementos de forma efectiva.

4. Encabezados y Texto:

   • <h1 class="text-center">Bienvenidos</h1>: Un encabezado principal centrado que da la bienvenida a los visitantes.
   • <h2 class="mt-5">Quiénes somos</h2>: Un subtítulo para la sección de información sobre la empresa.
   • <p>: Párrafos que contienen texto de ejemplo sobre la empresa, visión, misión y valores corporativos.

5. Imagen (<img src="img/empresa.jpg" class="img-fluid mx-auto d-block mt-5 mb-5">):

   • img-fluid: Hace que la imagen sea responsive, ajustando su tamaño automáticamente según el contenedor.
   • mx-auto: Centra la imagen horizontalmente dentro del contenedor.
   • d-block: Hace que la imagen se comporte como un bloque, permitiendo el centrado.

6. Secciones Adicionales:

   • Visión, Misión, y Valores Corporativos: Cada sección tiene un subtítulo (<h2>) seguido de un párrafo (<p>) con texto descriptivo. Los márgenes superiores (mt-5) ayudan a separar cada sección para una mejor legibilidad.

Este diseño es adecuado para proporcionar información detallada sobre una empresa de manera estructurada y visualmente atractiva.