full width div in bootstrap 4

Question

Why is my bottom border in the inside div not full width?

    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-md-2 bg-light mh-100">
                <div class="d-flex justify-content-center border-bottom w-100">
                    <img class="my-3" src="img/img.png" alt="" srcset="" style="height:18px; width:110px;">
                </div>
            </div>
            <div class="col-12 col-md-10 bg-dark mh-100">
                <p>sfsdfsdfsd</p>
            </div>
        </div>
    </div>

Answer 1

"why my border bottom in inside div is not full width?"

Because Bootstrap columns have padding. Use p-0 (padding:0) to remove it.

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-2 bg-light mh-100 p-0">
            <div class="d-flex justify-content-center border-bottom w-100">
                <img class="my-3" src="img/avayadak.png" alt="" srcset="" style="height:18px; width:110px;">
            </div>
        </div>
        <div class="col-12 col-md-10 bg-dark mh-100">
            <p>sfsdfsdfsd</p>
        </div>
    </div>
</div>

https://www.codeply.com/go/SVpElPIXAw

Full width edge-to-edge layout in Bootstrap 4

As explained in the docs, zero out container-fluid padding (px-0), and use no-gutters on the row..

<div class="container-fluid px-0">
    <div class="row no-gutters">
        <div class="col-12">
            (edge-to-edge content)
        </div>
    </div>
</div>

Also the container-fluid can be simply removed when using .row.no-gutters.

Bootstrap 4 Full Width

Answer 2

According to bootstrap 4 documentation:

Need an edge-to-edge design? Drop the parent .container or .container-fluid.

Bootstrap 4 No Gutters docs

So:

    <div class="row no-gutters">
        <div class="col-12 col-md-2 bg-light mh-100">
            <div class="d-flex justify-content-center border-bottom w-100">
                <img class="my-3" src="img/img.png" alt="" srcset="" style="height:18px; width:110px;">
            </div>
        </div>
        <div class="col-12 col-md-10 bg-dark mh-100">
            <p>sfsdfsdfsd</p>
        </div>
    </div>