Home / Questions / 277216
Accepted
fm_manueljesus00
Asked: 2020-07-07 10:25:26 +0800 CST 2020-07-07 10:25:26 +0800 CST

Help with alignment of divs and bootstrap with css

  • 772

I am setting up a web page with a single body, the thing is that, when placing two bootstrap cards with images, not only are they not centered, but also, I cannot get them to divoccupy the entire length of the screen , causing others divto climb on top of me.

min-widthI've tried using the y parameters widthwith both percentages and units in pxy embut I can't get it to work.

I am attaching the CSS code for that part as the HTML of how the web page currently looks.

All the best.

    /*CSS general de la pagina*/
    
    * {
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
        font-size: 1rem;
        line-height: 1.5;
        color: #333;
        overflow-x: hidden;
    }
    
    h1{
        margin-top: 10px;
        font-size: 40px;
        margin-bottom: 0;
        font-family: 'DM Serif Display', serif;
        text-align: center;
    
    }
    
    /* Estilos del menú */
    
    .menus{
        clear: both;
        float: left;
        overflow: hidden;
        width: 100%;
        z-index: 2;
        position: fixed;
        background: black;
        opacity: 0.6;
    }
    
    #menu{
        float: left;
        left: 50%;
        list-style-type: none;
        margin: 0 auto;
        padding: 10px;
        position: relative;
    }
    
    #menu li{
        float: left;
        position: relative;
        right: 50%;
        padding: 5px;
    }
    
    #menu li a{
        font-size: 1em;
        margin: 10px;
        text-decoration: none;
    }
    
    #menu li a:hover{
        color: white;
        font-size: 1.7em;
    }
    
    .nav1{
        color: white;
        opacity: 1;
    }
    
    
    /*Estilos del header*/
    
    .header {
        height: 100vh;
        display: flex;
        align-items: center;
        color: #fff;
    }
    
    .content {
        max-width: 49rem;
        padding-left: 1rem;
        padding-right: 1rem;
        margin: auto;
        text-align: center;
    
    }
    
    .header-content p{
        font-size: 1.5rem;
        display: block;
        padding-bottom: 2rem;
    }
    
    /*Botones de las RRSS dentro del Header*/
    .btn{
        background: #c44569;
        color: white;
        font-size: 1.2rem;
        padding: 1rem 2rem;
        text-decoration: none;
        margin-right: 10px;
    }
    
    .button2{
        background: blue;
        color: white;
        font-size: 1.2rem;
        padding: 1rem 2rem;
        text-decoration: none;
        margin-left: 10px;
    }
    
    .btn:hover{
        color: white;
    }
    .button2:hover{
        color: white;
    }
    
    /* Estilos de la pantalla del vídeo y título del header */
    
    .header-video{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        
    }
    
    .header-video video{
        min-width: 100%;
        min-height: 100%;
    
    }
    
    .header-overlay{
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: black;
        z-index: 1;
        opacity: .85;
    }
    
    .header-content{
        z-index: 3;
        margin-left: auto;
        margin-right: auto;
    }
    
    .header-content h1{
        font-size: 50px;
        margin-bottom: 0;
        font-family: 'DM Serif Display', serif;
    
    }
    
    /* Estilos de la sección Acerca de */
    .about{
        margin: auto;
        padding: auto;
        height: auto;
    }
    
    .about h1{
        margin-bottom: 20px;
    }
    
    
    .personas{
        width: 100%;
        min-width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .tarjeta{
        width: 18rem;
        float: left;
        margin-left: 40px;
        margin-right: 40px;
        
    }
   <!DOCTYPE html>
    <html lang="es">
    
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="Estudio de tatuajes en Sevilla capital">
        <meta name="keywords" content="Ants, Ink, Tattoo, Tatto, Tatuaje, Sevilla">
        <meta name="author" content="Manuel Jesus">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Ant Tattoo</title>
        <!--Personal CSS-->
        <link rel="stylesheet" href="./css/estilos.css">
        <!--Bootstrap CSS-->
        <link rel="stylesheet" href="./css/bootstrap.min.css">
        <!--Google Fonts CSS-->
        <link href="https://fonts.googleapis.com/css?family=DM+Serif+Display&display=swap" rel="stylesheet">
    
    </head>
    
    <body>
        <div class="menus">
            <nav>
                <ul class="navbar" id="menu">
                    <li><a class="nav1" href="#">Inicio</a></li>
                    <li><a class="nav1" href="#">Page 1</a></li>
                    <li><a class="nav1" href="#">Page 2</a></li>
                    <li><a class="nav1" href="#">Page 3</a></li>
                </ul>
        </div>
        </nav>
        <header class="header content">
            <div class="header-video">
                <video src="media/flowers.mp4" type="video/mp4; codecs='avc1,mp4a'" preload autoplay muted loop>
                </video>
            </div>
    
            <div class="header-overlay"></div>
    
            <div class="header-content">
                <h1>Ant Tattoo</h1>
                <p>Tu estudio de tatuajes y piercings ubicado en el centro de<br/>Sevilla capital
                    
                </p>
                <a href="https://www.instagram.com/anttattoosevilla/" target="_blank" class="btn">Siguenos en Instagram</a>
                <a href="https://www.facebook.com/anttattoosevilla/" target="_blank" class="btn button2">Siguenos en Facebook</a>
            </div>
        </header>
    
        <div class="about">
            <!--Aquí va la info acerca de los tatuadores-->
            <h1>Acerca de</h1>
                <div class="personas">
                        <!--Insertar bio y foto de cristina-->
                        <div class="card tarjeta">
                            <img class="card-img-top" src="./media/yose.jpg" alt="cristina"/>
                            <div class="card-body">
                                <p class="card-text">Cristina</p>
                            </div>
                        </div>
    
                        <!--Insertar bio y foto de yose-->
                        <div class="card tarjeta">
                            <img class="card-img-top" src="./media/yose.jpg" alt="yose"/>
                            <div class="card-body">
                                <p class="card-text">Yose</p>
                            </div>
                        </div>
                </div>
        </div>
    
        <div id="trabajos">
            <h1>Nuestros trabajos</h1>
            <!--Buscar script para poner aquí fotos de instagram-->
        </div>
    
        <div id="testimonios">
            <h1>Tu opinión cuenta</h1>
            <!--Insertar opiniones de la gente-->
            <div id="opi-1">
                <!--Opinion 1-->
            </div>
            <div id="opi-2">
                <!--Opinion 2-->
            </div>
            <div id="opi-3">
                <!---Opinion 3-->
            </div>
        </div>
    
        <div id="ubicacion">
            <h1>Donde estamos</h1>
            <!--Insertar mapa google con la ubicación del lugar-->
        </div>
    
        <div id="reservas">
            <h1>Reserva cita</h1>
            <!--Insertar formulario de reservas-->
        </div>
    
        <div id="footer">
            <!--Footer de la página-->
        </div>
        </div>
        <!--JavaScript-->
        <script src="./js/bootstrap.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
    </body>
    
    </html>

Website photo Website photo

EDIT I ​​have been passing the code (with the suggested modifications made) in parts to another file and, as I am making changes, I am looking at the web with the Google Chrome inspector and I realize that the cards are as if I did not take them thebody. I attached a photograph of what I get in the inspector.

Photography 2

html

1 Answers

  1. Best Answer

    Como te recomiendan en los comentarios, lo mejor que puedes hacer para evitar que "otros divs se monten encima", es usar contenedores con sus respectivas columnas. Como bien has de saber, Bootstrap divide el ancho total de una página en 12 columnas, de modo que, si quieres tener dos elementos en la misma fila (uno a la derecha y otro a la izquierda) debes usar las clases .row y .col-6. Para centrarlas basta con usar la clase .mx-auto.

    De tu código me tomé la libertad de cambiar algunas cosas, primero estabas cerrando mal tu elemento nav y tenía un z-index con un valor que no cumplía su objetivo, lo aumenté a 4 que es el valor mínimo para que esté por encima (en eje Z) de los demás elementos; la clase .personas no añadía muchos cambios a tu diseño, por ello la eliminé así como también eliminé la propiedad float:left de tu clase .tarjeta, esto estaba causando conflicto cuando querías centrarla, en su lugar añadí la propiedad object-fit: cover que evita que tu imagen se distorsione para ocupar el tamaño del componente card. También añadí la clase .my-3, lo que hace es dar un margin en el eje Y (top-bottom) para que en pantallas más pequeñas, las cards no queden "pegadas" una junta a la otra.

    If you need anything additional, you can leave a comment and I'll edit my answer.

    /*CSS general de la pagina*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  overflow-x: hidden;
}

h1 {
  margin-top: 10px;
  font-size: 40px;
  margin-bottom: 0;
  font-family: 'DM Serif Display', serif;
  text-align: center;
}


/* Estilos del menú */

.menus {
  clear: both;
  float: left;
  overflow: hidden;
  width: 100%;
  z-index: 4;
  position: fixed;
  background: black;
  opacity: 0.6;
}

#menu {
  float: left;
  left: 50%;
  list-style-type: none;
  margin: 0 auto;
  padding: 10px;
  position: relative;
}

