Bootstrap | How to Make Top Fixed Navbar Stay in Container and Not Stretch?

The navigation bar is an important application component. It provides the user with the names of different application sections embedded with their links. The user will be directed to that part by clicking these section links. Bootstrap provides many classes to create the navigation bar. More specifically, some Bootstrap classes help to adjust the navbar’s position.

This write-up will explain how to make the top fixed navbar not stretch out of the container.

How to Make a Top Fixed Navbar?

The “fixed-top” class is utilized to make the navbar fixed at the top of the viewport. It has a predefined CSS “position” property with the value “fixed” with some other properties.


Let’s implement the “fixed-top” class to the navbar and see its effect:

  • First, add a “<nav>” element with the “navbar”, “navbar-expand-md”, “bg-light”, and “fixed-top” classes.
  • Include the logo by using the “navbar-brand” class.
  • Then, add the “<button>” element to create a button. This will display on the screen when the screen is reduced means all the items will be collapsed which is applied using the “data-toggle” attribute with the value “collapse”. On clicking the button, the navbar items will be displayed like a menu.
  • Specify the “<div>” element with the “collapse” and “navbar-collapse” classes.
  • Add the navbar items in the form of an unordered list.
  • Then, make the search bar using the “<form>” element.


<nav class="navbar navbar-expand-md bg-light fixed-top">

<a class="navbar-brand" href="#"> navbar</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">

<span class="navbar-toggler-icon"></span>


<div class="collapse navbar-collapse" id="navbarCollapse">

<ul class="navbar-nav mr-auto">

<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>

<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>


<form class="form-inline mt-2 mt-md-0">

<input class="form-control mr-sm-2" type="text" placeholder="Search">

<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>




So far, we have created a navigation bar. Now, let’s add some content to the web page:

<main class="container">

<div class="jumbotron">

<h1>Welcome to Linuxhint</h1>

<p class="lead">Linuxhint provides the best quality articles and videos.</p>

<a class="btn btn-lg btn-primary" href="#">View more </a>



You can observe from the below GIF the navigation bar’s position is fixed at the viewport’s top:

From the below GIF, it can be seen that, on increasing or decreasing the screen size, the navigation bar is stretching accordingly:

The below section will demonstrate how to make the top fixed navbar stay in the container and not stretch with the help of practical examples.

How to Make Top Fixed Navbar Not Stretch out of the Container?

Bootstrap’s “container” class offers a responsive fixed-width container. This class helps the navbar to stay in a container and avoids its stretching.


Assign the “container” class to the “<nav>” element:

<nav class="navbar navbar-expand-md bg-light fixed-top container">

The below GIF displays that the navbar is not stretching, and on increasing or decreasing the screen size, it stays in a container:

That was all about how to make the top fixed navbar stay in the container and not stretch.


To make the top fixed navbar, the Bootstrap “top-fixed” class is utilized. On scrolling the web page, the navbar will not be affected. However, on increasing or reducing the screen size, the navbar stretches accordingly. To avoid the navbar from stretching, assign the “container” class to the “<nav>” element. This write-up has demonstrated how to make the top fixed navbar not stretch out of the container.

About the author

Nadia Bano

I am an enthusiastic and forward-looking software engineer with an aim to explore the global software industry. I love to write articles on advanced-level designing, coding, and testing.