Bootstrap navbar helps a lot when it comes to responsive web development. You can build numerous variations of the Bootstrap navbar. Here is a Bootstrap navbar with all the links and Brand name center-aligned. It can be center-aligned using CSS properties, but Bootstrap provides many inbuilt classes. So, that’s what I have used.
Here is a step-by-step tutorial to center-align items in a Bootstrap navbar.
Final output:
1. If you follow the Bootstrap documentation, this is the basic left-aligned navbar:
Output:
2. To get the links in the center, add class mx-auto to <ul> on line 7. (I changed the background-color to #b2fefa and added some CSS.)
Output:
3. To center align Brand name or Company Logo, add code inside <ul>.
Output:
4. Works for large screens but to remove the Brand name inside the navbar, add the classes d-none d-lg-block to navbar-brand. These are Bootstrap classes to hide an element on smaller screens and show only on large ones.
Output:
5. For the final output, add the Brand name link on the second line along with the Bootstrap class d-lg-none. This will be hidden on large screens.
Output:
Final Output Code for responsive Bootstrap Navbar Center Items using Bootstrap classes:
HTML
CSS
We can also do this using CSS:
1. I’ll be using the same navbar from Bootstrap.
Output:
2. So navbar-collapse has flex-grow set to 1 by default. Let’s set it to 0.
Since the navbar is a flexbox we can use justify-content to horizontally align the elements within it.
Output:
3. On the smaller screens we get something like this.
You can try placing everything in the center. But I’d prefer it to be on the left as the default navbar on smaller screens. To apply these changes only on larger screens let’s use a media query.
Output:
Final Output Code for Bootstrap navbar center aligned using CSS:
HTML
CSS
If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.