How to Remove Padding and Margin from Bootstrap 3 Columns?

How to remove padding from Bootstrap 3 columns

In Bootstrap 3, using col-md-* classes adds padding and margin to the right and left of columns. To remove this padding and margin, follow these steps:

Use .row instead of .col-md-12

Wrap your columns in a .row container instead of a .col-md-12 container. .row does not have the extra margins and padding that .col-md-12 has.

<div class="container">
    <div class="row">
        <div class="col-md-4">...</div>
        <div class="col-md-8">...</div>
    </div>
</div>

Add a custom class to remove padding and margin

If you want to remove the padding and margin only for specific columns, add a custom class to those columns.

<div class="container">
    <div class="row">
        <div class="col-md-4 nopadding">...</div>
        <div class="col-md-8 nopadding">...</div>
    </div>
</div>

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

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