How to align these Divs side by side?

Asked

Viewed 40 times

-2

I would like to put the image on top of H3 and p, and not on the side, which is how it is getting. I have tried several ways and could not...

HTML:

<div class="pad-top-90 pad-bottom-60 text-center">
      <div class="container" style="background-color: whitesmoke;">
        <h2 class="mar-bottom-40 text-uppercase font-bold font-40" style="color: #173083"> texto </h2>
        <div class="row equal_height space-100">
          <div class="col-lg-4 col-md-6"> 
            <div class="icon mar-bottom-10">
              <img src="imagens/pngwing.com.png" alt class="img-fluid"/> 
            </div>
          </div>
          <h3 class="font-20 font-bold text-center"> Texto </h3>
          <p>texto texto texto texto texto texto</p>
        </div>

        <div class="row equal_height space-100">
          <div class="col-lg-4 col-md-6"> 
            <div class="icon mar-bottom-10">
              <img src="imagens/pngwing.com.png" alt class="img-fluid"/> 
            </div>
          </div>
          <h3 class="font-20 font-bold text-center"> texto </h3>
          <p> texto texto texto texto texto texto </p>
        </div>

        <div class="row equal_height space-100">
          <div class="col-lg-4 col-md-6"> 
            <div class="icon mar-bottom-10">
              <img src="imagens/pngwing.com.png" alt class="img-fluid"/> 
            </div>
          </div>
          <h3 class="font-20 font-bold text-center"> texto</h3>
          <p>texto texto texto texto texto texto</p>
        </div>
      </div>
    </div>

CSS:

 @media (min-width: 576px){
    .container{
        width: 1500px;
        max-width: 100%;
    }

    .container h3{ 
        text-align: center; 
        color: #173083;
        margin-top: 10px;
        margin-bottom: .5rem;
        font-family: inherit;
    }

    .container p{ 
        text-align: center !important; 
        color: #173083;
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    .container img{
        max-width: 60px;
        max-height: 60px;
        width: auto;
        height: auto;
        margin-top: 5px;
        margin-bottom: 10px;
        margin-bottom: 10px !important;
    }

    .icon{
        display: inline-block;
        border-radius: 100%;
    }

    .col-md-6{
        padding-right: 15px;
        padding-left: 15px;
    }

    .row{
        display: flex;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }
}

.container{
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
css html5 twitter-bootstrap

1 answer

0


Restructure your html.

        <div class="equal_height space-100">
            <div class="col-lg-4 col-md-6">
                <div class="icon mar-bottom-10">
                    <img src="airport.jpg" alt class="img-fluid" />
                </div>
            </div>                              
        </div>
        <div class="row equal_height space-100">
            <h3 class="font-20 font-bold text-center"> texto</h3>
            <p>texto texto texto texto texto texto</p>
        </div>

Take the margin-left and margin-right properties from the Row class

Browser other questions tagged css html5 twitter-bootstrap

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