#menu li {
  float: left;
  position: relative;
  right: 50%;
  padding: 5px;
}

#menu li a {
  font-size: 1em;
  margin: 10px;
  text-decoration: none;
}

#menu li a:hover {
  color: white;
  font-size: 1.7em;
}

.nav1 {
  color: white;
  opacity: 1;
}


/*Estilos del header*/

.header {
  height: 100vh;
  display: flex;
  align-items: center;
  color: #fff;
}

.content {
  max-width: 49rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: auto;
  text-align: center;
}

.header-content p {
  font-size: 1.5rem;
  display: block;
  padding-bottom: 2rem;
}


/*Botones de las RRSS dentro del Header*/

.btn {
  background: #c44569;
  color: white;
  font-size: 1.2rem;
  padding: 1rem 2rem;
  text-decoration: none;
  margin-right: 10px;
}

.button2 {
  background: blue;
  color: white;
  font-size: 1.2rem;
  padding: 1rem 2rem;
  text-decoration: none;
  margin-left: 10px;
}

.btn:hover {
  color: white;
}

.button2:hover {
  color: white;
}


/* Estilos de la pantalla del vídeo y título del header */

.header-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.header-video video {
  min-width: 100%;
  min-height: 100%;
}

.header-overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: black;
  z-index: 1;
  opacity: .85;
}

