Is there a way to easily align the text of the links in the bootstrap navbar to the center when it collapses?

I'm having trouble centering the links in the dropdown menu.

Here is the code snippet:

<nav class="navbar navbar navbar-expand-lg fixed-top bg clean-navbar">
  <div class="container logo" style="position: relative;">
    <a class="navbar-brand text-left d-block float-left d-xl-flex logo" href="assets/img/kol-logoldpi.svg"><img class="kibrislogo" height="50" src='assets/img/kol-logoldpi2.svg' /></a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navcol-1">
      <ul class="nav navbar-nav ml-auto">
        <li class="nav-item" role="presentation"><a class="nav-link active" href="index.html">Packages</a></li>
        <li class="nav-item" role="presentation"><a class="nav-link" href="features.html">Campaigns</a></li>
        <li class="nav-item" role="presentation"><a class="nav-link" href="pricing.html">FAQs</a></li>
        <li class="nav-item" role="presentation"><a class="nav-link" href="about-us.html">Service Points</a></li>
        <li class="nav-item" role="presentation"><a class="nav-link" href="contact-us.html"><strong>CONTACT</strong></a></li>
        <li class="nav-item" role="presentation"><a class="nav-link" href="contact-us.html" style="color: rgba(207,14,14,0.5);">TR/ENG</a></li>
      </ul>
    </div>
    <img class="logo" style="position: absolute; right: -7%; height: 70px;" src="assets/img/kol-ccldpi.svg" alt="">
  </div>
</nav>

The alignment of the text seems off, it's shifted to the left.

htmlcssbootstrap-4

Answer №1

insert the bootstrap 4 class text-center into your ul

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


</head>

<body>
   <nav class="navbar navbar-full navbar-expand-lg navbar-light bg-light">
    <div class="container logo" style="position: relative;">
      <a class="navbar-brand text-left d-block float-left d-xl-flex logo" href="assets/img/kol-logoldpi.svg"><img class="kibrislogo" height="50" src='assets/img/kol-logoldpi2.svg' /></a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse" id="navcol-1">
        <ul class="nav navbar-nav ml-auto text-center">
          <li class="nav-item" role="presentation"><a class="nav-link active" href="index.html">Packages</a></li>
          <li class="nav-item" role="presentation"><a class="nav-link" href="features.html">Campaigns</a></li>
          <li class="nav-item" role="presentation"><a class="nav-link" href="pricing.html">FAQ</a></li>
          <li class="nav-item" role="presentation"><a class="nav-link" href="about-us.html">Service Points</a></li>
          <li class="nav-item" role="presentation"><a class="nav-link" href="contact-us.html"><strong>CONTACT</strong></a></li>
          <li class="nav-item" role="presentation"><a class="nav-link" href="contact-us.html" style="color: rgba(207,14,14,0.5);">TR/ENG</a></li>
        </ul>
      </div>
      <img class="logo" style="position: absolute; right: -7%; height: 70px;" src="assets/img/kol-ccldpi.svg" alt="">
    </div>
  </nav>
</body>

</html>

Answer №2

If you want to enhance your li element further, you can simply add an extra class to it:

<li class="nav-item navLink" role="presentation"><a class="nav-link" href="contact-us.html" style="color: rgba(207,14,14,0.5);">TR/ENG</a></li>

Then, you can apply specific styles using CSS:

.navLink{
   text-align: center;
}

Answer №3

Use the bootstrap class to create a responsive navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0 text-center">
      <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="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" tabindex="-1" >About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </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

I successfully developed a unique custom accordion feature in React.js, where the toggle functionality is fully functional. However, I am currently facing an

