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

Bootstrap 3 Full-Height Two-Column Layout

Problem:

Creating a two-column layout with full height in Bootstrap 3 poses a challenge due to the lack of native support for this particular layout.

Solution:

While Bootstrap 3 classes alone cannot achieve this, we can utilize CSS to implement a custom full-height column solution using CSS tables.

HTML:

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

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0;
    box-sizing: border-box;
}

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

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

Explanation:

This solution utilizes CSS tables to achieve the full-height effect. The .container element is set to display: table, and the .row element to display: table-row. The column elements (.col-md-3 and .col-md-9) are set to display: table-cell and float: none, which removes the default float behavior.

Responsive Adjustments

To ensure responsive behavior, you can modify the CSS for specific breakpoints. For example, you could use a media query to only apply the table display properties for medium screen widths and above.

Custom Class:

To avoid modifying native Bootstrap column classes, we use a custom class (no-float) in the markup and only apply the CSS table styles to that class.

Considerations:

• The 1:3 ratio is hardcoded in the CSS. For other ratios, you need to adjust the padding.
• For full-height columns on all screen sizes, remove the Bootstrap column classes from the markup.

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