v5: Simplify navbars by requiring containers (#29339)

* v5: Simplify navbars by requiring containers

* Update migration docs for navbar

scss/_navbar.scss

@@ -21,7 +21,10 @@
   flex-wrap: wrap; // allow us to do the line break for collapsing content
   align-items: center;
   justify-content: space-between; // space out brand from logo
-  padding: $navbar-padding-y $navbar-padding-x;
+  padding-top: $navbar-padding-y;
+  padding-right: $navbar-padding-x; // default: null
+  padding-bottom: $navbar-padding-y;
+  padding-left: $navbar-padding-x; // default: null
 
   // Because flex properties aren't inherited, we need to redeclare these first
   // few properties so that content nested within behave properly.
@@ -149,24 +152,6 @@
     $infix: breakpoint-infix($next, $grid-breakpoints);
 
     &#{$infix} {
-      @include media-breakpoint-down($breakpoint) {
-        %container-navbar-expand-#{$breakpoint} {
-          padding-right: 0;
-          padding-left: 0;
-        }
-
-        > .container,
-        > .container-fluid {
-          @extend %container-navbar-expand-#{$breakpoint};
-        }
-
-        @each $size, $container-max-width in $container-max-widths {
-          > .container#{breakpoint-infix($size, $container-max-widths)} {
-            @extend %container-navbar-expand-#{$breakpoint};
-          }
-        }
-      }
-
       @include media-breakpoint-up($next) {
         flex-flow: row nowrap;
         justify-content: flex-start;

scss/_variables.scss

@@ -833,7 +833,7 @@ $nav-pills-link-active-bg:          $component-active-bg !default;
 // Navbar
 
 $navbar-padding-y:                  $spacer / 2 !default;
-$navbar-padding-x:                  $spacer !default;
+$navbar-padding-x:                  null !default;
 
 $navbar-nav-link-padding-x:         .5rem !default;
 

site/content/docs/4.3/components/navbar.md

@@ -11,7 +11,7 @@ toc: true
 Here's what you need to know before getting started with the navbar:
 
 - Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl}` for responsive collapsing and [color scheme](#color-schemes) classes.
-- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
+- Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways.
 - Use our [spacing]({{< docsref "/utilities/spacing" >}}) and [flex]({{< docsref "/utilities/flex" >}}) utility classes for controlling spacing and alignment within navbars.
 - Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
 - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
@@ -37,6 +37,7 @@ Here's an example of all the sub-components included in a responsive light-theme
 
 {{< example >}}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -70,6 +71,7 @@ Here's an example of all the sub-components included in a responsive light-theme
         <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
       </form>
     </div>
+  </div>
 </nav>
 {{< /example >}}
 
@@ -82,12 +84,16 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
 {{< example >}}
 <!-- As a link -->
 <nav class="navbar navbar-light bg-light">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
+  </div>
 </nav>
 
 <!-- As a heading -->
 <nav class="navbar navbar-light bg-light">
+  <div class="container-fluid">
     <span class="navbar-brand mb-0 h1">Navbar</span>
+  </div>
 </nav>
 {{< /example >}}
 
@@ -96,19 +102,23 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
 {{< example >}}
 <!-- Just an image -->
 <nav class="navbar navbar-light bg-light">
+  <div class="container">
     <a class="navbar-brand" href="#">
       <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
     </a>
+  </div>
 </nav>
 {{< /example >}}
 
 {{< example >}}
 <!-- Image and text -->
 <nav class="navbar navbar-light bg-light">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">
       <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
       Bootstrap
     </a>
+  </div>
 </nav>
 {{< /example >}}
 
@@ -120,6 +130,7 @@ Active states—with `.active`—to indicate the current page can be applied dir
 
 {{< example >}}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</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>
@@ -140,6 +151,7 @@ Active states—with `.active`—to indicate the current page can be applied dir
         </li>
       </ul>
     </div>
+  </div>
 </nav>
 {{< /example >}}
 
@@ -147,6 +159,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
 
 {{< example >}}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -159,6 +172,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
         <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
       </div>
     </div>
+  </div>
 </nav>
 {{< /example >}}
 
@@ -166,6 +180,7 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
 
 {{< example >}}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -193,6 +208,7 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
         </li>
       </ul>
     </div>
+  </div>
 </nav>
 {{< /example >}}
 
@@ -202,10 +218,12 @@ Place various form controls and components within a navbar with `.form-inline`.
 
 {{< example >}}
 <nav class="navbar navbar-light bg-light">
+  <div class="container-fluid">
     <form class="form-inline">
       <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
     </form>
+  </div>
 </nav>
 {{< /example >}}
 
@@ -213,11 +231,13 @@ Immediate children elements in `.navbar` use flex layout and will default to `ju
 
 {{< example >}}
 <nav class="navbar navbar-light bg-light">
