Bootstrap 3 Two Columns Full Height

Bootstrap 3 two columns full height

Edit:
In Bootstrap 4, native classes can produce full-height columns (DEMO) because they changed their grid system to flexbox. (Read on for Bootstrap 3)


The native Bootstrap 3.0 classes don't support the layout that you describe, however, we can integrate some custom CSS which make use of css tables to achieve this.

Bootply demo / Codepen

Markup:

<header>Header</header>
<div class="container">
<div class="row">
<div class="col-md-3 no-float">Navigation</div>
<div class="col-md-9 no-float">Content</div>
</div>
</div>

(Relevant) CSS

html,body,.container {
height:100%;
}
.container {
display:table;
width: 100%;
margin-top: -50px;
padding: 50px 0 0 0; /*set left/right padding according to needs*/
box-sizing: border-box;
}

.row {
height: 100%;
display: table-row;
}

.row .no-float {
display: table-cell;
float: none;
}

The above code will achieve full-height columns (due to the custom css-table properties which we added) and with ratio 1:3 (Navigation:Content) for medium screen widths and above - (due to bootstrap's default classes: col-md-3 and col-md-9)

NB:

1) In order not to mess up bootstrap's native column classes we add another class like no-float in the markup and only set display:table-cell and float:none on this class (as apposed to the column classes themselves).

2) If we only want to use the css-table code for a specific break-point (say medium screen widths and above) but for mobile screens we want to default back to the usual bootstrap behavior than we can wrap our custom CSS within a media query, say:

@media (min-width: 992px) {
.row .no-float {
display: table-cell;
float: none;
}
}

Codepen demo

Now, for smaller screens, the columns will behave like default bootstrap columns (each getting full width).

3) If the 1:3 ratio is necessary for all screen widths - then it's probably a better to remove bootstrap's col-md-* classes from the markup because that's not how they are meant to be used.

Codepen demo

How can I make Bootstrap columns all the same height?

LATEST SOLUTION (2022)

Solution 4 using Bootstrap 4 or 5

Bootstrap 4 and 5 use Flexbox by default, so there is no need for extra CSS.

Demo

<div class="container">
<div class="row ">
<div class="col-md-4" style="background-color: red">
some content
</div>
<div class="col-md-4" style="background-color: yellow">
catz
<img width="100" height="100" src="https://placekitten.com/100/100/">
</div>
<div class="col-md-4" style="background-color: green">
some more content
</div>
</div>
</div>

