CODEWITHSUNDEEP
htmlcssbootstrap-4
Nikita Bulanakov
Nikita Bulanakov

Reputation: 168

Bootstrap 4 grid empty space due to full-width row

I have a bootstrap grid layout with ads, and I needed to add a banners row in it. I found a way to do it by adding a container between ads and the banners inside them with a separate row. But now I have a problem that you can see in the picture.

Is there a way to have the ads positioned better and avoid un-used empty space?

Note1: The columns number is responsible to screen size.

Note2: Banners number in a row is responsible for columns number (with d-none trick)

enter image description here

<div class="container">
    <div class="row">
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>

        <div class="container">
             <div class="row">
                 <div class="col-3 banner">Banner</div>
                 <div class="col-3 banner">Banner</div>
                 <div class="col-3 banner d-sm-none d-md-block">Banner</div>
                 <div class="col-3 banner d-sm-none d-md-block">Banner</div>
             </div>
        </div>

        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
    </div>
</div>

Upvotes: 1

Views: 1216

Answers (1)

prathameshk73
prathameshk73

Reputation: 1088

As your are using 4 columns in each row, you need put ad columns in a separate row. Bootstrap grid system works on 12 column layout. So each row must have columns that sums up to 12. You can have any combination of columns such as .col-md-4, .col-md-4 and .col-md-4 in one row.

No need to take separate container for ad banners.

Try below code.

<div class="container">
        <div class="row">
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
        </div>
        <div class="row">
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
        </div>
        <!-- Ad banners-->
        <div class="row">
                <div class="col-3 banner">Ad banner</div>
                <div class="col-3 banner">Ad banner</div>
                <div class="col-3 banner">Ad banner</div>
        </div>
        <div class="row">
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
        </div>
    </div>

Upvotes: 1

Related Questions