Struggling to align navbar to the center using css

I am having trouble centering this bootstrap code...

I have tried using 

float: center, text-align: center
but it is not working.

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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>
      </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

htmlcssbootstrap-4

Answer №1

Include the property justify-content: center; in the styling of your navbarNav container.

Answer №2

Bootstrap offers a convenient helper class, justify-content-center, that can be added to the navbar.

justify-content-center

To learn more about this feature, check out the documentation here: http://getbootstrap.com/docs/4.1/utilities/flex/

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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>
      </button>
  <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Answer №3

Give this a shot and see if it works. Check out the code snippet provided:

.navigation-bar {
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;
}

.navigation-bar > li {
    display: inline-block;
    float:none;
}

.navbar-logo {
    margin-top: -2px; /* adjust to match nav-items height */
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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="navigation-bar">
      <li>
        <a class="navbar-logo" href="#">Navbar</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

To view the result, switch to full page mode.

Answer №4

<nav class="navbar navbar-expand-lg navbar-light bg-light custom-design">

remove the current line and add the following line instead

<nav class="navbar navbar-expand-lg navbar-light bg-light custom-design text-center" style="display:block;">

Fingers crossed, let's see if it works as expected.

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

CSS selector for the 'second next' element, checkboxes and labels within MVC forms

I found a helpful resource that explains how to style checkboxes using CSS. It suggests using the + selector to target the label immediately following the checkbox: input[type="checkbox"]{} input[type="checkbox"] + label {} However, I encountered an issu ...

htmlcssasp.net-mvc

The background image on my CSS is not showing up

I just added the file to my git repository and shared the link here. Is there a specific way to do this? html{ background-image:url("https://github.com/vindhya97/images/blob/master/pinkbackground.jpg"); } ...

htmlcss

Struggling with Bootstrap 5: Issue with full width footer display

Struggling with making the Bootstrap footer in full width? I've been using the Bootstrap footer example but can't seem to figure out how to achieve a full-width footer. https://i.sstatic.net/uGOdz.png <link rel="stylesheet" href="https://c ...

htmlcsstwitter-bootstrapbootstrap-5

Issues with the forward slash character

After creating a form and submitting it, I noticed that it would just redirect back to the same form page. However, when I changed the value of a variable (to "m=files&a=addedit"), it kept creating a new forward slash symbol. Below is the code snippet ...

phphtml

Steps to create a basic multi-select dropdown menu with Select2

I have decided to integrate the select2 library into my HTML document because it offers a sleek pillbox style select control that fits well with my design. After carefully following the instructions in the Installation and Getting Started sections of the ...

javascripthtmljqueryjquery-select2cdn

Do typescript interfaces exist for defining CustomElement in HTML?

Currently, I am working on incorporating a web custom element using typescript. Upon my research, I have discovered that the custom element receives life cycle callbacks such as: connectedCallback() adoptedCallback() attributeChangedCallback() I am wonde ...

htmltypescriptcustom-element

jquery kwicks problem

I have been grappling with a coding problem for hours on end and I have hit a wall. Assistance is needed. On a staging page, the code was tested and found to be functioning properly. However, on the live page, the same code fails to respond as expected. I ...

javascriptjqueryhtmlcss

Performing a jQuery post request using AJAX and setting the content type

Greetings, here is the code snippet: <script type="text/javascript"> 14 $(document).ready(function() { 15 $('#find').click(function(){ 16 17 var amount = $(' ...

phpjqueryhtmlajaxpost

Display information from a .js file onto an HTML webpage

I'm completely new to the world of server-side development and I'm attempting to navigate it on my own. Currently, I have a server written in JavaScript using Express and I'm trying to display some content on my HTML page that was sent from ...

javascripthtmlnode.jsexpress

What is the process of invoking a Java method through AJAX on a website?

I am trying to figure out how to call the Java method getMessage() from a jar file whenever a button on my webpage is clicked. Can anyone help me achieve this? File name: index.html <!doctype html> <html> <head> <meta charset="utf-8" ...

javajqueryhtmlajax

React.js Material UI Dropdown Component

Is it possible to modify the behavior of the dropdown in Material UI Select? I would like to customize the appearance of <ul> so that it does not resemble a pop-up. My goal is for the selected item to be contained within the <li> element, simi ...

htmlcssreactjsmaterial-ui

Every time I try to load the webpage with the Django ModelForm, I keep encountering the "This field is required" error

I created a model named Announcement in my models.py file and also the corresponding form in forms.py. Next, I implemented a simple create view for it in my views.py and displayed it on the frontend using the django-crispy-forms package. However, every tim ...

pythonhtmldjangodjango-viewsdjango-forms

Access in-depth data by clicking on a map to get detailed information

Recently, I took on the challenge of managing a golf club website after the original creator had to step away. One urgent issue I need to address is fixing a malfunctioning flash animation that provides information about each hole on the course. My plan is ...

javascriptcsshtmldhtml

Extracting data types from XML and converting it into JSON

Below is the XML data that I am extracting: <ArticleIdList> <ArticleId IdType="pii">S0022-3956(14)00106-X</ArticleId> <ArticleId IdType="doi">10.1016/j.jpsychires.2014.03.024</ArticleId> <ArticleId IdType="pubmed">24755 ...

jqueryhtmlxmljsondom

Using a SASS watcher to keep an eye on every folder and compile them into a single CSS

I'm interested in setting up a folder structure like this: assets - scss - folder file.scss anotherfile.scss anotherfile.scss anotherfile.scss - anotherfolder file.scss anotherfile.scss anotherfile.scss ...

cssnpmsasswatch

Show basic HTML elements on a single page of an Angular Material web application

I am working on an Angular (6) web app with a customized theme using Angular Material. Currently, I am trying to incorporate a popup dialog that includes basic HTML elements like checkboxes, buttons, and inputs. Even though I have successfully displayed ...

htmlcssangularelement

Troubleshooting overflow problems when centering a UL menu with an unspecified width

Trying to create a demo where the scrollbars are removed when resizing smaller, but adding overflow: hidden causes issues with sub-menus. Demo Link HTML <nav> <ul> <li><a href="#">Menu Item</a></li> ...

htmlcssmenunavigation

Is there a way to automatically scroll vertically to a specific line in HTML?

Trying to explain this is a bit tricky. I am looking to add an element to the HTML that prompts the browser to scroll vertically to its location automatically when loaded, similar to an anchor. So: | visible area | | content html | | content html | ...

javascriptjqueryhtmlcss

"Unable to access data from 'POST' form using node.js results in 'undefined'

My task involves sending input data from an HTML page to my localhost server. In the HTML, I am using a "form" like this: <form action="/log-in", method="POST"> <h3 style='font-family: Antic Slab; font-size: 23px;'>Log in to ...

javascripthtmlnode.jsexpress

inserting picture within the code

Looking for some feedback on this: I decided to use a third-party image host to create the code (I've used them in the past). However, when I added the code to my page where I intended it to be (after verifying in Google Inspect), the image does not a ...

htmlimage