Customized Bootstrap navigation bar

I am a newcomer to Bootstrap and I'm attempting to create a three-column navigation menu with the nav-links centered in the middle. While using grids or flexbox, I could easily accomplish this in five minutes. However, for some reason, I am struggling to get the nav-links centered! Here is a picture for reference.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img src="/resources/images/Babyboom_logo_main.png" width="200" height="50"  alt="BabyBoom logo" class="navbar-brand">
<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>
    </button>
    <col>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
    <a class="nav-link" href="#">Sessions</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div class="col-sm">
<a class="btn btn-primary float-right" href="#" role="button">Book Now</a>
</div>
</div>
</nav>

javascripthtmlcssbootstrap-4

Answer №1

Consider using mx-auto in your code. Here is an example that should help you:

<html>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1">
              <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47252828333433352637077269766974">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
              <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb9b4b4afa8afa9baab9beef5eaf5e8">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
              <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21424e534461130f10110f13">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
              <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaea3a3b8bfb8beadbc8cf9e2fde2ff">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" ></script>
              <div class="row ">
                 <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <img src="/resources/images/Babyboom_logo_main.png" width="200" height="50"  alt="BabyBoom logo" class="navbar-brand">
                    <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>
                    </button>
                    <div class="col-md-9 ">
                       <div class="collapse navbar-collapse" id="navbarSupportedContent">
                          <ul class="col-md-3 navbar-nav mx-auto">
                             <li class="nav-item">
                                <a class="nav-link" href="#">Sessions</a>
                             </li>
                             <li class="nav-item">
                                <a class="nav-link" href="#">Contact</a>
                             </li>
                          </ul>
                       </div>
                    </div>
                    <div class="col-md-2">
                       <a class="btn btn-primary float-right" href="#" role="button">Book Now</a>
                    </div>
              </div>
              </nav>
              <!-- end snippet -->
</html>

Answer №2

There are two ways to accomplish this task

  1. One way is to include the mx-auto class in the ul tag like so:

        <ul class="col-md-3 navbar-nav mx-auto">

  2. Another option is to add justify-content-center to the collapse div

     <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">

I hope one of these methods works for you :)

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

Exploring the functionality of the instanceof operator in Javascript

I'm currently developing a Node.js application and the project structure is as follows: [Project Folder] | |---[plc] | |--- plc.js | |--- scheduler.js | |---[source] | |--- source.js | |---[test] |--- test.js Th ...

javascriptnode.jsinstanceof

What could be causing the event listener to not be triggered?

I'm having an issue with a simple code that is supposed to display an alert box when a hyperlink is clicked, but it's not working. I believe the script is not being called. Can someone help me figure out what's wrong? Here is the HTML code: ...

jqueryhtml

Multiple occurrences of trigger events were detected when loading ajax content

In a div I have embedded a paragraph and a button as shown below: <div id="my_div"> <p>This is a paragraph</p> <button class="my_btn">Click here!</a> </div> The content within the div is dynamically loaded via ...

javascriptajaxeventsjquery

One way to display GIFs sequentially without preloading them is by using JavaScript

On my website, I'm trying to display five animated gifs sequentially. I want gif2 to appear and start its animation only after gif1 has finished its animation. However, the code I'm using is giving me some unexpected behavior. While it works corr ...

javascriptjqueryanimationgif

Integrating Braintree with Angular for accepting Android Pay transactions

