Aligning text in the center of a Bootstrap navbar

Seeking guidance on how to center text within my Bootstrap navbar with the following structure:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
         <div class="container-fluid text-center">
            <button type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fas fa-align-left" aria-hidden="true"></i>
            <span>Toggle Sidebar</span>
            </button>
            
               <div class="nav navbar-nav" id="loggedInCheck" style="margin:0 auto;text-align: right !important;display: flex;flex-direction: column;justify-content: right;">
               
                     <h3>Text To Center</h3>
                  
               </div>
            <ul class="nav navbar-nav ml-auto " id="loggedInCheck"
">
               
               <span class="mr-2">
                  <div class="input-group">
                     <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">
                           <div class="mx-auto d-flex">
                              <strong id="navUserName">Joe Schmoe</strong>
                              <a href="/logout"><strong>&nbsp;&nbsp;<i class="fas fa-sync" aria-hidden="true"></i></strong></a>
                           </div>
                        </span>
                     </div>
                     <select class="defaultPrinter form-control "><option>School</option><option>College</option><option>Office</option></select>
                  </div>
               </span>
               
               
               
            </ul>
            
         </div>
      </nav>

In order to align the h3 element containing the text "Text To Center", I am exploring options that do not involve absolute positioning due to potential issues on mobile devices where navigation items may overlap. My attempts to use text-align:center and shifting the text to the right have not yielded the desired result.

htmlcsstwitter-bootstrap

Answer №1

delete ml-auto from #loggedInCheck and substitute your inline style with mx-auto

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
         <div class="container-fluid text-center">
            <button type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fas fa-align-left" aria-hidden="true"></i>
            <span>Toggle Sidebar</span>
            </button>
            
               <div class="nav navbar-nav mx-auto " id="loggedInCheck">
               
                     <h3>Text To Center</h3>
                  
               </div>
            <ul class="nav navbar-nav " id="loggedInCheck">
               
               <span class="mr-2">
                  <div class="input-group">
                     <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">
                           <div class="mx-auto d-flex">
                              <strong id="navUserName">Joe Schmoe</strong>
                              <a href="/logout"><strong>&nbsp;&nbsp;<i class="fas fa-sync" aria-hidden="true"></i></strong></a>
                           </div>
                        </span>
                     </div>
                     <select class="defaultPrinter form-control "><option>School</option><option>College</option><option>Office</option></select>
                  </div>
               </span>
               
               
               
            </ul>
            
         </div>
      </nav>

Answer №2

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


        
          <nav aria-label="breadcrumb ">
              <div class="row mt-2">
                <div class="col-lg-4 col-md-4 col-5 ml-2"><button type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fas fa-align-left" aria-hidden="true"></i>
            <span>Toggle Sidebar</span>
            </button>
          </div>
                <div class="col-lg-4 col-md-3 col-6 "><h3>Text To Center</h3></div>
                <div class="col-lg-3 col-md-4 col-3 ml-5">
                  <ul class="nav navbar-nav ml-auto " id="loggedInCheck">
               <span class="mr-2">
                  <div class="input-group">
                     <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">
                           <div class="mx-auto d-flex">
                              <strong id="navUserName">Joe Schmoe</strong>
                              <a href="/logout"><strong>&nbsp;&nbsp;<i class="fas fa-sync" aria-hidden="true"></i></strong></a>
                           </div>
                        </span>
                     </div>
                     <select class="defaultPrinter form-control "><option>School</option><option>College</option><option>Office</option></select>
                  </div>
               </span>
               
               
               
            </ul>
                </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

How to create a scrolling background image using CSS

Is there a way to make the background image scroll along with the rest of the page? I tried using background-attachment: scroll; but it did not work as expected. Initially, the background image and logo are positioned correctly, but when the page is scro ...

htmlcssscrollbackground-image

Determine the specific cell involved in an HTML5 drag-and-drop interaction within a table

I've been experimenting with the HTML5 drag and drop functionality in an Angular project. Here's the setup I'm working with: A container containing draggable 'objects' A table where users can drop the dragged elements Following ...

javascriptangularhtmlhtml5-draggable

What is the best way to utilize Django forms with a <select> value that is frequently used?

I am currently developing an application that enables users to interact with a database of information, including searching and saving entries. Within the search feature of the application, there are multiple fields where users should specify comparison o ...

htmldjango

An issue with type conversion arises in Visual Basic when trying to access data from an HTML

I'm currently working with an HTML table that allows for dynamically adding and deleting rows with text-input's in the cells using JavaScript. Instead of ASP.NET TextBox controls, I am sticking to traditional HTML because I believe rows containin ...

