Given this layout example:
https://www.codeply.com/go/Xw4cYl3kwu
The "HEADER" column is fixed-height. All the other columns have variable content with variable height depending on the page shown.
How can I make the "MENU" and "CONTENT" columns stretch down to the "FOOTER"?
Well if you can use flexbox then this could be a solution:
<div class="container-fluid">
<div class="row" >
<div class="col-9 bg-danger" style="display:flex;flex-direction: column">
<div class="row" style="height: 3rem">
<div class="col-12" >
<h1 class="text-center">HEADER</h1>
</div>
</div>
<div class="row" style="flex-grow:1">
<div class="col-3 bg-success">MENU</div>
<div class="col-9 bg-warning">CONTENT</div>
</div>
</div>
<div class="col-3 bg-info">
<p>SIDEBAR</p>
<p>SIDEBAR</p>
<p>SIDEBAR</p>
<p>SIDEBAR</p>
</div>
</div>
<div class="row bg-primary">
<div class="col-12">
<div class="text-center">FOOTER</div>
</div>
</div>
</div>
Related
I have following:
<div class="container-fluid" id="contact">
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div>
<img src="icon-mail.png" style="padding-right:20px;">
</div>
<div>
<h4>E-mail</h4>
<p>gmail#gmail.sk</p>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center">
<div>
<img src="icon-tel.png" style="padding-right:20px;">
</div>
<div>
<h4>Call us</h4>
<p>+00000000000</p>
</div>
</div>
</div>
</div>
This is view with screen size >992:
This is view with screen <992:
How can I display elements below each other as is viewed in image2 ? I do not know why, but "display:block" is not working.
You can use
<div class="row">
to create separate rows of content satisfying your needs.
I recommend to read about grid system in this article:
https://getbootstrap.com/docs/4.0/layout/grid/
<div class="container-fluid" id="contact">
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div>
<img src="icon-mail.png" style="padding-right:20px;">
</div>
<div>
<h4>E-mail</h4>
<p>gmail#gmail.sk</p>
</div>
</div>
</div>
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div>
<img src="icon-tel.png" style="padding-right:20px;">
</div>
<div>
<h4>Call us</h4>
<p>+00000000000</p>
</div>
</div>
</div>
</div>
In bootstrap 5 there is an option named order. So in your question, You can add a class named order-md-2 to things that you want to shift down and order-md-1 to things that you want to shift up.
<div class="container-fluid" id="contact">
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div class="order-md-1">
<img src="icon-mail.png" style="padding-right:20px;">
</div>
<div>
<h4>E-mail</h4>
<p>gmail#gmail.sk</p>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center">
<div class="order-md-2">
<img src="icon-tel.png" style="padding-right:20px;">
</div>
<div>
<h4>Call us</h4>
<p>+00000000000</p>
</div>
</div>
</div>
</div>
Hope my answer helps you
you could simply use the flex-direction of the flexbox.
<div class="container-fluid" id="contact">
<div class="row justify-content-center" align="center">
<div class="col-lg-6 d-flex justify-content-center">
<div class="order-md-1">
<img src="icon-mail.png" style="padding-right:20px;">
</div>
<div class='contacts'>
<div class='mail'>
<h4>E-mail</h4>
<p>gmail#gmail.sk</p>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center">
<div class="order-md-2">
<img src="icon-tel.png" style="padding-right:20px;">
</div>
<div class='phone'>
<h4>Call us</h4>
<p>+00000000000</p>
</div>
</div>
</div>
</div>
</div>
Inside CSS:
.contacts {
display: flex;
flex-direction: column;
}
This should allow you to orient both of your div-containers to be underneath each other.
Maybe I am blind, but my Bootstrap Grid is not behaving as expected.
Shouldn't it fill the whole row? Image of possily wrong behavior
<div class="container min-vh-100 pt-5">
<h5 class="text-white mt-2">{{event?.teamA?.name}} vs. {{event?.teamB?.name}}</h5>
<div class="row py-0">
<div class="col-4 row bg-info" style="max-height: 60vh;">
<div class="col-12 row" style="max-height: 15vh;">
<div class="col-8 bg-danger row">
<div class="col-5 text-right"><h5>0</h5>Heim</div>
<div class="col-1 text-center"><h5>:</h5></div>
<div class="col-5 text-left"><h5>0</h5>Gast</div>
<div class="col-1"></div>
<div class="col-12"><p class="text-sm-center">Spielstand</p></div>
</div>
<div class="col-4 bg-success row">
<div class="col-6 text-right">0<br>Heim</div>
<div class="col-6 text-center">0<br>Gast</div>
<div class="col-12 text-left"><p class="text-sm-center">Teamfouls</p></div>
</div>
</div>
</div>
</div>
You must remember that "row" class has set default properties:
margin-right: -15px;
margin-left: -15px;
And "col-anything" classes have set default properties:
padding-right: 15px;
padding-left: 15px;
That's why your idea don't work as you expected.
Bootstrap 5 (update 2021)
The Bootstrap 5 grid still uses flexbox so nesting the grid row/col still works the same way...
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col-4">
</div>
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
</div>
</div>
</div>
Bootstrap 4 (original answer)
Don't use col and row together in the same div. Instead follow the Bootstrap grid rules...
"In a grid layout, content must be placed within columns and only
columns may be immediate children of rows."
<div class="row py-0">
<div class="col-4 bg-info" style="max-height: 60vh;">
<div class="row" style="max-height: 15vh;">
<div class="col-8 bg-danger">
<div class="row">
<div class="col-5 text-right">
<h5>0</h5>Heim
</div>
<div class="col-1 text-center">
<h5>:</h5>
</div>
<div class="col-5 text-left">
<h5>0</h5>Gast
</div>
<div class="col-1"></div>
<div class="col-12">
<p class="text-sm-center">Spielstand</p>
</div>
</div>
</div>
<div class="col-4 bg-success">
<div class="row">
<div class="col-6 text-right">0<br>Heim</div>
<div class="col-6 text-center">0<br>Gast</div>
<div class="col-12 text-left">
<p class="text-sm-center">Teamfouls</p>
</div>
</div>
</div>
</div>
</div>
</div>
https://codeply.com/p/mKFXWjc39k
I can do this layout in normal CSS using flex and grid, But I need to know how to do this using bootstrap 4, There is nothing left to try .
<div class="row">
<div class="col-sm-3 bg-success" style="height:500px">d</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6 bg-primary" style="height:250px">d</div>
<div class="col-sm-6 bg-info" style="height:500px">d</div>
</div>
<div class="row">
<div class="col-sm-6 bg-info" style="height:250px">z</div>
</div>
</div>
This is what I need to get
The layout is three columns with the center column having 2 rows.
Try this:
<div class="row">
<div class="col-sm bg-success" style="height:500px">d</div>
<div class="col-sm">
<div class="row">
<div class="col-sm-12 bg-primary" style="height:250px">d</div>
</div>
<div class="row">
<div class="col-sm-12 bg-info" style="height:250px">z</div>
</div>
</div>
<div class="col-sm bg-info" style="height:500px">d</div>
</div>
Try this code, Hope it will help you.
<div class="row">
<div class="col-md-3" style="height:100px; background-color:black">d</div>
<div class="col-md-6 ">
<div class="col-auto p-2 bg-primary" style="height:100px;">a</div>
<div class="box mx-auto bg-info" style="height:100px;">b</div>
</div>
<div class="col-md-3 bg-info" style="height:100px">z</div>
</div>
I divided the one row into 3 columns, both side boxes has a size of 3 and mid box have a size of 6 then check the class col-auto-p2 & box mx-auto.
Please try this one with Bootstrap 4
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="bg-success" style="height:500px">
</div>
</div>
<div class="col-md-6">
<div class="row h-100">
<div class="col-12 h-50" style="padding-bottom: 10%;">
<div class="bg-info h-100">
</div>
</div>
<div class="col-12 h-50" style="padding-top: 10%;">
<div class="bg-info h-100">
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="bg-success" style="height:500px">
</div>
</div>
</div>
</div>
You can change the padding on inner columns. Don't forget to put row inside a container or container-fluid as described here
https://getbootstrap.com/docs/4.2/layout/grid/
Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.
Please check the working snippet will help you
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-4 bg-success" style="height:500px">d</div>
<div class="col-sm-4" style="height:500px">
<div class="row" style="position:relative;height:500px;">
<div class="col-sm-12 bg-primary" style="height:200px">d</div>
<div class="col-sm-12 bg-warning" style="height:200px;position:absolute; bottom:0;">d</div>
</div>
</div>
<div class="col-sm-4 bg-info" style="height:500px">z</div>
</div>
I wanted to create 5 equal column on bootstrap for my responsive design with container-fluid. I have managed to do it. But I need one of those columns to disappear on lower resolutions. (Which I have already did as well) So on the mobile view I want to separate those 4 columns into two rows equally. However, my current code is failing to do it so. It gets separated into 2 rows but on the first row there are 3 equal column and on the second row there is only one column which is equal to those 3.
This is my current Bootstrap code;
<div class="container-fluid content">
<div class="row">
<div class="col col-xs-6">
<div class="stats">
<div class="big">111</div>
<div class="small">COLUMN 1</div>
</div>
</div>
<div class="col col-xs-6">
<div class="stats">
<div class="big">222</div>
<div class="small">COLUMN 2</div>
</div>
</div>
<div class="col d-none d-md-block">
<div class="stats">
<div class="big">333</div>
<div class="small">COLUMN 3 (DISAPPEARS ON LOW RES)</div>
</div>
</div>
<div class="col col-xs-6">
<div class="stats">
<div class="big">444</div>
<div class="small">COLUMN 4</div>
</div>
</div>
<div class="col col-xs-6">
<div class="stats">
<div class="big">555</div>
<div class="small">COLUMN 5</div>
</div>
</div>
</div>
</div>
What am I missing? Thanks.
col-xs-*- no longer exists in Bootstrap 4 beta. Use col-sm for equal width columns on sm and up, and col-6 for 50% width columns on mobile (xs)
https://www.codeply.com/go/W46IKaZhdR
<div class="container-fluid content">
<div class="row">
<div class="col-sm col-6">
<div class="stats">
<div class="big">111</div>
<div class="small">COLUMN 1</div>
</div>
</div>
<div class="col-sm col-6">
<div class="stats">
<div class="big">222</div>
<div class="small">COLUMN 2</div>
</div>
</div>
<div class="col d-none d-md-block">
<div class="stats">
<div class="big">333</div>
<div class="small">COLUMN 3 (DISAPPEARS ON LOW RES)</div>
</div>
</div>
<div class="col-sm col-6">
<div class="stats">
<div class="big">444</div>
<div class="small">COLUMN 4</div>
</div>
</div>
<div class="col-sm col-6">
<div class="stats">
<div class="big">555</div>
<div class="small">COLUMN 5</div>
</div>
</div>
</div>
</div>
I am using 3 columns inside a nested row.
instead of stacking horizontally columns are stacking vertically.
this is my code.
i have tried stackoverflow answers but not working.
<div class="jumbotron mainBar">
<div class="container mainBarContainer">
<div class="row">
<div class="col-xs-2">
<div class=" profilePic">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div class="col-xs-4">
<h1>Hello, world!</h1>
</div>
<div class="col-xs-6 container">
<div class="row">
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and here is the fiddle
fiidle
You have a spieling mistake. Change the clas to class which is inside second container.
The demo