CODEWITHSUNDEEP
htmlcssresponsive-designbootstrap-5
Ahmed Sajid
Ahmed Sajid

Reputation: 15

How can I make Bootstrap columns all the same height with gap?

I'm using Bootstrap. How can I make three columns all the same height including the gap? Here is the screenshot;
Screenshot

Here is the code;

<div class="container">
  <div class="row mt-4">
    <div class="col-12 col-md-6 col-xl-4 service mt-4">
      <div class="p-3">
        <div class="icon">
          <i class="fa-solid fa-laptop-code fs-1"></i>
        </div>
        <h5 class="mb-4 mt-2">Web Development</h5>
        <p>I provide full Web Development according to your needs.</p>
      </div>
    </div>
    <div class="col-12 col-md-6 col-xl-4 service mt-4">
      <div class="p-3">
        <div class="icon">
          <i class="fa-solid fa-palette fs-1"></i>
        </div>
        <h5 class="mb-4 mt-2">Web Design</h5>
        <p>I will do the best and most Modern Web App Designs for your website.</p>
      </div>
    </div>
    <div class="col-12 col-md-6 col-xl-4 service mt-4">
      <div class="p-3">
        <div class="icon">
          <i class="fa-solid fa-mobile-screen-button fs-1"></i>
        </div>
        <h5 class="mb-4 mt-2">Responsive Design</h5>
        <p>Fully Responsive Design using Bootstrap or Media Queries.</p>
        </div>
      </div>
    </div>
  </div>

Here is some CSS;

.p-3{
  text-align: center;
  background: #202020;
  border-radius: 10px;
}

Upvotes: 0

Views: 329

Answers (3)

harsh deep
harsh deep

Reputation: 21

html

<div id="myContainer" class="col-md-12">
        <div class="col-md-4" id="myItem">
            <div id= "myCard">
                this is my item
            </div>
        </div>
        <div class="col-md-4" id="myItem">
            <div id= "myCard">
                this is my item
            </div>
        </div>
        <div class="col-md-4" id="myItem">
            <div id= "myCard">
                this is my item
            </div>
        </div>
    </div>

css

#myContainer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    justify-content: center;
}
#myItem{
    display:flex;
    align-items: center;
    justify-content: center;
}
#myCard{
    height:100px;
    width:200px;
    background-color: blue;
    height:300px;
    width:95%;
}

Upvotes: 1

Максим Мовчан
Максим Мовчан

Reputation: 167

Try this

.row>div {
  display: grid;
}

Upvotes: 0

Ahmed Sajid
Ahmed Sajid

Reputation: 15

Adding height: 100% to class p-3 will solve the problem.

Edit the CSS like the following;

.p-3{
  height: 100%;       //add this to the CSS code
  text-align: center;
  background: #202020;
  border-radius: 10px;
}

Upvotes: 1

Related Questions