import React, { useState, useEffect } from "react"; import axios from "axios"; const Faq = () => { const [faq, setFaq] = useState([]); const [activeIndex, setActiveIndex] = useState(null); const fetchFaqs = async () => { ...

htmlreactjsapiaxios

jQuery causing trouble with AJAX in Rails

Currently, I am fetching a list of users from the controller side and generating the HTML code to append it. This is how I wrote the code: $.ajax({ type : "get", contentType : "application/json; charset=utf-8", url : "/users/sear ...

javascriptjqueryhtmlruby-on-railsajax

To activate two separate click events, one for an absolute element and another for the element positioned behind it, simply click on the desired absolute element to trigger both actions

Is it possible to trigger click events for both of these elements? position: relative container ELEMENT 1: standard div ELEMENT 2: position: absolute div In real life, element 2 is a transparent backdrop designed to capture clicks on top of the header ...

javascripthtmlcssreactjs

The hyperlink function is malfunctioning when used with the embed tag in both Internet Explorer and Chrome browsers

<param id="movie" name="movie" value='<%= Me.ResolveUrl(Me.BannerPath)%>'> <a href='http://<%= BannerTargetUrl%>' target="_blank"> <embed wmode="transparent" src='<%= Me.ResolveUrl( ...

csshtmlhyperlinkcross-browser

What defines a quick or sluggish load time when it comes to a webpage?

Recently, I constructed a webpage with multiple JavaScript elements incorporated. I am wondering what constitutes a fast load time versus a slow one. Currently, my load time is averaging around 490ms with four different JavaScript components. Is this con ...

javascripthtml

How to declare WinJS.xhr as a global variable in a Windows 8 Metro app

Currently, I am developing a Windows 8 Metro app and facing an issue with a hub page. The problem arises when pushing data dynamically from an XML API using two WinJs.xhr("url") calls; one for headings and the other for section datas. When merging both W ...

javascripthtmlwinjs

Issues with CSS rendering have been encountered on the Facebook page

I'm experiencing an issue with the rollover CSS on Facebook's rendering engine. I'm not sure if I made a mistake in my code or if there are limitations with certain CSS properties on custom Facebook pages. Here is the code I am using: <l ...

htmlcssfacebookfbml

bootstrap - proceed to the following column

My goal is for the website to have a specific layout when it reaches the -lg- size: Desired result: https://i.sstatic.net/8tBiR.png However, the actual result is different: Actual result: https://i.sstatic.net/jA9rP.png <div class="container"> ...

twitter-bootstraptwitter-bootstrap-4bootstrap-4

How can I effectively retrieve the JWT in a node environment?

I've successfully set up JWT authentication using Node.js. After the user signs in, Node.js generates a JWT and sends it back to be stored in the localStorage. However, I've encountered an issue when trying to access this token within the express ...

javascriptangularjsnode.jshtml

CSS - Is there a way to alter the arrangement of DIVs depending on the size of the screen?

My inquiry pertains to a CSS layout. I currently have 3 divs positioned in a horizontal line next to each other, as depicted below... div1 div2 div3 I am aiming for the divs to reorganize themselves as the screen size decreases. In one scenario, they sho ...

htmlcsslayoutalignment

Attempting to incorporate Google charts into a div using jQuery's load function

Trying to incorporate a basic Google chart using jQuery .load functionality to transfer the chart into another webpage with a specific containing DIV: <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi">< ...

javascriptjqueryhtmlcharts

The functionality of CSS Inline Block display is not displaying inline as expected

I have the following HTML and CSS code, but I am having issues getting the dropdown to display inline. .project Type{ display: inline-block; } <form class="smart-form"> <div class="row"> <div class="col col-sm-6 col-md-2 col-lg- ...

htmlcssangularformsbootstrap-4

How can you achieve the effect of "hovering over an image to automatically start playing a muted video within the image itself"?

[![enter image description here][1]][1]I am working with WordPress and Elementor, and I want to create a hover effect where an image triggers a muted video to play within the image area on mouseover. The video should stop playing when the mouse is not hove ...

javascripthtmlcsswordpresselementor

Tips for connecting 2 Bootstrap 5 carousels

I currently have 2 Bootstrap 5 carousels (carousel-a & carousel-b) on the same page and I want them to be synchronized with each other. I believe this can be achieved using JavaScript, but I am not very familiar with it. Below is the structure of carousel- ...

javascripthtmlbootstrap-5

Editing HTML on an ASPX website can be a breeze with

Hello there, I've been tasked with editing a website for a client, but the site is located on a local web server and was designed using aspx. As I review all the files, I am encountering difficulty finding the HTML code associated with runat=server w ...

c#htmlasp.netcode-behind

What is the best way to stop vertically aligned elements from overlapping the navbar in Bootstrap 4?

I have successfully aligned my content vertically, but I encountered an issue when resizing the browser window vertically - the aligned content overlaps with the navbar. What I want is for the vertically aligned content to stop at the navbar. I have exper ...

csstwitter-bootstrapflexboxbootstrap-4

Iterate through an HTML table and transfer matching items along with their corresponding calculated amounts to a separate table

<html> <body> <div> <table border="1" id="topTable"> <thead> <th>Item</th> <th>Sold</th> </thead> <tbody id="topTableBody"> <tr> ...

javascriptjqueryhtml

hide the side menu automatically - wordpress

is the official website created using a WordPress platform. Upon visiting the site, you will immediately notice a prominent "showcase" banner positioned right below the navigation bar. On the right side, there are additional posts that users can choose t ...

htmlcsswordpress

numerous sections within a solitary webpage

I need to implement multiple tabs on a single page, how do I modify the code to make this possible? Take a look at the codepen for reference. Here is the jquery code I have written so far: var tabs = $(".tabContainer ul li a"); $(".tabConten ...

javascriptjqueryhtmlcss

Is there a way to keep my fixed footer container from moving while zooming in and out on a webpage

Is there a way to prevent the bottom text from shifting when zoomed in or out on the page? The rest of the content remains stable, but due to using position:absolute for this section to stay at the bottom of another div (content), it causes movement. #con ...

htmlcsslayoutpositioningabsolute