Currently facing a challenge with Braintree that I need help resolving. I have successfully set up Braintree to generate my client_token using my API, and created the drop-in feature as a test. Here is how I implemented it: (function () { 'use st ...

javascriptandroidangularjsbraintree

Call a function of a javascript object from inside a callback function

In a user script, I have defined the MyClass and its methods as follows: function MyClass() { this.myCallback = function() { alert("MyClass.myCallback()"); }; this.startRequest = function() { GM_xmlhttpRequest({ &a ...

javascriptcallbackjavascript-objects

Tips for successfully passing an object with a list property in an ajax request

I have encountered a similar problem to This previous question, but I am struggling to implement the solutions provided. I am unsure of where to include the ModelBinder code mentioned in the responses, so I will explain my issue here. I am working with a s ...

javascriptc#jqueryasp.net-mvccart

How to efficiently create a unique object on MongoDB during the first instance

In the project I'm working on, there is a feature where a user can create a safe by visiting /mysafe. However, I want this safe to be created only once when they first visit the page. Subsequent visits should redirect them to /mysafe/theidofit. Have ...

javascriptmongodbexpressmongooseejs

The color of the link remains blue when using Firefox

Check out my website at kenastonchiropractic.com When viewing the site in Chrome, the "Home" link remains the same color as the other links and they all turn white when hovered over. However, in Firefox, the "Home" link stays blue even after being clicked ...

htmlcssfirefox

I am having trouble with my jQuery wrap function and it is not functioning correctly

I'm having trouble with implementing the jQuery wrap function. (function ($) { $.fn.customWrap = function () { applyWrapper(this); return this; }; function applyWrapper($element) { var $input = $('<input&g ...

javascriptjqueryplugins

Speed up - Handle alias resolution with module federation

Currently import federation from '@originjs/vite-plugin-federation'; import react from '@vitejs/plugin-react-swc'; import dns from 'dns'; import path from 'path'; import { visualizer } from 'rollup-plugin-visual ...

javascriptreactjsnext.jsvite

index() jQuery function is not

Upon clicking on an element with the class 'sections', I expect to see an alert displaying its class index, however, it appears to be showing an incorrect number. For example, if I click on the first div element with the class 'sections&apo ...

javascriptjquery

Troubleshooting JavaScript for Sidebar Disappearance due to marginRight and display CSS Issue

I need to adjust the layout of my website so that the sidebar disappears when the window is resized below a certain width, and then reappears when the window is expanded. Here is the HTML code: <style type="text/css"> #sidebar{ width:290 ...

javascriptjquerycsshidesidebar

Promise.allSettled() - Improving resilience through retry mechanisms for concurrent asynchronous requests

TL;DR: I'm seeking advice on how to handle multiple promise rejections and retry them a specified number of times when using Promise.allSettled() for various asynchronous calls. Having come across this article: I was intrigued by the following state ...

javascriptnode.jstypescriptpromisees6-promise

Grid within a grid, spanning the entire width of the screen

After taking a glance at the screenshot provided below, I am striving to achieve the design labeled as "Lg" utilizing the Grid component from Material UI. The box labeled with the number "3" has been fashioned by employing a grid configuration of 9 by 3 O ...

cssreactjsgridmaterial-ui

VueJS - Input Image Display Issue Causing Browser Slowdown

I'm experiencing some issues with my VueJS component that includes a file input and displays an image afterwards. Strangely, this is causing my web browsers (both Firefox and Chromium) to freeze up and use massive amounts of CPU. I tried switching to ...

javascriptimagefirefoxvue.jschromium

Solve the issue of aligning two contents side by side using Bootstrap

I'm struggling to display two content items in one row. Here's my code snippet: <div class="row"> <div class="form-group"> <div class="col-lg-1"> <label>Insured First ...

htmlinputbootstrap-4

What is the best way to modify the identifiers of the elements in the 2D matrix using JavaScript?

Hello, I've been working on a program that allows users to add or delete nodes at any index within a 2D array. However, I'm currently only able to retrieve the index of the clicked element, not all of them. How can I manipulate the IDs of this 2D ...

javascriptreactjsmultidimensional-arrayredux

Tips for adding spacing when the sidebar collapses and expands in a React application

I am attempting to achieve a layout where the body adjusts its space when the sidebar collapses and expands. Here is how it appears when the sidebar expands: see expanded sidebar here And this is how it looks when the sidebar collapses: see collapsed s ...

javascriptreactjslayoutnavbarsidebar

Problem: Toggle functionality not working properly in JavaScript

As a beginner, I am facing an issue with multiple toggle buttons. They work fine individually, but when nested within each other, only one toggle button works. After some research, I realized that I need to make adjustments to my JavaScript code. However, ...

javascriptphpjqueryhtml