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>
Related
I am working on writing the html for the above image with responsiveness. Below is my code for the design so far
HTML:
<div class="container-fluid">
<div
class="row low-height box border bg-light justify-content-start align-content-start overflow-box"
>
<div class="col-1 border bg-primary small-box m-2"></div>
<div class="col-1 border bg-primary small-box m-2"></div>
</div>
<div
class="row low-height box border bg-light justify-content-end align-content-end"
>
<div class="col-1 border small-box bg-success m-1"></div>
</div>
<div
class="row low-height box border bg-light justify-content-center align-content-center"
>
<div class="col-lg-12 text-center"><h4>Title</h4></div>
</div>
</div>
CSS:
.box {
height: 200px;
margin-bottom: 10px;
}
.small-box {
height: 100px;
}
.overflow-box {
overflow: auto;
}
Problem:
For the browser height lower than 600px, the 3 main sections should become horizontally arranged as shown in the below image.
This is the part I am unable to solve and cant find anything on the bootstrap site as well. May be I am doing something wrong fundamentally. Please help.
You can add a media query in your css,
#media(max-height:600px) {
//here you can write your custom css for that condition
//in this case,
[class*="col"]{
width:33%!important;
}
}
Here's an example
#media(max-height:600px) {
[class*="col"]{
width:33%!important;
}
}
.box {
text-align:center;
padding:5rem;
background-color: #22ccff;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="px-lg-12 px-md-12 px-sm-12">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 mb-4">
<div class="box">Box-1
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 mb-4">
<div class="box">Box-2
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 mb-4">
<div class="box">Box-3
</div>
</div>
</div>
</div>
</div>
Instead of putting each of the three grey boxes in its own row, they should be cols within a responsive Boostrap grid.
I've updated your code to put each of those grey boxes in a <div class="col-4 col-sm-12" ...> to make them format to 3 columns on XS screens, and 1 column on all larger size screens per your request. (Although that's backwards from how responsive sites usually work: usually on the smallest screen size the grid collapses to one column, and on larger sizes the grid expands to more columns.)
.box {
height: 200px;
margin-bottom: 10px;
}
.small-box {
height: 100px;
}
.overflow-box {
overflow: auto;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-4 col-sm-12 low-height box border bg-light justify-content-start align-content-start overflow-box">
<div class="row">
<div class="col-1 border bg-primary small-box m-2"></div>
<div class="col-1 border bg-primary small-box m-2"></div>
</div>
</div>
<div class="col-4 col-sm-12 low-height box border bg-light">
<div class="row justify-content-end align-content-end">
<div class="col-1 border small-box bg-success m-1"></div>
</div>
</div>
<div class="col-4 col-sm-12 low-height box border bg-light justify-content-center align-content-center">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Title</h4>
</div>
</div>
</div>
</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 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?
I use bootstrap4 and I want to have a big card inside it, i want to put in each row 5 others cards like this screen.
This is my code
<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="card w-100 mb-2">
<div class="card-body">
<h5 class="card-title">Available products</h5>
<div class="row" style="display: flex; flex-direction: row;">
<div class="card mr-2 w-25 mb-2">
<div class="card-header">34 products</div>
<div class="mycard-footer">List of products</div>
</div>
<div class="card mr-2 w-25 mb-2">
<div class="card-header">34 products</div>
<div class="mycard-footer">List of products</div>
</div>
<div class="card mr-2 w-25 mb-2">
<div class="card-header">34 products</div>
<div class="mycard-footer">List of products</div>
</div>
</div>
Button
</div>
</div>
but i can't do it, any idea ?
The width utilities of the cards that are inside are relative to the parent. Here is the bootstrap Doc for sizing utilities https://getbootstrap.com/docs/4.0/utilities/sizing/
There is no possible way to fit 5 cards in 1 row. Unless you add your personal styling in CSS and not use the sizing utilities.
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);
}