How to Create Full-Height Two-Column Layouts in Bootstrap 3?

Bootstrap 3 Two Columns Full Height: A Comprehensive Guide

Introduction
Achieving a full-height column layout in Bootstrap 3 can be a challenge, as native classes do not support this functionality. This article explores a solution that utilizes custom CSS to create full-height columns with a 1:3 ratio, satisfying the need for a layout where both columns extend the full height of the viewport.

HTML Markup
The HTML structure for this layout consists of a header, a container, a row, and two columns.

<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>

CSS Styles
To achieve the full-height columns, we incorporate custom CSS that utilizes the display: table; property to create a css table, ensuring both columns extend the full height of the viewport.

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;
}

Explanation
The CSS styles define the following:

• html, body, and .container are set to height: 100%; to ensure the content fills the entire viewport.
• .container is configured with display: table; to create a css table.
• .row sets the display property to table-row to create a row within the css table.
• .row .no-float sets display: table-cell to make the columns behave like table cells within the row.
• float: none overrides Bootstrap's default floating behavior for the columns.

Customization

• Edit the margin-top value on .container to adjust the header's top margin.
• Modify the padding values on .container to set the left/right spacing of the columns.
• Remove the col-md-* classes from the columns to create a fixed 1:3 ratio across all screen widths.

The above is the detailed content of How to Create Full-Height Two-Column Layouts in Bootstrap 3?. For more information, please follow other related articles on the PHP Chinese website!