How to Remove Unwanted Padding and Margin from Bootstrap 3 Columns?

Removing Padding from Columns in Bootstrap 3

When using Bootstrap 3's grid system, it's common to encounter extra padding or margin around columns. Here's how to remove it:

In your code:

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

You've wrapped two columns (col-md-4 and col-md-8) inside a col-md-12 column. By default, a col-md-12 occupies the entire row, including the margins and padding, and thus introduces unwanted extra space.

To fix this, use .row instead of .col-md-12 as the parent container. This will ensure that the two columns are rendered side-by-side without any unnecessary padding or margin:

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

If you still want to remove the padding or margin from individual columns, you can add a custom CSS class like this:

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

Then, apply this class to the columns you want to remove the padding or margin from:

<div class="col-md-4 nopadding">

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