Having trouble centering the links in the Bootstrap navbar?

I've been struggling to center the links/tabs on my Bootstrap navbar for days now and I just can't seem to get it right. I've gone through countless similar questions without any luck. Something must be off in my code or maybe I'm not targeting the correct element.

It's a simple Bootstrap navbar snippet in Dreamweaver. I was able to change the color, font, and size, but aligning it perfectly in the middle is proving to be a challenge.

.navbar.navbar-default {
  background-color: #B3C5D7;
  background-attachment: fixed;
  position: fixed;
  width: 100%;
  border-radius: 0px;
  float: none;
  text-align: center;
}

.nav.navbar-nav {
  font-size: x-large;
  width: 100%;
  display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      <div class="collapse navbar-collapse" id="defaultNavbar1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">HOME<span class="sr-only">(current)</span></a></li>
          <li><a href="ourcarefactor.html">OUR CARE FACTOR</a></li>
          <li><a href="facilities.html">FACILITIES</a></li>
          <li><a href="functions.html">FUNCTIONS</a></li>
          <li><a href="contact.html">CONTACT US</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

htmlcsstwitter-bootstrapnavbar

Answer №1

Utilize the power of Flexbox to achieve this:

.menu-bar {
  display: flex; /* inline display for flex items (child elements) */
  justify-content: center; /* horizontally center alignment */
}

Answer №2

Consider incorporating the following CSS classes

Cascading Style Sheets

.menu-header
{
  float:none;
}

.menu-items li
{
  float:none;
  display:inline-block;
}

I trust that this guidance will be beneficial to you.

Answer №3

Essentially, Bootstrap utilizes float:left in the navbar-header and li elements, causing the parent div not to align center or accept margin auto. To address this issue, update the CSS part as shown below or refer to the fiddle link for more details:

The first option involves nesting classes to carefully analyze both the CSS and HTML structure.

Click here for the 1st option with nested classes for center alignment

In the second option, only CSS changes are made, so pay close attention to the CSS modifications.

Here is the second option to achieve center alignment:

Check out the 2nd option for center alignment

To achieve center alignment, update the CSS section by using inline-flex:

.navbar.navbar-default {
  background-color: #B3C5D7;
  background-attachment: fixed;
  position: fixed;
  width: 100%;
  border-radius: 0px;
  float: none;
  text-align: center;
}

.nav.navbar-nav {
  font-size: x-large;
  width: 100%;
  display: inline-block;
}

/* Add this CSS part */

.navbar-header {
  float: none; /* Include this */
}

.navbar-nav li {
  display: inline-flex;  /* Include this */
  float: none;  /* Include this */
}
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      <div class="collapse navbar-collapse" id="defaultNavbar1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">HOME<span class="sr-only">(current)</span></a></li>
          <li><a href="ourcarefactor.html">OUR CARE FACTOR</a></li>
          <li><a href="facilities.html">FACILITIES</a></li>
          <li><a href="functions.html">FUNCTIONS</a></li>
          <li><a href="contact.html">CONTACT US</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

.navbar.navbar-default {
  background-color: #B3C5D7;
  background-attachment: fixed;
  position: fixed;
  width: 100%;
  border-radius: 0px;
  float: none;
  text-align: center;
}

.nav.navbar-nav {
  font-size: x-large;
  width: 100%;
  display: inline-block;
}

/* Add this CSS part */

.navbar-header.center-items {
  float: none;  /* Include this */
}

.navbar-center.navbar-nav li {
  display: inline-flex;  /* Include this */
  float: none;  /* Include this */
}
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header center-items"> <!--Add class -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      <div class="collapse navbar-collapse" id="defaultNavbar1">
        <ul class="nav navbar-nav navbar-center">  <!--Add class -->
          <li class="active"><a href="index.html">HOME<span class="sr-only">(current)</span></a></li>
          <li><a href="ourcarefactor.html">OUR CARE FACTOR</a></li>
          <li><a href="facilities.html">FACILITIES</a></li>
          <li><a href="functions.html">FUNCTIONS</a></li>
          <li><a href="contact.html">CONTACT US</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Access SCSS variable values in Angular HTML or TypeScript files

So, I've been looking into whether it's feasible to utilize the SCSS variable value within HTML or TS in Angular. For instance: Let's say I have a variable called $mdBreakpoint: 992px; stored inside the _variable.scss file. In my HTML cod ...

javascriptcssangulartypescriptsass

The value property of the input element is returning as undefined

The input value entered is always returning undefined. Despite trying various solutions found in similar questions, my jQuery code continues to return undefined. jQuery: $( document ).ready(function() { $('#Input').keypress( function(e ...

jqueryhtmlcss

Angular2 scripts are failing to load in the web browser

Setting up my index page has been more challenging than I anticipated. Take a look at my browser: https://i.stack.imgur.com/L4b6o.png Here is the index page I'm struggling with: https://i.stack.imgur.com/Op6lG.png I am completely stumped this tim ...

javascripthtmlangularjsnode.jsmean

Create a table by incorporating the information from the page along with additional content

I need to extract the data from a list and convert it into a table, add some additional content that I will provide, and then align the table accordingly. While I can easily align elements and already have the list, I am facing difficulty in converting it ...

javascriptjqueryhtmlcss

Angular - ngbDropdownMenu items are hidden from view, but their presence is still detectable

Hey there! I'm currently working on a school project and I'm aiming to implement a drop-down menu. Surprisingly, it's proving to be more challenging than expected. <div class="parrent"> <div class="row"> ...

htmlcssangularstylesdropdown

Is it possible for a media query to target only 2 elements instead of all 3?

Currently, I am dealing with an older website for a client, and it appears that a media query is not correctly affecting three specific classes out of the total. These problematic classes are .free-ship, .wholesale, .chronicles The CSS styling for these c ...

htmlcssjoomla

Ways to execute a function when a button is clicked with a shared variable?

When creating buttons in HTML to control video speed, I encountered a strange issue. After successfully implementing the buttons for one video, they only worked on a second video and had no impact on the first one. Deleting the second video seemed to resol ...

javascripthtmljquery

Is the `document.documentElement` consistently defined and always representing the HTML element?

I am looking to make changes to the <html> element using a script within the <head> section of an HTML page. My goal is to only access and modify the <html> element itself, without affecting any of its children. Should I wait for the DOM ...

javascripthtmldom

A space designated for numerous receivers

Is there a way to create a field that contains other elements, similar to sending messages to multiple users in a social network? https://i.stack.imgur.com/P9e24.png I attempted to understand the code for this, but it's quite complex. If anyone could ...

javascriptjqueryhtmlcss

Visibility of the br tag is not detected

I need to keep one specific div visible on the page while hiding all other content. However, I am facing an issue where the <br> tag inside that div is not showing up. <div id='min320'>min 320px<br>screen width required</div ...

htmlcss

Refresh WebPage automatically after a Servlet successfully uploads and processes an image

I have a webpage that includes an image and a button. When the button is clicked, it uploads the image by submitting a form to a file upload servlet. However, after successfully uploading the image, the servlet does not display it in the img tag. Here is ...

javascriptjavajqueryhtmlservlets

What is the best way to dynamically adjust the size of a Google map on my website automatically

I need assistance with placing a Google map on a webpage along with textboxes in the div below it: <div id="map_area"> <div id="map_canvas"></div> </div> <div id="date_range"> <input type="text" id= ...

csshtmlheight

Using (javascript:) within Href attributes

Recently, I've noticed some people including "javascript:" in the href attribute of an a tag. My question is: what is the purpose of this? Does it guarantee that clicking on the a tag directs the function of the click to JavaScript for handling, rathe ...

javascripthtml

How come the words are clear, but the background remains unseen?

My markup looks like this: <div class="one">Content</div> <div class="two"></div> I have the following CSS styles: .one, .two { height: 20px; } .one { background-color: #f00; } .two { background-color: #0f0; margi ...

css

HTML - various incorrect horizontal alignments

I'm having trouble getting the site logo, site name, and site header to align horizontally on my website. They keep ending up in different places.https://i.stack.imgur.com/5yL5f.jpg I'd like it to look similar to this: https://i.stack.imgur.com/ ...

htmlcss

Using a jQuery if statement to target a particular div and apply custom CSS styling

I have encountered a unique challenge that I am struggling to solve. Imagine I have a 3x3 table created using div elements, and one of the cells has a background color of #999. My goal is to use jQuery to check if a specific cell has this background color, ...

htmljquerycss

Live Server in VS Code not refreshing automatically as expected

My problem is with VS Code and Live Server for HTML CSS. I expected the page to automatically reload after editing my HTML, but that's not happening. Even though I have Auto-Save enabled, Live Server isn't updating or refreshing my page automati ...

htmlcssvscode-extensionsliveserver

Adjusting the height of the search icon through the Jquery toggle action to create animated effects

While trying to create a search field with the click function (animate), I noticed an issue similar to what is seen in this example: . Whenever the search icon is clicked, it moves up and down unexpectedly, and I am uncertain as to why this behavior is occ ...

javascriptjqueryhtmljquery-animate

Enhance the v-autocomplete dropdown with a personalized touch by adding a custom

Currently utilizing the v-autocomplete component from Vuetify, and I am interested in incorporating a custom element into its dropdown menu. You can see the specific part I want to add highlighted with a red arrow in this screenshot: This is the current s ...

javascripthtmlvue.jsautocompletevuetify.js

Retrieve the element that is currently being hovered over within the same nested selector

I am facing a challenge in selecting the currently hovered element with a nested selector. The ".frmElement" class is used as the selector. When I hover over the ".frmElement" element at a certain level, all the previous selector elements display the hover ...

javascriptjqueryhtmlcss