How to align these 2 divs vertically with the given html (need them to start at same vertical level)

user_13954577 0
Viewed 45

<div class="container">
                    <div class="row">
                    <div class="col-lg-12">
                        <div class="news-title">
                        <h3 class="title">NEWS & ARTICLES</h3>
                        </div>
                    </div></div>
                    <div class="row row-cols-1 row-cols-md-3 g-4" style="justify-content: center;margin-top: 25px;">
                    <div class="col resize-card">
                        <div class="card-img-wrap h-100">
                            <img src="SiteAssets/assets/igomd/images/news-1.png" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h4 class="card-title">KIOSK</h4>
                                
                            </div>
                        </div>
                    </div>
                    <div class="col resize-card">
                        <div class="card-img-wrap h-100">
                            <img src="SiteAssets/assets/igomd/images/news-2.png" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h4 class="card-title">LOREM</h4>                               
                            </div>
                        </div>
                    </div>
                    <div class="col resize-card">
                        <div class="card-img-wrap h-100">
                            <img src="SiteAssets/assets/igomd/images/news-3.png" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h4 class="card-title">IPSUM</h4>                               
                            </div>
                        </div>
                    </div>
                </div>
                </div>

Basicly i need to align NEWS & ARTICLES and the Cards below vertically. So they have to start at the same vertical level. I could not manage to find a css solution for this.

I think that the div with the (class="row row-cols-1 row-cols-md-3 g-4" style="justify-content: center;margin-top: 25px;) properties are preventing the title and Cards to start at the same vertical level.

I made a crop and paste picture to show you what i need to accomplish you guys. Here is the photo of what i need to do.

enter image description here

What can i do to accomplish this below with that given html?

enter image description here

twitter-bootstrap css html
1 Answers

This is working fine in my case maybe there is some CSS conflicts in your code.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="news-title">
          <h3 class="title">NEWS & ARTICLES</h3>
        </div>
      </div></div>
    <div class="row row-cols-1 row-cols-md-3 g-4" style="justify-content: center;margin-top: 25px;">
      <div class="col resize-card">
        <div class="card-img-wrap h-100">
          <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h4 class="card-title">KIOSK</h4>

          </div>
        </div>
      </div>
      <div class="col resize-card">
        <div class="card-img-wrap h-100">
          <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h4 class="card-title">LOREM</h4>                               
          </div>
        </div>
      </div>
      <div class="col resize-card">
        <div class="card-img-wrap h-100">
          <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h4 class="card-title">IPSUM</h4>                               
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

user_96234310
Related