How can I remove this bootstrap container fluid default margin? Please see attached picture

Miya

When I want to add navbar in parent class .container-fluid. The navbar has a default left margin because you can view the image here please view the image

Here is my code -

    <div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <nav id="navbar_top" class="navbar navbar-expand-md bg-dark navbar-dark">
                <!-- <a class="navbar-brand" href="#">Navbar</a> -->
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#collapsibleNavbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Product</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Campaign</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</div>
Scott Weaver

The .no-gutters class has been replaced with .g-0 in Bootstrap 5. Use it on .rows where you don't want no spacing between columns. https://stackoverflow.com/a/21256143/244811

.g-0Added to the .col-lg-12div and it seems to have the gutter:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="g-0 col-lg-12">
            <nav id="navbar_top" class="navbar navbar-expand-md bg-dark navbar-dark">
                <!-- <a class="navbar-brand" href="#">Navbar</a> -->
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#collapsibleNavbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Product</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Campaign</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</div>

Related

Bootstrap 4 container fluid extra margin

Pierre I am using Bootstrap 4.2 to write a page in html. I would like to have a horizontal navbar at the top of the page that takes the full width of the page and remains static during navigation. I am trying to use some divs in the class "container-fluid". Th

Bootstrap 4 container fluid extra margin

Pierre I am using Bootstrap 4.2 to write a page in html. I would like to have a horizontal navbar at the top of the page that takes the full width of the page and remains static during navigation. I am trying to use some divs in the class "container-fluid". Th

Where can I find container fluid classes in Bootstrap 3?

useful bee It works when switching from container to container fluid. However, I tried searching for it in the bootstrap.css file and couldn't find a match. Any ideas? ! DKhanal FYI, boostrap 3.1 does have container fluid since people answered this question in

How to remove a container that is attached to the body

sdvnksv I created a container and added this to the body: // Create container var container = "<div class='foo'> ... </div>"; // Prepend it to the body $("body").prepend(container); Now, I want to fade out the container after a few seconds: setTimeout(functi

How to remove a container that is attached to the body

sdvnksv I created a container and added this to the body: // Create container var container = "<div class='foo'> ... </div>"; // Prepend it to the body $("body").prepend(container); Now, I want to fade out the container after a few seconds: setTimeout(functi

How can I make this box in CSS (please see my image)?

Munira In my divbox I have one bodyand headerpart. I want to give this headerpart a separate border which must be inside the div box and not have any padding. should indeed look like my given image: Here is what I have tried: HTML： <div id="story"> <p>

How can I make this box in CSS (please see my image)?

Munira In my divbox I have one bodyand headerpart. I want to give this headerpart a separate border which must be inside the div box and not have any padding. should indeed look like my given image: Here is what I have tried: HTML： <div id="story"> <p>

How can I remove the right margin of the last <i>?

Momo I tried it :last-child {margin-right: 0;}but it didn't work. .navigation-menu .social-icons i { margin-top: 15px; margin-right: 10px; color: #FFFFFF; } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" rel="styleshee