How to Remove Excess Padding in Bootstrap 3 Columns?

Removing Padding from Bootstrap 3 Columns

Problem:

In Bootstrap 3, there is excessive padding or margin on the right and left sides of col-md-* classes. The goal is to remove this extra space.

HTML Code:

<div class="col-md-12">
    <h2>OntoExplorer.<span>

Desired Output:

Remove the extra padding or margin on the sides of the two columns without disabling the col-md-* class.

Solution:

Typically, .row is used to wrap columns instead of .col-md-12. .Row does not have the additional margins and padding that .col-md-12 has and also eliminates the space that a column would introduce with negative left and right margins.

Updated HTML Code:

<div class="container">
    <div class="row">
        <h2>OntoExplorer.<span>

Custom CSS:

To eliminate the padding or margins entirely, a custom CSS class called .nopadding can be added to remove these properties:

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

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