Solution 1 using negative margins (doesn't break responsiveness)

Demo

.row{
overflow: hidden;
}

[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

Solution 2 using table

Demo

.row {
display: table;
}

[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}

Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution.

Demo

.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}

Bootstrap: How to make a simple full height layout?

Percentage heights aren't the best option. Instead, make the container a flexbox column (d-flex flex-column) and then use grow (flex-grow-1) on the row that you want to fill the remaining height...

https://codeply.com/go/jCIuhHCvHW

<div class="container-fluid min-vh-100 d-flex flex-column">
<div class="row">
<div class="col">
Top Bar
</div>
</div>
<div class="row flex-grow-1">
<div class="col-md-2 border">
Bottom Left
</div>
<div class="col-md-10 border">
Bottom Right
</div>
</div>
</div>

Also see: How to make the row stretch remaining height

Bootstrap 3 Full width and height layout with 3 Column Flex or Col

For a full height layout, you will need to tell the parent element of the columns to get all the available height of the viewport, this can be done defining the next class:

full-height {
height: 100vh;
}

And assigning this class to the row that wraps the columns. After this, you need to set the height property of the three columns you have to 100% (So they will use 100% height of the parent element).

Now, on small devices (SM), you want the previous layout to change: all the columns will use the 12 available grids of Bootstrap. So, you will have to manage the height of the columns with a media query like the next one (Bootstrap 3 breakpoints are documented here: Bootstrap 3 Media Queries):

@media only screen and (max-width : 992px) {

.leftHalf {
height: 40%;
}

.centerHalf {
height: 20%;
}

.rightHalf {
height: 40%;
}
}

All of the previous explanation is used on the next working example, check it playing with the full screen mode and resizing the browser. It is a homework for you, to correct displaying the layout of the middle navbar. Hope this helps you as the base of the layout you need.

.full-height {  height: 100vh;}
.leftHalf { background-image: url('https://via.placeholder.com/2000/FF0000/FFFFFF/?text=Left'); height: 100%;}
.centerHalf { background-color: black; color: white; text-align: center; height: 100%;}
.rightHalf { background-image: url('https://via.placeholder.com/2000/FFFF00/00000/?text=right'); height: 100%;}
.MainBackgroundImages { background-position: center; background-repeat: no-repeat; background-size: cover;}
/* Custom style for Small Devices, Tablets */@media only screen and (max-width : 992px) {
.leftHalf { height: 40%; }
.centerHalf { height: 20%; }
.rightHalf { height: 40%; }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid"><div class="row full-height">
<div class="col-md-5 MainBackgroundImages leftHalf"></div>
<div class="col-md-2 centerHalf"> <div class="navbar navbar-default" id="custom-bootstrap-menu" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Ishka Sport</a> <button class="navbar-toggle" data-target=".navbar-menubuilder" data-toggle="collapse" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-menubuilder"> <ul class="nav navbar-nav navbar-left"> <li><a href="/">Home</a></li> <li><a href="/products">kayak</a></li> <li><a href="/about-us">Nipper Boards</a></li> <li><a href="/contact">Accessories</a></li> </ul> </div> </div> </div>
<div class="col-md-5 MainBackgroundImages rightHalf"></div>
</div></div>

Bootstrap columns with the same heights

Reading: How can I make Bootstrap columns all the same height?

You can use:

.row{
overflow: hidden;
}

[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

Here's a runnable example:

.row{    overflow: hidden; }
[class*="col-"]{ margin-bottom: -99999px; padding-bottom: 99999px;}
.row1 { height: 100%;}
.col1{ background-color: red; color: white; height: 100%;}
.col2{ background-color: green; color: white; height: 100%;}
.col3{ background-color: yellow; height: 100%;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="container">  <div class="row row1">      <div class="col col1 col-xs-3">          Column 1      </div>      <div class="col col2 col-xs-3">          Column 2       </div>      <div class="col col3 col-xs-3">          <div class="row">              Column 3          </div>          <div class="row">              Column 4          </div>      </div>  </div></div>

Bootstrap 4 Two Columns Full Height

The only thing you need in this case is to add the h-100 class (height:100%) to the row.

Here's the working code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style> .container { background: green; }
.col-md-3 { background: pink; } .col-md-9 { background: yellow; } .col-md-4 { background: red; }</style>
<div class="container"> header <div class="row"> <div class="col-md-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </div> <div class="col-md-9"> <div class="row h-100"> <div class="col-md-4">col2 - 1</div> <div class="col-md-4">col2 - 2</div> <div class="col-md-4">col2 - 3</div> </div> col2 </div> </div></div>

Bootstrap nested col wont stretch full height

You can use Bootstrap's FlexBox Utilities for this.

  1. Give the .row under .col.mx-5 these classes: row flex-row h-100.
  2. Give the .col-12, which is supposed to be small, flex-shrink-1 class.
  3. Give the .col-12, which is supposed to be longer, h-100 flex-grow-1 class.

Full Code:

<div class="col mx-5 px-5">
<div class="row flex-row h-100">
<div class="col-12 flex-shrink-1">
<img src="/imgs/2.jpg" alt="" />
</div>
<div class="col-12 bg-light flex-grow-1 h-100">
<p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
</div>
</div>
</div>

I have checked it and it works.



Related Topics



Leave a reply



Submit