Spacing & Sizing Columns Using Bootstrap 4

I'm working on a project and I'm having some trouble getting everything to line up correctly with the right spacing. What should I do (using the col class and bootstrap 4 exclusive

Solution 1:

Columns have padding to create the gutter (spacing between columns). Therefore, the background colors will blends together unless you put the background on the contents of the columns. Also, use col-md-6 not col-md-5...

<sectionclass="row"><divclass="col-12 mb-3"><divclass="bg-info"style="height: 175px;"></div></div><!-- one --><divclass="col-12 col-md-6 mb-3"><divclass="bg-info"style="height: 100px;"></div></div><!-- two --><divclass="col-12 col-md-6 mb-md-4 mb-3"><divclass="bg-info"style="height: 100px;"></div></div><!-- three --><divclass="col-12 col-md-6 mb-3"><divclass="bg-info"style="height: 100px;"></div></div><!-- four --><divclass="col-12 col-md-6 mb-3"><divclass="bg-info"style="height: 100px;"></div></div></section>

https://www.codeply.com/p/QTN0GCfLbc