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:

    

        
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;
}