Center elements responsibly

Asked

Viewed 46 times

0

I have done a lot but I cannot centralise the elements when I decrease the resolution.

<section class="empresas">
  <div class="container">
    <div class="row d-flex justify-content-around  align-items-center">
      <div class="col-12 col-md-4">
        <h2 class="tituloemp">Empresas que confiam no nosso trabalho!</h2>
      </div>
      <div class="col-12 col-md-2 mb-2">
        <img src="assets/img/empresas/logo1.png">
      </div>
      <div class="col-12 col-md-2 mb-2">
        <img src="assets/img/empresas/logo2.png">
      </div>
      <div class="col-12 col-md-2 mb-2">
        <img src="assets/img/empresas/logo3.png">
      </div>
      <div class="col-12 col-md-2">
        <img src="assets/img/empresas/logo4.png">
      </div>
    </div>
  </div>
</section>

.empresas {
  background: #fff;
  align-items: center;
  padding: 60px 0;
}

.empresas h2 {
  font-size: 18px;
  color: #7b7b7b;
  font-weight: 400;
  font-style: italic;
}
inicialmente diminuindo a resolução

html css

1 answer

2


Dude just use the cols that the images are inside the Bootstrap flex classes d-flex and justify-content-center you can consult here the doc. official https://getbootstrap.com/docs/4.3/utilities/flex/

inserir a descrição da imagem aqui

Follow the image code above

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>
    .empresas {
        background: #fff;
        align-items: center;
        padding: 60px 0;
    }

    .empresas h2 {
        font-size: 18px;
        color: #7b7b7b;
        font-weight: 400;
        font-style: italic;
    }
</style>
</head>

<body>

    <section class="empresas">
        <div class="container">
            <div class="row d-flex justify-content-around  align-items-center">
                <div class="col-12 col-md-4">
                    <h2 class="tituloemp">Empresas que confiam no nosso trabalho!</h2>
                </div>
                <div class="col-12 col-md-2 mb-2 d-flex justify-content-center">
                    <img src="https://unsplash.it/100/100">
                </div>
                <div class="col-12 col-md-2 mb-2 d-flex justify-content-center">
                    <img src="https://unsplash.it/100/100">
                </div>
                <div class="col-12 col-md-2 mb-2 d-flex justify-content-center">
                    <img src="https://unsplash.it/100/100">
                </div>
                <div class="col-12 col-md-2 d-flex justify-content-center">
                    <img src="https://unsplash.it/100/100">
                </div>
            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.