Bootstrap 3 make columns of a raw all the same height-CodePudding

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" >
      <div >
        <div >
          <h2>CONTACT</h2>     
        </div>
 
        <div >   

          <div >
            <div >
                <div >
                <i ></i>
                <h4>Email:</h4>
                <p>email</p>
            </div>
            <div >
                <i ></i>
                <h4>Telephone:</h4>
                <p>95 966 0</p>         
            </div>
            <div >
                <i ></i>
                <h4>Messenger:</h4>
                <p>address</p>
            </div>
            <div >
                <i ></i>
                <h4>Whatsapp:</h4>
                <p>745 2720</p>
            </div>
            <div >
                <i ></i>
                <h4>Telegram:</h4>
                <p>745 2720</p>
            </div>
            </div>
          </div>

          <div >
            <form action="forms/contact.php" method="post" role="form" >
              <div >
                <div >
                  <label for="name">N</label>
                  <input type="text" name="name"  id="name" required>
                </div>
                <div >
                  <label for="name">Email</label>
                  <input type="email"  name="email" id="email" required>
                </div>
            </div>
             <div >
            <div >
                <label for="name">Mobile</label>
                <input type="text"  name="subject" id="subject" required>
            </div>  
            <div >
                <label for="name">F</label>
                <input type="text"  name="subject" id="subject" required>
              </div>
                 </div>
              <div >
                <label for="name">T</label>
                <input type="text"  name="subject" id="subject" required>
              </div>
          
              <div >
                <label for="name">U</label>
                <textarea  name="message" rows="6" required></textarea>
              </div>
              <div >
                <div >Loading</div>
                <div ></div>
                <div >Your message has been sent.!</div>
              </div>
              <div ><button type="submit">Send</button></div>
            </form>
          </div> 

        </div>
      </div>
    </section>

CodePudding user response：

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/[email protected]/font/bootstrap-icons.css">

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

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

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


<section id="contact" >
  <div >
    <div >
      <h2>CONTACT</h2>
    </div>

    <div >
      <div >
        <div >
          <div >
            <i ></i>
            <h4>Email:</h4>
            <p>email</p>
          </div>
          <div >
            <i ></i>
            <h4>Telephone:</h4>
            <p>95 966 0</p>
          </div>
          <div >
            <i ></i>
            <h4>Messenger:</h4>
            <p>address</p>
          </div>
          <div >
            <i ></i>
            <h4>Whatsapp:</h4>
            <p>745 2720</p>
          </div>
          <div >
            <i ></i>
            <h4>Telegram:</h4>
            <p>745 2720</p>
          </div>
        </div>
      </div>

      <div >
        <form action="forms/contact.php" method="post" role="form" >
          <div >
            <div >
              <label for="name">N</label>
              <input type="text" name="name"  id="name" required>
            </div>
            <div >
              <label for="name">Email</label>
              <input type="email"  name="email" id="email" required>
            </div>
            <div >
              <label for="name">Mobile</label>
              <input type="text"  name="subject" id="subject" required>
            </div>
            <div >
              <label for="name">F</label>
              <input type="text"  name="subject" id="subject" required>
            </div>
            <div >
              <label for="name">T</label>
              <input type="text"  name="subject" id="subject" required>
            </div>

            <div >
              <label for="name">U</label>
              <textarea  name="message" rows="6" required></textarea>
            </div>
            <div >
              <div >Loading</div>
              <div ></div>
              <div >Your message has been sent.!</div>
              <div ><button type="submit">Send</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>