I'm trying to create a full screen layout that takes up 100% of the viewport with a sticky header and footer, and individually scrollable columns in the main content area.
I've experimented with using .h-100 and .flex-grow-1 on various rows and columns but I can't quite get it to work. The closest I've come is to add h-100 to the container and the middle row, but that pushes the footer off the bottom of the screen.
<body>
<div class="container-fluid h-100">
<div class="row">
<div class="col-12 border">Navbar </div>
</div>
<div class="row">
<div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
<div class="col-4 border" style="overflow-y: scroll;">Article list </div>
<div class="col-6 border" style="overflow-y: scroll;">Article content </div>
</div>
<div class="row">
<div class="col-12 border">Footer </div>
</div>
</div>
</body>
I can get it to work with just a single column, but adding more than 1 column breaks the layout in a way I don't understand.
Make the container d-flex and then use flex-grow-1 to make the content area fill the height. You'll also want to use flex-shrink-0 on the Navbar and Footer so they don't "squish" in height.
<div class="container-fluid h-100 d-flex flex-column">
<div class="row flex-shrink-0">
<div class="col-12 border">Navbar </div>
</div>
<div class="row flex-grow-1">
<div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
<div class="col-4 border" style="overflow-y: scroll;">
Article list
</div>
<div class="col-6 border" style="overflow-y: scroll;">Article content </div>
</div>
<div class="row flex-shrink-0">
<div class="col-12 border">Footer </div>
</div>
</div>
Demo: https://www.codeply.com/go/ouc3hddx5i
Related:
Use remaining vertical space with Bootstrap 4
Bootstrap 4.0 - responsive header with image + navbar + full-height body
Related
I have a question regarding a bootstrap grid system I am trying to achieve - and have not been successful so far.
I am trying to do the following grid system:
I have tried a code that you'll find with this JSFiddle.
<div class="container mt-5">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 border bg-primary" style="height: 200px">
<h3>Bloc 1</h3>
</div>
<div class="col-lg-6 col-md-6 col-12 border bg-light">
<h3>Bloc 2</h3>
</div>
<div class="col-lg-6 col-md-12 bg-danger">
<h3>Bloc 3</h3>
</div>
</div>
</div>
It works well for xs and md system. However, I have issues with the lg version, where I don't find a way to stack the bloc number 2 (grey) on top of the bloc number 3 (red). Is there a way to change the place of such a column? As indicated on the figure above, the bloc number 1 should fall to the bottom of the page.
Thanks a lot for your help!
Basically, you have to wrap a div for a second column around the gray and red divs
<div class="container ">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 border bg-primary" style="height: 200px">
<h3>Bloc 1</h3>
</div>
<div class="col-lg-6 col-md-6 col-12"><!--NEW DIV, moved column info here-->
<div class=" border bg-light">
<h3>Bloc 2</h3>
</div>
<div class=" bg-danger">
<h3>Bloc 3</h3>
</div>
</div><!--new div end-->
</div>
</div>
You will need to work out the tweaks for spacing, but this is a start
Basically, I have a bootstrap container and 2 rows in it, one being the header and the other the content. I would like to have the container to have the height of the viewport so that the content is scrollable.
<div class="container-fluid overflow-hidden h-100">
<div class="row">
<div class="col">
<h1>Header</h1>
</div>
</div>
<div class="row content-area">
<div class="col">
<div>Content blah...</div>
</div>
</div>
</div>
.content-area {
max-height: 100%;
overflow-y: auto;
}
The max-height renders the content full height of the parent which is the container so a part of the content is chopped off the view. I would like the content to fill the rest of the container's height.
I tried flex-grow-1 from bootstrap instead of the css height but no luck.
Make the container vh-100 d-flex flex-column and then add flex-grow-1 to the row.
<div class="container-fluid overflow-hidden vh-100 d-flex flex-column">
<div class="row">
<div class="col">
<h1>Header</h1>
</div>
</div>
<div class="row content-area bg-info flex-grow-1">
<div class="col">
<h1>Content blah... </h1>
...
</div>
</div>
</div>
Demo: https://codeply.com/p/7u2lXo0jyG
Related: Bootstrap 4 row fill remaining height
Add vh-100 class on the first row. It will make the viewport height, 100%.
<div class="container-fluid overflow-hidden h-100">
<div class="row vh-100">
<div class="col">
<h1>Header</h1>
</div>
</div>
<div class="row content-area">
<div class="col">
<div>Content blah...</div>
</div>
</div>
Source: https://getbootstrap.com/docs/4.4/utilities/sizing/
I am using bootstrap 4.3 spinner, all working well but i want to put additional text under the spinner. Here is my HTML
<div class="d-flex justify-content-center">
<div class="row">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="row">
<strong>Collecting data</strong>
</div>
</div>
But the text "collecting data" is appending on the spinner, how can i fix this?
Add these two classes to the container div:
flex-column align-items-center
flex-column makes the flexbox stack vertically and align-items-center centers the items on the new axis.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column align-items-center justify-content-center">
<div class="row">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="row">
<strong>Collecting data</strong>
</div>
</div>
Problem is when you define your wrapping div class as display:flex it stack the inside elements as a columns.
<div class="container-fluid">
<div class="row justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="row justify-content-center">
<strong>Collecting data</strong>
</div>
</div>
container class will remove minus borders form row and justify-content-center will centered the items inside row
Demo Code Pen
I'm using bootstrap 4 and trying to create a layout. The problem I'm having is with the responsive.
When the page size gets smaller I want the right-nav to go under the left-nav. The problem I run into is when the main body runs longer than the left nav. The right nave always goes under the main body, is there a way to force it under the left-nav without the space in between?
<div class="container-fluid">
<div class="row pt-5 pl-3 pr-3">
<div id="left-nav" class="d-none d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2">
...
</div>
<div id="main-body" class="col-12 col-sm-12 col-md-8 col-lg-9 col-xl-8">
...
</div>
<div id="right-nav" class="d-none d-sm-none d-md-block col-md-3 col-lg-3 col-xl-2">
...
</div>
</div>
<section id="footer" class="footer">
<div class="container">
<div class="row">
</div>
</div>
</div>
</div>
Since Bootstrap 4 uses flexbox, cols across a row are always going to be the equal height (set by the height of the tallest).
You can workaround this by "disabling" flexbox at certain breakpoints using d-(breakpoint)-block on the row. By making the row display:block instead display:flex, floats can now be used to float cols to the right or left.
<div class="container-fluid">
<div class="row pt-5 d-md-block d-xl-flex">
<div id="left-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border float-left">
left
</div>
<div id="main-body" class="col-md-8 col-lg-9 col-xl-8 border taller float-right">
main
</div>
<div id="right-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border">
right
</div>
</div>
</div>
Demo: https://www.codeply.com/go/A0oYUlPOud
Related:
How to fix unexpected column order in bootstrap 4?
How to make this column ignore the vertical space
I'm using Bootstrap 4 alpha 6, and attempting to use flexbox to vertically center the content of equal height cards. I've used the h-100 util class to make the cards full height with the columns..
The problem is that I want the content of each card to be aligned in the middle (centered vertically). I tried the use the .align-items-center class in the row, which works to center the cards, but then the cards are no longer equal height...
HTML
<div class="container">
<div class="row align-items-center bg-faded">
<div class="col-md-2">
<div class="card card-block h-100">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100">
I have a little bit.
</div>
</div>
</div>
</div>
Demo of problem
Here is a simpler solution for you:
using only justify-content-center utility class because .card has already flex-direction: column property
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<code>normal .row with .card inside .col-*</code>
<h6>Problem is that card content is not centered</h6>
<div class="row bg-faded">
<div class="col-md-2">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a little bit.
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<code>.align-items-center.row with .card inside .col-</code>
<h6>Problem is that cards are no longer full height</h6>
<div class="row bg-faded">
<div class="col-md-2">
<div class="card card-block h-100 justify-content-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 justify-content-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 justify-content-center">
I have a little bit.
</div>
</div>
</div>
</div>
One way I've found to solve the centering issue is using the flex-column utility class. Since each card is display: flex, flex-column can be used to set flex-direction: column. Then, justify-content-center vertically aligns the content...
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="card card-block h-100 flex-column justify-content-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 flex-column justify-content-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 flex-column justify-content-center">
I have a little bit.
</div>
</div>
</div>
</div>
Demo