0

I have a row and 2 columns in there which I am trying to make the same height as there are border lines top and bottom that should be alined, also box shadow. I've tried tons of recommended solutions recommended here excluding the ones involving javascript, How can I make Bootstrap columns all the same height? and none worked. E.g. adding this CSS to the row class didn't work:

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

My CSS:

   
.contact .info  {
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}
.contact .php-email-form {
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

  <section id="contact" class="contact">
      <div class="container">
        <div class="section-title">
          <h2>CONTACT</h2>     
        </div>
 
        <div class="row">   

          <div class="col-md-5">
            <div class="info">
                <div class="email">
                <i class="bi bi-envelope"></i>
                <h4>Email:</h4>
                <p>email</p>
            </div>
            <div class="phone">
                <i class="bi bi-phone"></i>
                <h4>Telephone:</h4>
                <p>95 966 0</p>         
            </div>
            <div class="address">
                <i class="bi bi-geo-alt"></i>
                <h4>Messenger:</h4>
                <p>address</p>
            </div>
            <div class="phone">
                <i class="bi bi-phone"></i>
                <h4>Whatsapp:</h4>
                <p>745 2720</p>
            </div>
            <div class="phone">
                <i class="bi bi-phone"></i>
                <h4>Telegram:</h4>
                <p>745 2720</p>
            </div>
            </div>
          </div>

          <div class="col-md-7">
            <form action="forms/contact.php" method="post" role="form" class="php-email-form">
              <div class="row">
                <div class="form-group col-md-6">
                  <label for="name">N</label>
                  <input type="text" name="name" class="form-control" id="name" required>
                </div>
                <div class="form-group col-md-6">
                  <label for="name">Email</label>
                  <input type="email" class="form-control" name="email" id="email" required>
                </div>
            </div>
             <div class="row">
            <div class="form-group col-md-6">
                <label for="name">Mobile</label>
                <input type="text" class="form-control" name="subject" id="subject" required>
            </div>  
            <div class="form-group col-md-6">
                <label for="name">F</label>
                <input type="text" class="form-control" name="subject" id="subject" required>
              </div>
                 </div>
              <div class="form-group">
                <label for="name">T</label>
                <input type="text" class="form-control" name="subject" id="subject" required>
              </div>
          
              <div class="form-group">
                <label for="name">U</label>
                <textarea class="form-control" name="message" rows="6" required></textarea>
              </div>
              <div class="err">
                <div class="processing">Loading</div>
                <div class="error-message"></div>
                <div class="sent-message">Your message has been sent.!</div>
              </div>
              <div class="text-center"><button type="submit">Send</button></div>
            </form>
          </div> 

        </div>
      </div>
    </section>
zoltank
  • 37
  • 5
  • This is not a feature of BS3. When I was using BS3 and needed equal heights on elements, I used a super friendly script called matchheight.js. If you're stuck with BS3 then it might be worth a look. It's super simple to implement and use. – CChoma Oct 13 '22 at 18:42

1 Answers1

1

You have to be very specific with your css.

I added a border to your cols so you have a visual of the col height.

BS3 was not designed to work with flex, but that doesn't mean it can't.

Update:

Created 2 css classes .d-flex, and .d-flex-item

In CSS flex model display:flex items make their children flex items which by default stretch to fit their container's height.

This goes only one level deep so to make this work with your layout:

  • div.row is a flex container
  • div.col-md-5:
    • is a flex item of its parent: div.row
    • is a flex container to its child div.info
      • div.info is a flex item of its parent: div.col-md-5
  • div.col-md-7 is a flex item of its parent: div.row

All of this is to allow the flex items to stretch to their parent containers. Setting a CSS height on any flex-item will override the default stretch for that item.

/* No changes here to your css */

.contact .info {
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

.contact .php-email-form {
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}


/* flex css, see your HTML class attribute */

.d-flex {
  display: flex;      
}

.d-flex-item {
  flex: 1 0 auto;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>


<section id="contact" class="contact">
  <div class="container">
    <div class="section-title">
      <h2>CONTACT</h2>
    </div>

    <div class="row d-flex">
      <div class="col-md-5 d-flex-item d-flex">
        <div class="info d-flex-item">
          <div class="email">
            <i class="bi bi-envelope"></i>
            <h4>Email:</h4>
            <p>email</p>
          </div>
          <div class="phone">
            <i class="bi bi-phone"></i>
            <h4>Telephone:</h4>
            <p>95 966 0</p>
          </div>
          <div class="address">
            <i class="bi bi-geo-alt"></i>
            <h4>Messenger:</h4>
            <p>address</p>
          </div>
          <div class="phone">
            <i class="bi bi-phone"></i>
            <h4>Whatsapp:</h4>
            <p>745 2720</p>
          </div>
          <div class="phone">
            <i class="bi bi-phone"></i>
            <h4>Telegram:</h4>
            <p>745 2720</p>
          </div>
        </div>
      </div>

      <div class="col-md-7 d-flex-item">
        <form action="forms/contact.php" method="post" role="form" class="php-email-form">
          <div class="row">
            <div class="form-group col-md-6">
              <label for="name">N</label>
              <input type="text" name="name" class="form-control" id="name" required>
            </div>
            <div class="form-group col-md-6">
              <label for="name">Email</label>
              <input type="email" class="form-control" name="email" id="email" required>
            </div>
            <div class="form-group col-md-6">
              <label for="name">Mobile</label>
              <input type="text" class="form-control" name="subject" id="subject" required>
            </div>
            <div class="form-group col-md-6">
              <label for="name">F</label>
              <input type="text" class="form-control" name="subject" id="subject" required>
            </div>
            <div class="form-group col-md-6">
              <label for="name">T</label>
              <input type="text" class="form-control" name="subject" id="subject" required>
            </div>

            <div class="form-group col-md-6">
              <label for="name">U</label>
              <textarea class="form-control" name="message" rows="6" required></textarea>
            </div>
            <div class="err">
              <div class="processing">Loading</div>
              <div class="error-message"></div>
              <div class="sent-message">Your message has been sent.!</div>
              <div class="text-center"><button type="submit">Send</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>
fnostro
  • 4,531
  • 1
  • 15
  • 23
  • Excellent, thanks! The columns now match in height. So what'd be the best way to make my CSS (added to original post) to extend to the full height of the columns? Thanks – zoltank Oct 13 '22 at 19:39
  • Same idea, targeted flex css. I'll modify my post and clean up the CSS – fnostro Oct 13 '22 at 20:11