I would like to make the columns after the first row so col-md-6 to be equal height even with dynamic content (go to full page).
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!--JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div >
<div >
<div >
<div >
<div >
<div >
<div >
-Icon-
</div>
<div >
<p>Date</p>
</div>
</div>
</div>
<p>Author</p>
<div >
<div >
<p>Time</p>
</div>
<div >
<div>
</div>
</div>
<!-- This needs to get the latest unread message -->
<!-- {% if unreadMessagesCount %}
<p>Unread: {{unreadMessagesCount}}</p>
{% if inbox %}
<div>
<p>{{inbox.first.sender}}</p>
</div>
<div>
<div>
<p>{{inbox.first.subject}}</p>
</div>
</div>
{{inbox.first.text}}
{{inbox.first.time}}
{% endif %}
{% else %}
<p>Unread: 0</p>
<div>
<p>There are no senders</p>
</div>
{% endif %} -->
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<div >
-Icon-
</div>
<div >
More stuff than possible
<!-- {% if request.user.refresh_token != "" %}
<div>
There are maybe some
</div>
{% else %}
<div>
There are no calendar events
</div>
{% endif %} -->
</div>
</div>
</div>
<p>Author</p>
<div >
<div >
<p>Time</p>
</div>
<div >
<div>
</div>
</div>
</div>
</div>
</div>
<!-- This needs to get the earliest calendar event -->
</div>
</div>
</body>
</html>CodePudding user response：
Add h-100 or height: 100%; to the first child of col-md-6 column start for both columns.
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!--JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div >
<div >
<div >
<div >
<div >
<div >
<div >
-Icon-
</div>
<div >
<p>Date</p>
</div>
</div>
</div>
<p>Author</p>
<div >
<div >
<p>Time</p>
</div>
<div >
<div>
</div>
</div>
<!-- This needs to get the latest unread message -->
<!-- {% if unreadMessagesCount %}
<p>Unread: {{unreadMessagesCount}}</p>
{% if inbox %}
<div>
<p>{{inbox.first.sender}}</p>
</div>
<div>
<div>
<p>{{inbox.first.subject}}</p>
</div>
</div>
{{inbox.first.text}}
{{inbox.first.time}}
{% endif %}
{% else %}
<p>Unread: 0</p>
<div>
<p>There are no senders</p>
</div>
{% endif %} -->
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<div >
-Icon-
</div>
<div >
More stuff than possible
<!-- {% if request.user.refresh_token != "" %}
<div>
There are maybe some
</div>
{% else %}
<div>
There are no calendar events
</div>
{% endif %} -->
</div>
</div>
</div>
<p>Author</p>
<div >
<div >
<p>Time</p>
</div>
<div >
<div>
</div>
</div>
</div>
</div>
</div>
<!-- This needs to get the earliest calendar event -->
</div>
</div>
</body>
</html>