htmlasp.netvb.net

What is the best way to place a div in a static position for my specific situation

I need help positioning container 2 statically below container 1. The navigation bar is fixed, so it will be outside the flow of the page while container 1 is relative and will appear on top as if the navigation doesn't exist in the flow. However, whe ...

htmlcss

What is the best way to showcase my divs in a masonry layout using flexbox?

I am attempting to design display divs in a masonry style using flex/flexbox. The layout must consist of a maximum of 2 columns, with each div having the same width (thus dividing into 2 columns equally) while varying in height based on their content. Some ...

htmlcss

The scroll header remains fixed in size despite being responsive

I've been struggling to resize a fixed header when the page is scrolled. Unfortunately, I'm having trouble getting the header to adjust its size as the scrolling happens. $(document).scroll(function() { navbarScroll(); }); function navbarSc ...

javascriptjqueryhtmlcss

The event listener for changing radio buttons

Imagine we have two radio buttons <input type="radio" value="val1" name="radio1" onChange="change()"/> <input type="radio" value="val2" name="radio1" onChange="change()&quo ...

javascripthtmljqueryreactjsdom

Load the div iframe when it is clicked

I'm looking for a way to optimize the loading of div elements on my website. Currently, when the page is loaded, all divs are also loaded but remain hidden until clicked. Is there a method to delay loading the content of a specific div until it's ...

htmliframe

Achieving proper form alignment through Bootstrap

Is there a way to create a form that looks like the one shown in the picture, where regardless of the length of the variable names (Name, Mobile, Gender, Age), all value receiving blocks are the same size and aligned vertically? My initial approach involv ...

jqueryhtmlcsstwitter-bootstrap

Align text to the left of a button with Bootstrap 4

Currently, I have two buttons stacked on top of each other. I'm attempting to include some text to the left of the bottom button, but I am encountering two obstacles: The first issue is that it creates a white round-ish shape around my top button w ...

cssbootstrap-4

center text above images in flexbox when page is resized

When resizing the page, I'm facing an issue where the links overlap with the images in a flexbox layout. It seems like the padding and margin between the images and links are not working due to them not being "related" or connected. I believe I need t ...

javascripthtmlcss

Font awesome icons 4 and 5 are displaying accurately

When utilizing Font Awesome, I am able to display 4 out of 5 icons correctly. However, the last icon (stackoverflow icon) does not appear: Here is the HTML code: <ul> <li><a href="#"><i class="xcon-facebook"></i></a> ...

htmlcssfont-awesome

Applying a consistent script with varying inputs on the same HTML page

Is it possible to create a JavaScript code that can be used across different sections of an HTML document? The goal is for the script to fetch data such as title, runtime, and plot from a specific URL request and insert this information into the appropriat ...

javascriptjqueryhtml

Angular 2: Triggering the "open" event for a Bootstrap dropdown

I am currently in the process of developing a directive that will trigger a Bootstrap dropdown to open when clicked and close it when the mouse leaves. Below is the code for the dropdown directive: import {Directive, HostBinding, HostListener} from ' ...

twitter-bootstrapangular

"Creating a dynamic Map using the HERE Maps API and adjusting its size: A step-by-step guide

I am currently working on a Website project and I am interested in incorporating an interactive map from HERE Maps that spans the entire screen under my navigation bar. How can I achieve this? After initially using Google Maps, I switched to HERE Maps due ...

javascriptcssapiresizemaps

Is it possible to achieve wordpress + nginx + https for just a single page?

I am facing a challenge with my WordPress site, which is hosted on Nginx running on Windows Server 2012 R2. I want to enable HTTPS on specific pages like /cart/, /my-account/, and /checkout/, but all the resources are still being loaded over HTTP, resultin ...

csswordpresssslnginx

Enhancing interactivity by incorporating GIFs upon clicking a JavaScript button

A JavaScript button has been created to generate Facts (gifs), with a desire to include a social media share option for platforms like Facebook below the GIF. The code snippet provided includes an array of GIF images and the functionality to display them u ...

javascripthtmlfacebook

What causes the Bootstrap navbar dropdown to be partially obscured in IE8?

While working on a specific project, I have encountered an issue where everything seems to function properly in newer browsers except for IE8 during testing. The dropdown menu is functional, however, it appears hidden behind the main content area labeled ...

jqueryhtmlcsstwitter-bootstrap

Display or conceal 5 divs simultaneously

A while back, I stumbled upon this amazing code that has been incredibly helpful. However, I am unable to locate the original author (whoever you are, THANK YOU)... http://jsbin.com/amituh/11/ It's truly awesome, but I would like to add another butt ...

jqueryhtmltoggle