How to Eliminate Extra Padding in Bootstrap 3 Columns?

How to Remove Padding in Bootstrap 3

The issue at hand involves removing the right and left padding of col-md-* columns in Bootstrap 3. The provided HTML code contains two nested columns, but the result includes additional spacing on the sides of the columns.

Desired Output

The goal is to eliminate the extra space and have the columns positioned next to each other.

Solution

The problem arises from using .col-md-12 as the parent container for the columns. .col-md-12 is essentially a column, not a row, and thus inherits its own margins and padding. To fix this, it is essential to wrap the columns within a .row class, as seen below:

<div class="container">
    <div class="row">
        <h2>

Additional Options

If the desired result is to eliminate all margins and padding, add a class to overwrite these styles for the child columns:

.nopadding {
padding: 0 !important;
margin: 0 !important;
}

The above is the detailed content of How to Eliminate Extra Padding in Bootstrap 3 Columns?. For more information, please follow other related articles on the PHP Chinese website!