How to Add Margin/Padding Between Bootstrap Columns Without Breaking the Layout?

How to Add Margin/Padding Space Between Columns in Bootstrap?

When designing a website using Bootstrap, it's common to need to add extra margin or padding space between columns. While attempting to achieve this, some users have come across unsatisfactory results.

One popular method is to modify the column classes to col-md-5 with pull-left or pull-right. However, this approach can create gaps that are too large.

A more effective solution is to nest a div within the original col-md-6 class. This div can then be styled with the desired margin and padding.

Here's an example:

<code class="html"><div class="row">
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 2</div>
    </div>
</div></code>

<code class="css">.classWithPad {
    margin: 10px;
    padding: 10px;
}</code>

By using this method, you can easily add the desired margin and padding space between the columns without compromising the column layout. This technique provides flexibility and allows for precise control over the spacing between elements.

The above is the detailed content of How to Add Margin/Padding Between Bootstrap Columns Without Breaking the Layout?. For more information, please follow other related articles on the PHP Chinese website!