Tips for aligning a single item to the center in a Bootstrap navigation bar that has the majority of items on the right

I am attempting to center the text "Welcome:" within the navbar without center aligning the entire navbar. I want the navbar to remain right aligned, but only the "Welcome:" portion should be centered.

Here is what I have tried so far...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="StyleSheet.css">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2825253e393e382b3a0a7f647b9b7f6470b7f"><?php echo<span><span id="decode">[email protected]</span></span></a>/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="images/logo.jpg" />
    <title>My Title</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light ">
        <div class="container-fluid">
            <a class="navbar-brand" href="#"><img class="img-fluid logo" src="images/logo.png"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-center" id=" collapsibleNavbar">
            <ul class="navbar-nav">

            <li> <p>Welcome<p/></li>
            </ul>

            </div>

            <div class="collapse navbar-collapse justify-content-end" id=" collapsibleNavbar">
                <ul class="navbar-nav">
                
                    <?php
                    session_start();
                    extract($_POST); 

                    function Logout() {
                        session_destroy();
                        session_unset();
                        header('Location: index.php');
                        exit();
                    }

                    if (!isset($_SESSION['user'])) {
                        echo "<li> <a class='nav-link' href='Login.php'>Log In</a></li>";
                    } else {
                        echo "<li> <a class='nav-link' href='?Logout'>Log Out</a></li>";
                    }

                    if (isset($_GET['Logout'])) {
                        Logout($_GET['Logout']);
                    }
                    ?>
                </ul>
            </div>
        </div>
    </nav>

Answer №1

To ensure equal width distribution, apply the col-xs-6 col-md-4 classes to all three sections so that each occupies 33.3% of the space.

<!DOCTYPE html>
<html lang="en>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1>
    <link rel="stylesheet" href="StyleSheet.css">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d2f2222393e393f2c3d0d78637c637e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="images/logo.jpg" />
    <!-- Required meta tags -->
    <title>My Title</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light ">
        <div class="container-fluid">
            <a class="col-xs-6 col-md-4" href="#"><img class="img-fluid logo " src="images/logo.png"></a>  <!-- Here -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse col-xs-6 col-md-4 justify-content-center" id=" collapsibleNavbar"> <!-- Here -->
            <ul class="navbar-nav">

            <li> <p>Welcome<p/></li>
            </ul>

            </div>

            <div class="collapse navbar-collapse col-xs-6 col-md-4 justify-content-end" id=" collapsibleNavbar"> <!-- Here -->
                <ul class="navbar-nav">
                <li>Login</li>
                </ul>
            </div>
        </div>
    </nav>
                </body>
                </html>

P.S: The php code has been removed for a clear code snippet preview. Please remember to re-add it.

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

Hovering Div Issue

I have two divs named me and bubble nested within another div called holder. I am trying to trigger an action when a user hovers over the holder div. Strangely, the action works properly when I hover over me, but it doesn't seem to register when I hov ...

Tips for converting each item within an array into its own separate element

https://i.sstatic.net/Dxj1W.pngI currently have an array of objects that I am utilizing to generate a table in Angular. The table is functioning properly and successfully displays the data. However, I now have a requirement to enable editing for each indiv ...

Arranging various s:select dropdowns for inline display styling

I have a form with three consecutive struts2 tags. Upon rendering the page, the s:select tag is automatically converted to the HTML code at the bottom. The issue arises when I attempt to style the form in order to display these dropdowns horizontally. Unf ...

Is there a translation issue affecting Chrome version 44?

Recently, Chrome 44 (44.0.2403.89 m) was released and I've encountered some issues with the translate3d feature (on both Mac and Windows versions). This problem is impacting plugins such as fullPage.js and consequently affecting numerous pages at th ...

Ways to navigate to a different page using HTML response from an AJAX request

After receiving an HTML document as a response from an AJAX call, I need to create a redirection page using this HTML response. Can anyone provide guidance on how to achieve this? ...

Create Stunning Half-Brick Image Layouts Using HTML and CSS

