How to Create Full-Height Columns in Bootstrap 3 using Custom CSS?

Bootstrap 3 Full-Height Columns: A Custom CSS Solution

Introduction:

Creating full-height layouts with Twitter Bootstrap 3 can be challenging. While Bootstrap's native classes do not support this feature, it is possible to achieve this effect using custom CSS.

Custom CSS Approach:

1. Setting 100% Height:
   Set the height of the body, container, and row elements to 100% to ensure that they span the full height of the viewport.
2. Displaying as a Table:
   Convert the container element into a table using display: table. This allows the contents of the container to be arranged in a tabular structure.
3. Floating Cell:
   Add a custom class, such as no-float, to the navigation column. Set this class to have display: table-cell and float: none. This will prevent the navigation column from floating and allow it to vertically align with the content column.

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>

CSS:

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; 
}
.row {
    height: 100%;
    display: table-row;
}
.row .no-float {
    display: table-cell;
    float: none;
}

Advantages and Considerations:

• This custom CSS solution provides a full-height layout that is compatible with Bootstrap 3.
• The 1:3 ratio of navigation to content can be adjusted by modifying the column widths in the CSS.
• However, it's important to use the custom class (e.g., no-float) instead of modifying Bootstrap's native column classes to avoid conflict.

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