CODEWITHSUNDEEP
htmlcssflexboxtwitter-bootstrap-4
Hasan Tareq
Hasan Tareq

Reputation: 375

How to make any element cover rest of the total area using bootstrap 4 d-flex?

This structure can be created easily using bootstrap d-flex now. How am I suppose to create any area like the second image?

First image Second image

Upvotes: 1

Views: 402

Answers (1)

Bhuwan
Bhuwan

Reputation: 16855

You will need to apply flex-grow:1 to the middle div so that it can occupy the remaining space

.bd-highlight {
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .15);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-flex align-items-start flex-column bd-highlight" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight" style="flex-grow:1;">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

Upvotes: 3

Related Questions