Can anyone offer advice on creating complex image layouts such as the half-brick pattern using HTML, CSS, and jQuery? I am looking to be able to rotate and scale the image as well. The background-image CSS property does not seem to support scaling. I have ...

Countdown malfunction: wrong date displayed

Utilizing the Countdownjs library in my project is resulting in an incorrect day count. Incorporating AngularJS, here is the custom directive I've implemented for the countdown: .directive('tempoPercorrido', function($interval){ ret ...

The most effective way to align text in a right-to-left language is by utilizing the text-align property with a

If the project is in a right-to-left language (such as Persian or Arabic), which method is preferable for setting text-align: right and direction: rtl? Option 1: Implement globally, for example: body * { direction: rtl; text-align: right; } ...

The hamburger menu unexpectedly appears outside the visible screen area and then reappears at random intervals

My website has a hamburger menu for mobile devices, but there's a problem. When the page loads on a small screen, the hamburger menu is off to the right, causing side scrolling issues and white space. I thought it might be a CSS problem, but after exp ...

Tips for maintaining an open side menu

I'm having trouble keeping the side menu open when a user clicks on one of the child menu items. Ideally, I want section 1 to display section 2 content when hovered over, and keep both sections open even when section 2 is clicked. The only time they s ...

Safari Glitch in Bootstrap 4

For a simplified version, you can check it out here: https://jsfiddle.net/dkmsuhL3/ <html xmlns="http://www.w3.org/1999/xhtml"> <title>Testing Bootstrap Bug</title> <!-- Bootstrap V4 --> <link rel="stylesheet" href="https://m ...

Is It Always Necessary to Specify a Width and Height for an Image?

Is it necessary to specify both the Width and Height of an image on a webpage for consistent display across all browsers, or is specifying just one sufficient? While it may appear fine on certain browsers, I want to double-check for accuracy. Appreciate ...

Steps for recognizing and navigating a hyperlink, and subsequently extracting information from a different webpage using BeautifulSoup

If only I could swiftly extract a title from a webpage, exhibit the title, move on to another page by following a link, acquire the title from that new page, and ultimately showcase the second title. The tasks for steps (1) and (4) are essentially identic ...

Is there a way to shift the map to the right side without disrupting the text placement?

please provide image description Here is the code snippet: <div class="row w-100"> <div class="col-lg-6 my-4 offset-lg-1"> <iframe src="#" width="600" height=&q ...

Replicate and $(document).ready()

My form has required fields that need to be completed. To alert users about blank fields, I have implemented the following code: $(document).ready(function() { $('input.required:text').focus(function() { $(this).css({'background ...

Floating elements overlapping fixed elements

I am currently in the process of developing a mobile application and encountering an issue with relative divs overlapping the top and bottom headers fixed with a z-index. Despite my attempt to resolve this by adding a z-index to the relative div, the probl ...

My table elements are automatically being populated with <tr> elements thanks to Javascript

Upon viewing the screenshot: https://i.sstatic.net/Pwv2v.png it is evident that each element is placed within its own tr. My preference is to have each element contained in a td and then wrap everything within a single tr. Here is the updated HTML stru ...

Using a `right: 0` value will not be effective when using absolute positioning

Currently, I am in the process of developing a website utilizing Bootstrap 3.3.6. After going through a tutorial on how to create a responsive banner slider, I found this resource helpful: http://www.jqueryscript.net/slider/Full-Width-Responsive-Carousel- ...

Looking to extract specific information from a webpage using VBA

I'm trying to extract the text 'Catalog Manager/ Sales' & 'EOL (product/component)' from the view source tab using VBA. Here is an excerpt of the view source code: <tr> <td nowrap="true" valign="top" width="165px" cl ...

Flask-WTForms QuerySelectField not displaying properly when rendered with Bootstrap causing <select> HTML tag issue

I am facing an issue while constructing a Flask form that includes a QuerySelectField. Despite having everything in place, Bootstrap is displaying the <select> as if it were a text input field. Upon inspecting the page source, I noticed that the fie ...