Home / Questions / 239147
Accepted
Javier fr
Asked: 2020-02-20 09:43:05 +0800 CST 2020-02-20 09:43:05 +0800 CST

Position and align elements (bootstrap)

  • 772

Good morning, I have a problem with the following design.

What happens is that I want to vertically align the 4 elements that are next to the image and that they adapt for a mobile whether they are changed below the image (responsive).

enter image description here

this is my code

<div class="contact-info-area white-bg section-pt" style="padding-top: 100px">
  <div class="container-fluid">
    <div class="row row-eq-height no-gutter">
      <div class="hidden-xs hidden-sm col-md-6 add-image-2" >
        <img src="http://regaltheme.com/tf/multi/hezul/hezul/assets/img/bg/add-2.jpg" width="100%">
      </div>
      <div class="col-xs-12 col-sm-12 col-md-6 separador">
        <div class="equal-style height-600 d-table" style="margin: auto;">
          <div class="row dt-cell text-center" style="color: #333333;">
            <div class="col-xs-12 col-sm-6 mobi-mb-30 separador-1">
              <div class="col-sm-6" style="max-width: 100%!important">
                <div class="info-box mb-135">
                  <i class="fa fa-location-arrow fa-2x"></i>
                  <h6>DIRECCIÓN</h6>
                  <p style="font-size: 16px">
                    Blvrd Hacienda del Jacal 1303<br />Mansiones del Valle 76185 Santiago de Querétaro, Qro.
                  </p>
                </div>
              </div>
              <!-- Info Box End -->
              <div class="col-sm-6" style="max-width: 100%!important">
                <div class="info-box">
                  <i class="fa fa-envelope-o fa-2x"></i>
                  <h6>Email</h6>
                  <p>
                    <a href="mailto:[email protected]" style="color: #333333!important; font-size: 16px">[email protected]</a><br>
                  </p>
                </div>
              </div>
              <!-- Info Box End -->
            </div>
            <div class="col-xs-12 col-sm-6 separador-1">
              <div class="col-sm-6" style="max-width: 100%!important">
                <div class="info-box mb-135">
                  <i class="fa fa-phone fa-2x"></i>
                  <h6>TELEFONO</h6>
                  <p>
                    <a href="tel:+99-854-785-478-586" style="color: #333333!important; font-size: 16px;">+99 854 785 478 586</a><br>
                    <a href="tel:102-458-658-587-548" style="color: #333333!important; font-size: 16px;">102 458 658 587 548</a>
                  </p>
                </div>
              </div>
              <!-- Info Box End -->
              <div class="col-sm-6" style="max-width: 100%!important">
                <div class="info-box">
                  <i class="fa fa-clock-o fa-2x"></i>
                  <h6>HORARIO</h6>
                  <p style="font-size: 16px;">Lun a Vie – 9:00 AM a 6:00 PM</p>
                </div>
              </div>
              <!-- Info Box End -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I hope you can support me.

Cheers

css

1 Answers

  1. Best Answer

    You can easily vertically position any element with the properties of flexbox.

    Change your code a bit and add some custom styles using only flexbox which can help you make the layout look better on both different screen sizes.

    * {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.total {
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* Permite tener cajas flexibles*/
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.separador {
  background: gray;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* Centra Horizontalmente*/
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /* Centra Verticalmente */
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
    <!DOCTYPE html>
<html lang="es">

<head>
    <title>Media Querys</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
    <link rel="stylesheet" href="Css/Estilos.css">
</head>

<body>

    <div class="contact-info-area white-bg section-pt total">
        <div class="container-fluid">
            <div class="row row-eq-height no-gutter">
                <div class="hidden-xs hidden-sm col-md-6 add-image-2">
                    <img src="http://regaltheme.com/tf/multi/hezul/hezul/assets/img/bg/add-2.jpg" width="100%">
                </div>

                <div class="col-xs-12 col-sm-12 col-md-6 separador">
                    <div class="equal-style height-600 d-table" style="margin: auto;">
                        <div class="row dt-cell text-center" style="color: #333333;">
                            <div class="col-xs-12 col-sm-6 mobi-mb-30 separador-1">
                                <div class="col-sm-6" style="max-width: 100%!important">
                                    <div class="info-box mb-135">
                                        <i class="fa fa-location-arrow fa-2x"></i>

                                        <h6>DIRECCIÓN</h6>
                                        <p style="font-size: 16px">
                                            Blvrd Hacienda del Jacal 1303<br />Mansiones del Valle 76185 Santiago de
                                            Querétaro, Qro.
                                        </p>
                                    </div>
                                </div>
                                <!-- Info Box End -->
                                <div class="col-sm-6" style="max-width: 100%!important">
                                    <div class="info-box">
                                        <i class="fa fa-envelope-o fa-2x"></i>
                                        <h6>Email</h6>
                                        <p>
                                            <a href="mailto:[email protected]" style="color: #333333!important; font-size: 16px">[email protected]</a><br>
                                        </p>
                                    </div>
                                </div>
                                <!-- Info Box End -->
                            </div>
                            <div class="col-xs-12 col-sm-6 separador-1">
                                <div class="col-sm-6" style="max-width: 100%!important">
                                    <div class="info-box mb-135">
                                        <i class="fa fa-phone fa-2x"></i>
                                        <h6>TELEFONO</h6>
                                        <p>
                                            <a href="tel:+99-854-785-478-586" style="color: #333333!important; font-size: 16px;">+99
                                                854 785 478 586</a><br>
                                            <a href="tel:102-458-658-587-548" style="color: #333333!important; font-size: 16px;">102
                                                458 658 587 548</a>
                                        </p>
                                    </div>
                                </div>
                                <!-- Info Box End -->
                                <div class="col-sm-6" style="max-width: 100%!important">
                                    <div class="info-box">
                                        <i class="fa fa-clock-o fa-2x"></i>
                                        <h6>HORARIO</h6>
                                        <p style="font-size: 16px;">Lun a Vie – 9:00 AM a 6:00 PM</p>
                                    </div>
                                </div>
                                <!-- Info Box End -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>

    For good practices I recommend you not to add styles within the HTML, preferably create your CSS separately and change or modify what you need.

    I also invite you to read the Bootstrap documentation to better understand its layout.

    • 3