CODEWITHSUNDEEP
htmlcssbootstrap-5
Adam Farrow
Adam Farrow

Reputation: 77

Bootstrap 5 vertically center aligning elements in navbar

I currently am using bootstrap to create a navbar filled with links. One of the links I have is a button and the button is causing the other links to not vertically align properly.

body{
   
    background: rgb(27, 25, 25);
}


.btn{
    border-radius: 3em;

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adam Farrow </title>

    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<link rel="stylesheet" href="data/styles.css" type="text/css">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <div class="container-xxl">
            <a href="#" class="navbar-brand">
                <span class="fw-bold text-secondary">
                    Adam Farrow
                </span>
            </a>
                
            <button class="navbar-toggler button" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" 
            aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

        <div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link " href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#skills-link">Skills</a></li>
                <li class="nav-item"><a class="nav-link" href="#glider">Projects</a></li>
                <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
                <li class="nav-item ms-2 d-none d-md-inline">
                    <a class="btn btn-secondary" href="https://github.com/Adamfarrow1/">Github</a>
                </li>
            </ul>
        </div>
        </div>
    </nav>
    

    <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

As you can see if you run the code, it will have the items slightly unaligned.

I have tried using "text-center" on the ul tag surrounding the problem. As well as I tried creating a class and using "top = 50%" for the items inside the list.

Upvotes: 2

Views: 473

Answers (2)

JoQuery
JoQuery

Reputation: 91

I'd like to share the solution I was looking for when I found this topic. I was trying to find a way to align vertically all the links in the navbar because some of them were too long to stand on one line. My solution : use flex box :

.navbar-nav {
    align-items: center;
}

Upvotes: 1

Luigi Woodhouse
Luigi Woodhouse

Reputation: 391

use padding-bottom or padding-top : 2px to position your github link

Upvotes: 1

Related Questions