All geek questions in one place

Bootstrap 4 and the height of many elements

It’s hard for me to explain what I want, so I did a mocup enter image description here

How to do this with bootstrap 4? Thus, the goal is that these four elements on the right all the time (except mobile) are equal in height, like the element on the left (image). Can anyone help with this? Now macrup.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body>

  <div class="container">
    <section class="hero">
      <div class="row">
        <div class="col col-md-8"><img src="http://placehold.it/700x300/ccc/333.png?text=placeholder" alt=""></div>
        <div class="col col-md-4">
          <div class="contentMy">somthing</div>
          <div class="contentMy">somthing</div>
          <div class="contentMy">somthing</div>
          <div class="contentMy">somthing</div>
        </div>
      </div>
    </section>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>
Run codeHide result
+4
source share
1 answer

You can use Bootstrap 4 new flexbox utility classes. The class is d-flexused to display:flex, and then flex-columnused to set flex-direction: column..

<div class="container">
    <section class="hero">
        <div class="row">
            <div class="col col-md-8"><img src="" alt=""></div>
            <div class="col col-md-4 d-flex flex-column">
                <div class="contentMy h-100">somthing</div>
                <div class="contentMy h-100">somthing</div>
                <div class="contentMy h-100">somthing</div>
                <div class="contentMy h-100">somthing</div>
            </div>
        </div>
    </section>
</div>

http://www.codeply.com/go/YyTEyi4IcU

+3

Source: https://habr.com/ru/post/1672050/

More articles:


All Articles