Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bugs in .navbar-expand-(size) > .container/-fluid

See original GitHub issue

I think there is a bug in Bootstrap 4.0.0 with container and container-fluid paddings when container is into the navbar. The lateral paddings aren’t right depending on the navbar-expand-(size).

With container-fluid: container-fluid paddings should be set to 0 when navbar is expanded and up.

With container: container paddings should be set to 15px in sizes smaller than the expand size, except xs.

I am solving this with this media queries for .navbar-expand-md, but I think there is a Bootstrap bug:

@media (min-width: 576px) and (max-width: 767px) {
	
	.navbar-expand-md > .container {
		padding-left: 15px !important;
		padding-right: 15px !important;
		}
	}

…

@media (min-width: 768px) {
	/* Solves bs4 bugs */
	.navbar-expand-md > .container-fluid {
		padding-left: 0px !important;
		padding-right: 0px !important;
		}
	}

And this is an example:

<div class="container">
	<div class="bg-light text-center">Available width in container</div>
</div>

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
	
    <div class="container">
 
        <a class="navbar-brand bg-secondary" href="#">NAVBAR BRAND</a>
        
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        	<span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarNav">
        	<ul class="navbar-nav ml-auto bg-secondary">
        		<li class="nav-item active">
        			<a class="nav-link" href="#">HOME</a>
        		</li>
        		<li class="nav-item">
        			<a class="nav-link" href="#">FEATURES</a>
        		</li>
        		<li class="nav-item ">
        			<a class="nav-link" href="#">ABOUT X</a>
        		</li>
        	</ul>
        </div><!-- /.navbar-collapse -->

	</div><!-- .container -->

</nav>

<div class="container-fluid">
	<div class="bg-light text-center">Available width in container-fluid</div>
</div>

Issue Analytics

State:
Created 6 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

2reactions

Alectocommented, Apr 22, 2019

It is written that fixed, but why is this bug present in 4.3.1?

0reactions

hispa2000commented, Mar 6, 2018

Hello, this is by-design and is reported since beta versions, without fixing. I have fixed it with this media-queries:

`/* Styles in xs disposition */ @media (max-width: 575px) { }

/* Styles in sm disposition and up / @media (min-width: 576px) and (max-width: 767px) { / Solves bs4 bug */ .navbar-expand-md > .container, .navbar-expand-lg > .container, .navbar-expand-xl > .container { padding-left: 15px !important; padding-right: 15px !important; } }

@media (min-width: 576px) { /* Solves bs4 bug */ .navbar-expand > .container { padding-left: 15px !important; padding-right: 15px !important; } .navbar-expand-sm > .container-fluid { padding-left: 0px !important; padding-right: 0px !important; }

/* Styles in md disposition and up / @media (min-width: 768px) and (max-width: 991px) { / Solves bs4 bug */ .navbar-expand-lg > .container, .navbar-expand-xl > .container { padding-left: 15px !important; padding-right: 15px !important; } }

@media (min-width: 768px) { /* Solves bs4 bug */ .navbar-expand-md > .container-fluid { padding-left: 0px !important; padding-right: 0px !important; } }

/* Styles in lg disposition and up / @media (min-width: 992px) and (max-width: 1199px) { / Solves bs4 bug */ .navbar-expand-xl > .container { padding-left: 15px !important; padding-right: 15px !important; } }

@media (min-width: 992px) { /* Solves bs4 bug */ .navbar-expand-lg > .container-fluid { padding-left: 0px !important; padding-right: 0px !important; } }

/* Styles in xl disposition and up / @media (min-width: 1200px) { / Solves bs4 bug */ .navbar-expand-xl > .container-fluid { padding-left: 0px !important; padding-right: 0px !important; } }`

Top Results From Across the Web

bootstrap navbar not adapting in container - Stack Overflow

Save this question. Show activity on this post. I need to put six menu items so I tried bootstrap navbar but its not...

container-fluid fix not in overrides.less for navbar - Drupal

When setting no position, he page.vars.php page sets an extra class 'container' on the navbar element. This isn't correct, as the container ......

Navbar expanding on page load - Material Design for Bootstrap

Collapse element not expanding when I declare it. Actual behavior. Collapse element expands when I declare it. Resources (screenshots, code snippets etc.).

navbar-expand-* - Bootstrap CSS class

Bootstrap CSS class navbar-expand-* with source code and live preview. You can copy our examples and paste them into your project!

Navbar · Bootstrap v5.0

navbar -expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes. Navbars and their contents are fluid by default. Change the container to ...