How to Use Bootstrap 4 Flexbox to Fill Available Content

How to use Bootstrap 4 flexbox to fill available content?

Update Bootstrap 4.1.0

The flex-grow-1 and flex-fill classes are included in Bootstrap 4.1.0

Update Bootstrap 4.0.0

Add a flex-grow class like this:

.flex-grow {
flex: 1 0 auto;
}

Then, the utility classes can be used for the rest of the layout:

 <div class="d-flex flex-column h-100">
<nav class="navbar navbar-toggleable-md sticky-top bg-faded">
<a class="navbar-brand" href="#">
<h1 class="navbar-brand mb-0">My App</h1>
</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link">Item 1</a></li>
</ul>
</nav>
<div id="outer" class="d-flex flex-column flex-grow">
<div id="one" class="">
header content
<br> another line
<br> And another
</div>
<div id="two" class="bg-info h-100 flex-grow">
main content that I want to expand to cover remaining available height
</div>
<div id="three" class="">
footer content 40px height
</div>
</div>
</div>

https://www.codeply.com/go/3ZDkRAghGU

Here's another example with on Bootstrap 4.3.1 that has a navbar, sidebar and footer with scrolling content area:
https://www.codeply.com/go/LIaOWljJm8

Bootstrap - Flex Box Container With Scrollable Content

Use the flex-* and overflow-* classes. Also, it's easier to set the height using vh-100 so that you don't need to set h-100 on html, body, container, etc...

<div class="vh-100 d-flex flex-column overflow-hidden">
<div class="flex-shrink-1 bg-dark text-white p-1">
<span>Top Bar</span>
</div>
<div class="flex-fill d-flex flex-row overflow-auto">
<aside class="sidebar d-flex flex-column">
<div class="bg-dark text-white p-1">
<span>Side Title Bar</span>
</div>
<div class="sidebar-content p-2 overflow-auto">

</div>
</aside>
<main class="main flex-fill p-3 overflow-auto">

</main>
</div>
<div class="flex-shrink-1 bg-primary text-white p-1">
<span>Bottom Bar</span>
</div>
</div>

Codeply


Related: How to implement responsive, independently scrolling panes in Bootstrap?

How can I make children of flex-column evenly fill all available height?

Just use d-flex on the columns to set their display property. It's not inherited.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex flex-row">
<div class="d-flex flex-column">
<div class="flex-fill border border-dark">1/8</div>
<div class="flex-fill border border-dark">2/8</div>
<div class="flex-fill border border-dark">3/8</div>
<div class="flex-fill border border-dark">4/8</div>
<div class="flex-fill border border-dark">5/8</div>
<div class="flex-fill border border-dark">6/8</div>
<div class="flex-fill border border-dark">7/8</div>
<div class="flex-fill border border-dark">8/8</div>
</div>

<div class="d-flex flex-column">
<div class="flex-fill border border-dark">1/4</div>
<div class="flex-fill border border-dark">2/4</div>
<div class="flex-fill border border-dark">3/4</div>
<div class="flex-fill border border-dark">4/4</div>
</div>
</div>

Why bootstrap 4 row doesn't expand to full available width?

Changing the bootstrap class .container to .container-fluid and changing the class .col-10 to .col gives the result you describe. Remember that .col-10 means use 10 of the 12 available columns so puts a 1-column space on either side of that div.

.news_content {
background: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid"><!-- Change to container-fluid -->
<div class="row justify-content-md-center">
<div class="col pb-2 text-justify news_content">
test
</div>
</div>
</div>

Bootstrap 4 row fill remaining height

Use the Bootstrap 4.1 flex-grow-1 class...

https://codeply.com/go/Iyjsd8djnz

html,body{height:100%;}

.bg-purple {
background: rgb(48,0,50);
}
.bg-gray {
background: rgb(74,74,74);
}
.bg-blue {
background: rgb(50,101,196);
}
.bg-red {
background: rgb(196,50,53);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid h-100">
<div class="row justify-content-center h-100">
<div class="col-4 bg-red">
<div class="h-100 d-flex flex-column">
<div class="row justify-content-center bg-purple">
<div class="text-white">
<div style="height:150px">ROW 1 - fixed height</div>
</div>
</div>
<div class="row justify-content-center bg-blue flex-grow-1">
<div class="text-white">ROW 2 - grow remaining height</div>
</div>
</div>
</div>
<div class="col-8 bg-gray"></div>
</div>
</div>

Bootstrap 4 Flexbox force rows to fill vertical space inside col

As of Bootstrap 4.1.0, the Flex grow utilities are included. Just change the 2nd column to <div class="col col-sm-4 d-none d-sm-flex flex-column">, and then add flex-grow-1 to the rows. The rows on the right will auto fill the height.

https://codeply.com/go/CaJxOgoFHX

<div class="col col-sm-4 d-none d-sm-flex flex-column">
<div class="row flex-grow-1">
<div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
<div class="col-sm-9 bg-success">Video One</div>
</div>
<div class="row flex-grow-1">
<div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
<div class="col-sm-9 bg-success">Video Two</div>
</div>
<div class="row flex-grow-1">
<div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
<div class="col-sm-9 bg-success">Video Three</div>
</div>
<div class="row flex-grow-1">
<div class="col-sm-3 bg-warning"><img class="img-fluid" src="http://via.placeholder.com/730x411"></div>
<div class="col-sm-9 bg-success">Video Four</div>
</div>
</div>

Note: This uses Bootstrap 4.1.0 which includes the flex-grow-1 class.


Related: Flexbox 3 divs, two columns, one with two rows

Bootstrap 4 flex-fill not filling height

The parent container needs to have a defined height. For example, use min-vh-100 to make it viewport height...

https://www.codeply.com/go/pr2crCfas2

<div class="container-fluid p-0" style="background-color:brown">
<div class="d-flex flex-column min-vh-100">
<div class="d-flex" style="background-color:aqua">Header</div>
<div class="d-flex flex-fill" style="background-color:yellow">This should be variable in height</div>
<div class="d-flex" style="background-color:aqua">Footer</div>
</div>
</div>

Also note the class for display:flex is d-flex

Bootstrap 4 Navbar and content fill height flexbox

Instead of using h-100 on the yellow content area, add an extra CSS class to make it flex-grow:1 in height...

.flex-fill {
flex:1 1 auto;
}

https://www.codeply.com/go/xBAMfbHqbN

<div class="container-fluid h-100 d-flex flex-column">
<nav class="navbar navbar-expand-sm s-navbar">
<a class="brand navbar-brand" href="/">Brand</a>
<button class="navbar-toggler s-btn-hamburger order-first s-color-icons" aria-expanded="true" aria-controls="navbar-test" aria-label="Toggle navigation" type="button" data-target="#navbar-test" data-toggle="collapse">
<span class="navbar-toggler-icon k-icon k-icon-md k-i-hamburger"></span>
</button>
<div class="navbar-collapse s-menu-content collapse show" id="navbar-test">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown1" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">Menu Item</a>
<div class="dropdown-menu" aria-labelledby="dropdown1">
<a class="dropdown-item" href="/Device">Sub menu</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/Test">Test</a>
</li>
</ul>
</div>
</nav>
<div class="row flex-fill">
<main class="col" style="background-color: yellow"></main>
</div>
</div>

Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release:
https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9

(Updated Bootstrap 4.1 demo)


Related question: Bootstrap 4: How to make the row stretch remaining height?



Related Topics



Leave a reply



Submit