Bootstrap 4 columns and rows producing unwanted padding

Question

I am trying to use bootstrap to create columns and rows to place my images however too much padding is being added around the images which is preventing my images from looking like the design:

This is how I structured my HTML:

<!-- header -->

<header>
    <div class="container">
        <div class="row">
            <div class="col-md-5">
                <div class="col-md-12">
                    <img src="{!! $bg_image_col1_row1['url'] !!}" alt="{!! $bg_image_col1_row1['alt'] !!}" />
                </div>
                <div class="col-md-12">
                    <img src="{!! $bg_image_col1_row2['url'] !!}" alt="{!! $bg_image_col1_row2['alt'] !!}" />
                </div>
            </div>
            <div class="col-md-7">
                <div class="row">
                    <div class="col-md-6">
                        <img src="{!! $bg_image_co21_row1_col1['url'] !!}" alt="{!! $bg_image_co21_row1_col1['alt'] !!}" />
                    </div>
                    <div class="col-md-6">
                        <img src="{!! $bg_image_co21_row1_col2['url'] !!}" alt="{!! $bg_image_co21_row1_col2['alt'] !!}" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="container">
                            <h1>@php(get_field('front-page__title'))</h1>
                            <div>@php(get_field('front-page__slogan'))</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-md-9">
                            <div class="container">
                                <div class="zeo-cases-button">
                                    <a href="@php(get_field('front-page__button--url'))" class="button">@php(get_field('front-page__button--text'))</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="container">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- /header -->

But this is resulting in this:

My question. Did I write the bootstrap elements correctly? How should I go about the padding in case the bootstrap elements are written correctly so that I can match the requirements of the design? Thanks a lot for your time!

Could you please provide us a working snipet with css – Ced Jan 25 '19 at 10:22 — Ced, Jan 25 '19 at 10:22

Bernhard · Accepted Answer · 2019-01-25T10:45:23.003

4

Add the class no-gutters to each div class="row" to remove the spaces between the col-* elements

See the Bootstrap documentation about gutters.

<div class="row no-gutters">
    <div style="background-color:#aaa" class="col-sm-3">a</div>
    <div style="background-color:#bbb" class="col-sm-3">b</div>
    <div style="background-color:#ccc" class="col-sm-3">c</div>
    <div style="background-color:#ddd" class="col-sm-3">d</div>
</div>

Here a working jsfiddle that also removes the "visual padding" once the images doesn't fit 100% into the container.

edited Jan 25 '19 at 10:45

answered Jan 25 '19 at 10:22

Bernhard

4,855
5
39
70

Great tip, but I am still left with some padding created by the col that contain the images: https://imgur.com/a/hzYL55a – Marco V Jan 25 '19 at 10:28
Are you sure it's real padding or might it be possible that the images are too small for the container? Maybe try for each image a `width="100%"` to eliminate the visual padding. – Bernhard Jan 25 '19 at 10:32
I added no-gutters to col-md-5 and the row under col-md-7 and now all the image are showing perfectly: https://imgur.com/a/EKcOEPb – Marco V Jan 25 '19 at 10:34
Ahh cool. Yes meant to add this class to each `
`. Will update that in the answer.
– Bernhard Jan 25 '19 at 10:35

score 1 · Answer 2 · answered Jan 25 '19 at 10:23

Bootstrap : "The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns."

You should try to do :

<div class="row no-gutters">
    <div class="col-6">
       <img ... />
    </div>
    <div class="col-6">
       <img ... />
    </div>
</div>

score 0 · Answer 3 · answered Jan 25 '19 at 10:48

0

Add below class hope it works for you.

.margin0-padding0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding: 0px !important;
}

answered Jan 25 '19 at 10:48

Akil Makda

373
1
3
9

Bootstrap 4 columns and rows producing unwanted padding

3 Answers3

Linked

Related