Home > Web Front-end > CSS Tutorial > How to Use More Than 12 Columns in a Bootstrap 3 Row?

How to Use More Than 12 Columns in a Bootstrap 3 Row?

Mary-Kate Olsen
Release: 2024-11-02 06:28:30
Original
650 people have browsed it

How to Use More Than 12 Columns in a Bootstrap 3 Row?

Bootstrap 3 - Using More than 12 Columns in a Row

Overriding Float Behavior for Excessive Columns

In Bootstrap 3, a .row div typically contains 12 columns, and additional columns are not floated by default. This can cause wider columns to overlap smaller ones.

To address this, a custom class can be used to override the float behavior of excessive columns:

<code class="css">/* col-xs float fix for large column groups */
.large-group .col-xs-12 {
    float: left;    
}

/* col-sm float fix for large column groups */    
@media (min-width: 768px) {    
    .large-group .col-sm-12 {    
        float: left;    
    }    
}

/* col-md float fix for large column groups */    
@media (min-width: 992px) {    
    .large-group .col-md-12 {    
        float: left;    
    }    
}

/* col-lg float fix for large column groups */    
@media (min-width: 1200px) {
    .large-group .col-lg-12 {    
        float: left;    
    }    
}</code>
Copy after login

Why Use More than 12 Columns?

Initially, using more than 12 columns in a row may seem counterintuitive, but it actually serves a purpose in maintaining responsiveness. The Bootstrap documentation states:

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line."

For example, having 24 columns in a single row would result in two rows of 12 columns each when the screen size is reduced.

Example Usage

Here's an example showing how to use the custom class:

<code class="html"><div class="container">
    <div class="row large-group" style="background-color:#ebebeb;">    
        <div class="col-xs-9"><div style="background-color:#babeee;"><p>col 9</p></div></div>    
        <div class="col-xs-3"><div style="background-color:#fefeeb;"><p>col 3</p></div></div>    
        <div class="col-xs-12"><div style="background-color:#bada55;"><p>col 12</p></div></div>    
    </div>    
</div></code>
Copy after login

The above is the detailed content of How to Use More Than 12 Columns in a Bootstrap 3 Row?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template