+  <div class="container-fluid">
     <a class="navbar-brand">Navbar</a>
     <form class="form-inline">
       <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
     </form>
+  </div>
 </nav>
 {{< /example >}}
 
@@ -225,6 +245,7 @@ Input groups work, too:
 
 {{< example >}}
 <nav class="navbar navbar-light bg-light">
+  <div class="container-fluid">
     <form class="form-inline">
       <div class="input-group">
         <div class="input-group-prepend">
@@ -233,6 +254,7 @@ Input groups work, too:
         <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
       </div>
     </form>
+  </div>
 </nav>
 {{< /example >}}
 
@@ -240,10 +262,12 @@ Various buttons are supported as part of these navbar forms, too. This is also a
 
 {{< example >}}
 <nav class="navbar navbar-light bg-light">
+  <div class="container-fluid">
     <form class="form-inline">
       <button class="btn btn-outline-success" type="button">Main button</button>
       <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
     </form>
+  </div>
 </nav>
 {{< /example >}}
 
@@ -253,9 +277,11 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
 
 {{< example >}}
 <nav class="navbar navbar-light bg-light">
+  <div class="container-fluid">
     <span class="navbar-text">
       Navbar text with an inline element
     </span>
+  </div>
 </nav>
 {{< /example >}}
 
@@ -263,6 +289,7 @@ Mix and match with other components and utilities as needed.
 
 {{< example >}}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar w/ text</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -283,6 +310,7 @@ Mix and match with other components and utilities as needed.
         Navbar text with an inline element
       </span>
     </div>
+  </div>
 </nav>
 {{< /example >}}
 
@@ -292,6 +320,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
 
 <div class="bd-example">
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <div class="container-fluid">
       <a class="navbar-brand" href="#">Navbar</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -317,9 +346,11 @@ Theming the navbar has never been easier thanks to the combination of theming cl
           <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
         </form>
       </div>
+    </div>
   </nav>
 
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+    <div class="container-fluid">
       <a class="navbar-brand" href="#">Navbar</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -345,9 +376,11 @@ Theming the navbar has never been easier thanks to the combination of theming cl
           <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
         </form>
       </div>
+    </div>
   </nav>
 
   <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
+    <div class="container-fluid">
       <a class="navbar-brand" href="#">Navbar</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -373,6 +406,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
           <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
         </form>
       </div>
+      </div>
   </nav>
 </div>
 
@@ -392,21 +426,23 @@ Theming the navbar has never been easier thanks to the combination of theming cl
 
 ## Containers
 
-Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of a [fixed or static top navbar](#placement).
+Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of a [fixed or static top navbar](#placement). Note that an inner container is still required.
 
 {{< example >}}
 <div class="container">
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <div class="container-fluid">
       <a class="navbar-brand" href="#">Navbar</a>
+    </div>
   </nav>
 </div>
 {{< /example >}}
 
-When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified `.navbar-expand{-sm|-md|-lg|-xl}` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
+Use any of the responsive containers to change how wide the content in your navbar.
 
 {{< example >}}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <div class="container">
+  <div class="container-md">
     <a class="navbar-brand" href="#">Navbar</a>
   </div>
 </nav>
@@ -420,25 +456,33 @@ Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully suppo
 
 {{< example >}}
 <nav class="navbar navbar-light bg-light">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Default</a>
+  </div>
 </nav>
 {{< /example >}}
 
 {{< example >}}
 <nav class="navbar fixed-top navbar-light bg-light">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Fixed top</a>
+  </div>
 </nav>
 {{< /example >}}
 
 {{< example >}}
 <nav class="navbar fixed-bottom navbar-light bg-light">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Fixed bottom</a>
+  </div>
 </nav>
 {{< /example >}}
 
 {{< example >}}
 <nav class="navbar sticky-top navbar-light bg-light">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Sticky top</a>
+  </div>
 </nav>
 {{< /example >}}
 
@@ -456,6 +500,7 @@ With no `.navbar-brand` shown in lowest breakpoint:
 
 {{< example >}}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <div class="container-fluid">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
@@ -477,6 +522,7 @@ With no `.navbar-brand` shown in lowest breakpoint:
         <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
       </form>
     </div>
+  </div>
 </nav>
 {{< /example >}}
 
@@ -484,6 +530,7 @@ With a brand name shown on the left and toggler on the right:
 
 {{< example >}}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -506,6 +553,7 @@ With a brand name shown on the left and toggler on the right:
         <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
       </form>
     </div>
+  </div>
 </nav>
 {{< /example >}}
 
@@ -513,6 +561,7 @@ With a toggler on the left and brand name on the right:
 
 {{< example >}}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <div class="container-fluid">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
@@ -535,6 +584,7 @@ With a toggler on the left and brand name on the right:
         <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
       </form>
     </div>
+  </div>
 </nav>
 {{< /example >}}
 
@@ -550,8 +600,10 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher
   </div>
 </div>
 <nav class="navbar navbar-dark bg-dark">
+  <div class="container-fluid">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
+  </div>
 </nav>
 {{< /example >}}

site/content/docs/4.3/examples/navbars/index.html

@@ -6,6 +6,7 @@ extra_css:
 ---
 
 <nav class="navbar navbar-dark bg-dark">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Never expand</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -35,9 +36,11 @@ extra_css:
         <input class="form-control" type="text" placeholder="Search" aria-label="Search">
       </form>
     </div>
+  </div>
 </nav>
 
 <nav class="navbar navbar-expand navbar-dark bg-dark">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Always expand</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -56,9 +59,11 @@ extra_css:
         <input class="form-control" type="text" placeholder="Search">
       </form>
     </div>
+  </div>
 </nav>
 
 <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Expand at sm</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -88,9 +93,11 @@ extra_css:
         <input class="form-control" type="text" placeholder="Search">
       </form>
     </div>
+  </div>
 </nav>
 
 <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Expand at md</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -120,9 +127,11 @@ extra_css:
         <input class="form-control" type="text" placeholder="Search">
       </form>
     </div>
+  </div>
 </nav>
 
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Expand at lg</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -152,9 +161,11 @@ extra_css:
         <input class="form-control" type="text" placeholder="Search">
       </form>
     </div>
+  </div>
 </nav>
 
 <nav class="navbar navbar-expand-xl navbar-dark bg-dark">
+  <div class="container-fluid">
     <a class="navbar-brand" href="#">Expand at xl</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -184,6 +195,7 @@ extra_css:
         <input class="form-control" type="text" placeholder="Search">
       </form>
     </div>
+  </div>
 </nav>
 
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
@@ -259,6 +271,7 @@ extra_css:
 </div>
 
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+  <div class="container-fluid">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
@@ -284,10 +297,12 @@ extra_css:
         </li>
       </ul>
     </div>
+  </div>
 </nav>
 
 <div class="container">
   <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
+    <div class="container-fluid">
       <a class="navbar-brand" href="#">Navbar</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -317,9 +332,11 @@ extra_css:
           <input class="form-control" type="text" placeholder="Search" aria-label="Search">
         </form>
       </div>
+    </div>
   </nav>
 
   <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
+    <div class="container-fluid">
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
@@ -345,6 +362,7 @@ extra_css:
           </li>
         </ul>
       </div>
+    </div>
   </nav>
 
   <main role="main">

site/content/docs/4.3/migration.md

@@ -110,6 +110,10 @@ Badges were overhauled to better differentiate themselves from buttons and to be
 
 - The jumbotron component is removed in favor of utility classes like `.bg-light` for the background color and `.p-*` classes to control padding.
 
+### Navbars
+
+- All navbars now require a container within. This drastically simplifies spacing requirements and removes the need for extensive CSS overrides we added for responsive containers in v4.
+
 ### Pagination
 
 - Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another.