Bootstrap 4 container-fluid padding from a column inside a row

HTML & CSS
1

Hello everyone,
I am trying to make a simple control panel,
The first column should contain a navigation menu, using Bootstrap List-group with Bootstap Colapse.
The second column will be the content.

The issue is that there are padding on left and right 15px, that makes a small space, I used pl-0 to remove that padding, but is that the proper way to do it? because container-fluid should make the “div” takes the fall width 100%, but there still small padding.

This is the code:(You can see the output here: https://www.bootply.com/QWS6mv58kY)

<div class="container-fluid">
    <div class="row">
        <div class="col-3">
            <div class="list-group">
    <a href="#target-here" class="list-group-item list-group-item-action" data-toggle="collapse">Hello</a>
    <div class="collapse" id="target-here">
        <div class="list-group">
            <a href="#" class="list-group-item">Another List Here</a>
            <a href="#" class="list-group-item">Another List Here</a>
            <a href="#" class="list-group-item">Another List Here</a>
        </div>
    </div>
    <a href="#target-here2" class="list-group-item" data-toggle="collapse">Hello</a>
    <div class="collapse" id="target-here2">Hello, This is a hidden Division</div>
    <a href="#target-here3" class="list-group-item" data-toggle="collapse">Hello</a>
    <div class="collapse" id="target-here3">Hello, This is a hidden Division</div>
</div>        </div>
        <div class="col-9">
            <div class="container my-3">
                <div class="row justify-content-center">
                    <div class="col-md-8 col-lg-6">
                                            </div>
                </div>
            </div>
                <div class="container">
        <h1>This is how it looks like</h1>
    </div>
        </div>
    </div>
  <hr>
</div><div class="container-fluid pl-0">
    <div class="row">
        <div class="col-3">
            <div class="list-group">
    <a href="#target-here" class="list-group-item list-group-item-action" data-toggle="collapse">Hello</a>
    <div class="collapse" id="target-here">
        <div class="list-group">
            <a href="#" class="list-group-item">Another List Here</a>
            <a href="#" class="list-group-item">Another List Here</a>
            <a href="#" class="list-group-item">Another List Here</a>
        </div>
    </div>
    <a href="#target-here2" class="list-group-item" data-toggle="collapse">Hello</a>
    <div class="collapse" id="target-here2">Hello, This is a hidden Division</div>
    <a href="#target-here3" class="list-group-item" data-toggle="collapse">Hello</a>
    <div class="collapse" id="target-here3">Hello, This is a hidden Division</div>
</div>        </div>
        <div class="col-9">
            <div class="container my-3">
                <div class="row justify-content-center">
                    <div class="col-md-8 col-lg-6">
                                            </div>
                </div>
            </div>
                <div class="container">
        <h1>Here using the calss pl-0 to remove the padding.</h1>
    </div>
        </div>
    </div>
</div>
2

The container in bootstrap has a default left and right padding of 15px. A row contains a negative left and right margin of 15px so that .row is actually flush against the edge of the container/(viewport for fluid containers).

Only columns can be children of a row and columns have 15px default padding also so its the column that you need to negate the padding from. If you delete the padding from the .container then .row is dragged out of the viewport with its negative margin. This will have no real effect on the left side but will cause a scroll on the right side of course.

Therefore I would address the padding on the first column instead to keep the structure sound.

<div class="col-3 pl-0">

Columns and gaps are an integral part of the bootstrap setup so it seems strange to use bootstrap and then dispense with the structure unless this is just an isolated case? Having content hard against the left edge can look a bit odd unless of course its just for a full width header section.

1 Like
3

Thank you for the explanation, I should use “pl-0” on the column as you mentioned, removing the padding from the container never makes sense, but removing padding from the column will make things right.

What I am trying to achieve is to take advantage of the full width, since the whole page will be divided into two parts, one for the navigation and another for the content, so i want to make sure that I have enough space for the content by removing all unnecessary spaces over the page.

You should get my point if you access the link in the question.

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.