How to center only one item in boostrap nav where most items are on the right

Question

I'm trying to put "Welcome:" in the center of the navbar. I do not want the nav bar to be center aligned. I want it to be right aligned as it already is but I just want the "Welcome:" portion to be in the center.

This is what I've 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/bootstrap@5.1.3/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="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>

```Nav``` is block level element and it takes the full width of the page. If you want it to be right aligned then you have to put it inside a parent element and align the ```nav``` right aligned using ```text-align``` or ```flex``` on parent element — Yash Sharma, Apr 25 '22 at 06:42
Is Welcome just that, a simple text, or does it indeed need the struture of being in an unordered list? It all looks a bit complex for what it is trying to do. — A Haworth, Apr 25 '22 at 06:57

score 1 · Accepted Answer · answered Apr 25 '22 at 06:51

Try adding col-xs-6 col-md-4 classes to all three sections so that each section gets equal width of 33.3%.

<!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/bootstrap@5.1.3/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: Removed php code just to show the preview above in the code snippet. Please don't forget to add that.

How to center only one item in boostrap nav where most items are on the right

1 Answers1