.header-content {
  z-index: 3;
  margin-left: auto;
  margin-right: auto;
}

.header-content h1 {
  font-size: 50px;
  margin-bottom: 0;
  font-family: 'DM Serif Display', serif;
}


/* Estilos de la sección Acerca de */

.about h1 {
  margin-bottom: 20px;
}

.tarjeta {
  width: 18rem;
  margin-left: 40px;
  margin-right: 40px;
  object-fit: cover;
}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<body>
  <div class="menus">
    <nav>
      <ul class="navbar" id="menu">
        <li><a class="nav1" href="#">Inicio</a></li>
        <li><a class="nav1" href="#">Page 1</a></li>
        <li><a class="nav1" href="#">Page 2</a></li>
        <li><a class="nav1" href="#">Page 3</a></li>
      </ul>
    </nav>
  </div>

  <header class="header content">
    <div class="header-video">
      <video src="media/flowers.mp4" type="video/mp4; codecs='avc1,mp4a'" preload autoplay muted loop>
                </video>
    </div>

    <div class="header-overlay"></div>

    <div class="header-content">
      <h1>Ant Tattoo</h1>
      <p>Tu estudio de tatuajes y piercings ubicado en el centro de<br/>Sevilla capital

      </p>
      <a href="https://www.instagram.com/anttattoosevilla/" target="_blank" class="btn">Siguenos en Instagram</a>
      <a href="https://www.facebook.com/anttattoosevilla/" target="_blank" class="btn button2">Siguenos en Facebook</a>
    </div>
  </header>

  <div class="about">
    <!--Aquí va la info acerca de los tatuadores-->
    <h1>Acerca de</h1>
    <div class="container-fluid">
      <div class="row">

        <!--Insertar bio y foto de cristina-->
        <div class="col-md-6 col-sm-6 my-3">
          <div class="card mx-auto tarjeta">
            <img class="card-img-top" src="https://via.placeholder.com/300" alt="cristina" />
            <div class="card-body">
              <p class="card-text">Cristina</p>
            </div>
          </div>
        </div>

        <!--Insertar bio y foto de yose-->
        <div class="col-md-6 col-sm-6 my-3">
          <div class="card mx-auto tarjeta">
            <img class="card-img-top" src="https://via.placeholder.com/100" alt="yose" />
            <div class="card-body">
              <p class="card-text">Yose</p>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>

  <div id="trabajos">
    <h1>Nuestros trabajos</h1>
    <!--Buscar script para poner aquí fotos de instagram-->
  </div>

  <div id="testimonios">
    <h1>Tu opinión cuenta</h1>
    <!--Insertar opiniones de la gente-->
    <div id="opi-1">
      <!--Opinion 1-->
    </div>
    <div id="opi-2">
      <!--Opinion 2-->
    </div>
    <div id="opi-3">
      <!---Opinion 3-->
    </div>
  </div>

  <div id="ubicacion">
    <h1>Donde estamos</h1>
    <!--Insertar mapa google con la ubicación del lugar-->
  </div>

  <div id="reservas">
    <h1>Reserva cita</h1>
    <!--Insertar formulario de reservas-->
  </div>

  <div id="footer">
    <!--Footer de la página-->
  </div>


</body>

    • 3