1

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 exclusively, no CSS) to get this to work?

Ive tried multiple margin spacing (e.g ml-md-4) and offsetting (e.g offset-md-1) and nothing seems to work.

sao
  • 1,835
  • 6
  • 21
  • 40
56 6f 69 64
  • 11
  • 4

1 Answers1

0

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

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

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624