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
How to Define Constants in CSS
Font-Feature-Settings: What Is the Correct Syntax
Difference Between Aspect-Ratio and Device-Aspect-Ratio in CSS Media Queries
How to Change Svg Fill Color When Used as Base-64 Background Image Data
iOS CSS Opacity + Visibility Transition
Is There a Version of Yui Compressor That Deals Correctly with Media Queries
::After on :Hover Does Not Work in Ie
Consistent Origin in CSS Rotation Between IE8 and Everything Else
Font Face Not Working in IE8 as Expected
How to See the Print Media CSS in Firebug
Bind Angularjs Variables into CSS Syntax
How to Prevent :After Pseudo Element from Being Read by Screen Readers
Prevent Child Div from Overflowing Parent Div
Blur Effect on the Entire Webpage
How to Vertically Center Align a Position:Relative Element