How to Add Spacing Between Columns in Bootstrap Grid Layout?

Spacing Columns in Bootstrap Grid Layout

Adding margin or padding to create space between columns in Bootstrap can be tricky. To achieve this without affecting column alignment, follow these steps:

Create an Inner Div Within the Column

Create a div within the col-md-6 element and apply the desired margin and padding to it. This div will act as the spine of the column while providing the necessary spacing.

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

Add Custom Styling

In your CSS, apply the desired margin and padding to the inner div.

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

This approach allows you to easily adjust the spacing between columns without compromising the integrity of the Bootstrap grid layout.

The above is the detailed content of How to Add Spacing Between Columns in Bootstrap Grid Layout?. For more information, please follow other related articles on the PHP Chinese website!