How to Remove Padding from Bootstrap 3 Columns?

Remove Padding from Column Elements in Bootstrap 3

Problem:

In Bootstrap 3, you want to eliminate the padding or margin around the col-md-* elements to ensure they fit seamlessly without any extra space on either side.

HTML Code:

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

Solution 1: Use Rows to Wrap Columns

Typically, you should use .row to surround multiple columns instead of nesting them within a single .col-md-12. By using .row, you avoid the unnecessary margins and padding introduced by a nested column.

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

Solution 2: Add Custom Styling

If the first solution does not suffice, you can create a custom class to remove the padding and margins explicitly.

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

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

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

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