"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > How to Create Full-Height Columns in Bootstrap 3 using Custom CSS?

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

Published on 2024-12-23
Browse:754

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

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.
Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3