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

Achieving Full-Height Two-Column Layouts in Bootstrap 3

Bootstrap 3 lacks native support for full-height column layouts. However, by employing custom CSS and leveraging CSS tables, we can replicate this functionality.

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;
    box-sizing: border-box;
}

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

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

Explanation

This code achieves full-height columns and a 1:3 ratio (Navigation:Content) for medium screen widths and above. A custom CSS class (no-float) is utilized to prevent columns from floating and ensure they are displayed as table cells.

Considerations

• Bootstrap's native column classes (col-md-3, col-md-9) are used for responsiveness.
• For smaller screens (below medium), columns revert to their default bootstrap behavior (each column occupying 100% width).
• If a 1:3 ratio is required for all screen widths, bootstrap's column classes can be removed from the markup.

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