How Can I Add Extra Space Between Bootstrap Grid Columns?

Creating Extra Space Between Grid Columns with Bootstrap

Adding additional margin and padding space between columns in a Bootstrap grid layout can enhance the visual appeal of your website. While using pull-left and pull-right with modified col-md-5 classes may be an option, it can result in excessive gaps.

A more elegant solution is to create a nested div within each column and apply the desired padding to it. This approach preserves the column structure while allowing for additional space.

Code Implementation

Consider the following amended HTML code:

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

CSS Styles

To apply the desired margin and padding, add the following CSS:

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

By implementing this method, you can effectively add extra space between your grid columns while maintaining the integrity of your layout.

The above is the detailed content of How Can I Add Extra Space Between Bootstrap Grid Columns?. For more information, please follow other related articles on the PHP Chinese website!