I am trying to build a fairly standard application layout with Bootstrap 5 and flexbox, consisting of a top bar, bottom bar and an auto-sized content area. The content area is split into a side bar and a main content area.
For reference I want it to look something like VSCode.
With some tags omitted for brevity, here is what I have so far:
<!doctype html>
<html class="h-100 mh-100" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
.sidebar {
background: red;
flex: 0 0 25%;
}
.main {
background: blue;
}
</style>
</head>
<body class="h-100 mh-100">
<div class="h-100 mh-100 d-flex flex-column">
<div class="bg-dark text-white p-1">
<span>Top Bar</span>
</div>
<div class="flex-fill d-flex flex-row">
<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 overflow-scroll">
<div style="height: 0; background: magenta;"></div>
</div>
</aside>
<main class="main flex-fill">
</main>
</div>
<div class="bg-primary text-white p-1">
<span>Bottom Bar</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
</body>
</html>
What I want is for the sidebar content to scroll when it exceeds the available space in the viewport, but for example if you increase the height of the content div in the sidebar the whole lot scrolls together, and pushes the bottom bar out of view.
How do I keep all panels in view (top, bottom, side and main), and allow individual panels to scroll when necessary, without pushing the content out of view?
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?
Related
I have 2 scrollable columns in Bootstrap 4 and they work ok:
html,
body {
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid d-flex flex-column vh-100">
<div class="row border flex-shrink-0">
Header
</div>
<div class="row flex-grow-1 overflow-hidden">
<div class="col-6 mh-100 overflow-auto">
Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
</div>
<div class='col-6 mh-100 overflow-auto'>
World<br>World<br>World<br>World<br>World<br>World<br>World<br>
World<br>World<br>World<br>World<br>World<br>World<br>World<br>
World<br>World<br>World<br>World<br>World<br>World<br>World<br>
</div>
</div>
<div class="row border flex-shrink-0">
Footer
</div>
</div>
For mobile, I use #media to change mh-100 and overflow and wrap the 2 columns into 1 column like this:
html,
body {
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid d-flex flex-column vh-100">
<div class="row border flex-shrink-0">
Header
</div>
<div class="row flex-grow-1 mh-100 overflow-auto">
<div class="col-12 overflow-visible">
Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
</div>
<div class='col-12 overflow-visible'>
World<br>World<br>World<br>World<br>World<br>World<br>World<br>
World<br>World<br>World<br>World<br>World<br>World<br>World<br>
World<br>World<br>World<br>World<br>World<br>World<br>World<br>
</div>
</div>
<div class="row border flex-shrink-0">
Footer
</div>
</div>
This is OK, when scrollbar is visible.
But when there is no scrollbar, both columns have 50% height:
html,
body {
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid d-flex flex-column vh-100">
<div class="row border flex-shrink-0">
Header
</div>
<div class="row flex-grow-1 mh-100 overflow-auto">
<div class="col-12 overflow-visible">
Hello
</div>
<div class='col-12 overflow-visible'>
World
</div>
</div>
<div class="row border flex-shrink-0">
Footer
</div>
</div>
How can I set the height of the first column to fit the content when there is no scrollbar?
I don't want to loose the existing functionality.
I know that the columns will fit the content if I remove flex-grow-1 from the row.
The answer is to use #media to add display: block!important to the row on mobile:
Now it works with the scrollbar:
html,
body {
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid d-flex flex-column vh-100">
<div class="row border flex-shrink-0">
Header
</div>
<div class="row d-block flex-grow-1 mh-100 overflow-auto">
<div class="col-12 overflow-visible">
Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
</div>
<div class='col-12 overflow-visible'>
World<br>World<br>World<br>World<br>World<br>World<br>World<br>
World<br>World<br>World<br>World<br>World<br>World<br>World<br>
World<br>World<br>World<br>World<br>World<br>World<br>World<br>
</div>
</div>
<div class="row border flex-shrink-0">
Footer
</div>
</div>
And it works when there is no scrollbar:
html,
body {
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid d-flex flex-column vh-100">
<div class="row border flex-shrink-0">
Header
</div>
<div class="row d-block flex-grow-1 mh-100 overflow-auto">
<div class="col-12 overflow-visible">
Hello
</div>
<div class='col-12 overflow-visible'>
World
</div>
</div>
<div class="row border flex-shrink-0">
Footer
</div>
</div>
I am using twitter bootstrap 4.4.1 and flex to make a layout.
What I want to achieve is to have a navbar at the top and some content in the middle of the screen.
A bit like this:
I am using the following code (also jsfiddle here jsfiddle):
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-light bg-light">
<div class="col-md-12 d-flex align-items-start justify-content-end">
<button class="btn btn-warning btn-large">Large</button>
</div>
</nav>
<div class="row d-flex align-self-center">
<div class="col-12 mx-auto">
<div class="jumbotron text-center">
Some text
</div>
</div>
</div>
</div>
I tried a lot of things, but I just can't manage to get the text block centered on screen.
I am new to the layout/grid/flex system but it proves to be really difficult.
Any help is greatly appreciated!
I have added class h-100 to make contianer of full height.
<div class="container h-100">
You'll also need ensure any parent(s) are also 100% height (or have a defined height)...
html,body {
height: 100%;
}
Use align-items-center instead align-self-center
<div class="row d-flex align-items-center h-100 m-auto">
You can see the changes here as well JSFiddle Code
html, body {
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid h-100">
<nav class="navbar navbar-light bg-light">
<div class="col-md-12 d-flex align-items-start justify-content-end">
<button class="btn btn-warning btn-large">Large</button>
</div>
</nav>
<div class="row d-flex align-items-center h-100 m-auto">
<div class="col-12 mx-auto">
<div class="jumbotron text-center">
Some text
</div>
</div>
</div>
</div>
I'm very new to frontend - HTML, CSS and bootstrap. I basically want to do a comparison page, where users can enter search terms and the table below will display the information pulled from a database. Currently, when I tried to place the 2 tables and input containers side by side, they overlap and are way too close to each other.
So my question is - what is the best way to style these containers so that they look like the wireframe below?
Thank you!
This is what my page looks now:
Use bootstrap row and column approach
as it will make them responsive too
Example
<div class="row">
<div class="col-md-6"> Your First Box </div>
<div class="col-md-6"> Your Second Box </div>
</div>
What this will do is it will create a row in which two columns of 50% width will take place
HTML:
<div class="row">
<div class="column"></div>
<div class="column"></div>
</div>
CSS:
.row {
display: flex;
}
.column {
flex: 50%;
}
I create an example with bootstrap 5
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<div class="d-flex justify-content-center align-items-start">
<div style="width:500px" class="pt-3 px-3">
<input type="text" class="form-control" placeholder="search">
<div class="results rounded border mt-3">
<div class="item d-flex justify-content-center align-items-center border-bottom flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
<div class="item d-flex justify-content-center align-items-center border-bottom flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
<div class="item d-flex justify-content-center align-items-center flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
</div>
</div>
<div style="width:500px" class="pt-3 px-3">
<input type="text" class="form-control" placeholder="search">
<div class="results rounded border mt-3">
<div class="item d-flex justify-content-center align-items-center border-bottom flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
<div class="item d-flex justify-content-center align-items-center border-bottom flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
<div class="item d-flex justify-content-center align-items-center flex-column py-3">
<span class="text-secondary">filter1</span>
<h3 class="fw-bold">RESULT 1</h3>
</div>
</div>
</div>
</div>
I have made an simple example of your case here with Bootstrap row and col. Hope it was to any help.
If you want to read more how the grid works in Bootstrap: Boostrap grid
.box {
border: 2px solid gray;
width: 300px;
height: 300px;
margin: 30px;
border-radius: 25px;
}
.input-field{
margin: 30px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="row">
<input class="col input-field"/>
<input class="col input-field"/>
</div>
<div class="row">
<div class="col box"></div>
<div class="col box"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
I'm struggling to make the a row stretch to fill the rest of the available height. I tried adding h-100 to the row class but that causes a white space at the bottom of the screen. There must be a way to do it but I'm totally stumped.. Here is my code:
<div class="container-fluid h-100">
<div class="row justify-content-center h-100">
<div class="col-4 bg-red">
<div class="h-100">
<div class="row justify-content-center bg-purple">
<div class="text-white">
<div style="height:200px">ROW 1</div>
</div>
</div>
<div class="row justify-content-center bg-blue">
<div class="text-white">ROW 2</div>
</div>
</div>
</div>
<div class="col-8 bg-gray"></div>
</div>
</div>
codepen: https://codepen.io/ee92/pen/zjpjXW/?editors=1100
I'd like to make the the blue row (ROW 2) fill all the red space. Any suggestions?
Thanks
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>
Update 4.3.1: Another example using the vh-100 utility class
https://codeply.com/go/h3bZbM6eSS
.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">
<div class="row justify-content-center min-vh-100">
<div class="col-4 bg-red">
<div class="d-flex flex-column h-100">
<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>
Related: How to make the row stretch remaining height
This is a solution. The wrapper div has to have h-100, the div that adapts to height has to have flex-grow-1 and overflow-auto. This way, the div will grow to fill the space when its content is minor than the available space and will show the scrollbar when its content is higher than the available space.
Demo jsfiddle
<div class="h-100 d-flex flex-column bg-yellow px-2">
<div class="flex-column justify-content-center bg-purple px-2">
<div class="text-white p-0" style="height:50px">HEADER</div>
</div>
<div class="flex-column justify-content-center bg-red text-white px-2 flex-grow-1 overflow-auto">
<div>Item1</div>
<div>Item2</div>
INNER text 1<br>
INNER text 2<br>
</div>
<div class="flex-column justify-content-center bg-darkblue px-2">
<div class="text-white p-0" style="height:50px">FOOTER</div>
</div>
If anyone has tired of getting this to work, here is a super easy solution which will work in most scenarios. Just add the below class to the div for which you are trying to fill the remaining height:
Please note that 100vh is 100% of visible height and 200px is the total fixed height of the remainging divs above.
.fillRemaining {
height: calc(100vh - 200px);
}
I want to create a layout like this Layout Concept with Bootstrap.
I try the following
<div class="h-100">
<div class="bg-dark text-light d-flex flex-column">Header</div>
<div class="d-flex flex-column flex-grow">
<div class="bg-danger text-light w-25">Sidebar</div>
<div class="w-75">Content</div>
</div>
<div class="bg-dark text-light d-flex flex-column">Footer</div>
</div>
Codepen
The layout didn't get the full height even if html and body tags have height property 100%.
It's getting full height but the inner elements aren't. You may adjust classes like this:
html, body {
height: 100%;
width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="h-100 d-flex flex-column">
<div class="bg-dark text-light p-3">Header</div>
<div class="d-flex flex-grow-1">
<div class="bg-danger text-light w-25">Sidebar</div>
<div class="w-75">Content</div>
</div>
<div class="bg-dark text-light p-3">Footer</div>
</div>