How to center elements vertically in a navbar using Bootstrap 5

I am currently utilizing bootstrap to design a navbar featuring various links. One of these links is a button, which is causing alignment issues with the rest of the links.

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/bootstrap@" 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/bootstrap@" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

Upon running the code, it becomes apparent that the items are not properly aligned.

I have attempted to use "text-center" on the ul tag surrounding the issue, as well as creating a class and utilizing "top = 50%" for the items within the list.

Answer №1

For positioning your github link, consider using either padding-bottom or padding-top with a value of 2px

Answer №2

When I stumbled upon this topic, I finally found the solution I had been searching for. The problem I was facing was aligning all the links in the navbar vertically because some of them were too long to fit on one line. After some experimentation, I discovered that using flexbox did the trick:

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

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

Ensure that the textbox remains valid when the reset button is clicked in Bootstrap

After implementing the code for bootstrap textbox and textarea, I encountered an issue when using the reset button. When entering an invalid shop name followed by a valid address and clicking on the Reset button, it resets the form. However, if I then only ...

Choosing jQuery over JQuery Mobile for a standard web application to effectively manage different devices

Creating a Unique Web Application In the works is a unique web application, similar to Trello, that divides a page into columns where tasks/cards can be added and moved between them. This desktop-focused platform will feature an information column on the ...

Error TS2307: Module './tables.module.css' or its type declarations could not be located

Currently utilizing CSS modules within a create-react-app project and encountering an error within Google Chrome browser: https://i.stack.imgur.com/0ItNM.png However, the error appears to be related to eslint because I am able to close the warning modal i ...

Expanding Images with JQuery Accordion

I'm facing a problem where I need to include accordions on my website with images, but whenever the accordion is opened, the image ends up stretched. Is there a solution to prevent this from happening? Below is the code snippet I am using: [Fiddle] ...

My code seems to be experiencing issues with the carousel functionality despite incorporating Bootstrap

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <% campground.images.forEach((img,i)=> { %> ...

Create a variety of colors with a simple click

A form has been created for the footer where clicking on an input causes the text and border-bottom to transition from grey to white. Visit Code Pen HTML: <div class="footer"> <div class="footerContainer"> <form> <inp ...

Struggling to integrate an audio player specifically for mp3 files and feeling quite perplexed by the process

I'm struggling with implementing an audio player for a file sharing platform, specifically only for .mp3 files. I have successfully implemented a function for images (.jpeg and others), but I am unsure how to do the same for mp3 files. function is_au ...

Can I receive a PHP echo/response in Ajax without using the post method in Ajax?

Is it feasible to use Ajax for posting a form containing text and images through an HTML form, and receiving the response back via Ajax? Steps 1.) Include the form in HTML with a submit button. 2.) Submit the form to PHP, where it will process and upload ...

Getting the height of a group of classes using the style attribute

How can I retrieve the current height of 813px in jQuery from the "style" section? An example of F12 CSS is shown here: https://i.sstatic.net/4wFfR.jpg My attempt at achieving this is as follows: function HandleAccordionControlSizeChanges(isOpened) { ...

How to retrieve the content/value from a textfield and checkbox using HTML

I'm encountering an issue with my HTML code where I am unable to extract data from the HTML file to TS. My goal is to store all the information and send it to my database. Here is a snippet of the HTML: <h3>Part 1 : General Information</h3 ...

Problem with stacking order in Internet Explorer 7

Our current issue involves a z-index problem with a div that should be positioned above another specific div. The div in question, named (house-over-banner), is set to absolute positioning, while the one below it is relative. Interestingly, everything dis ...

Breaking free of the constraints of a 100% height container, UL escapes its

In both Chrome and Firefox, UL list items do not seem to adhere to the parent container's width of 100%. I attempted to use list-style-position: inside;, but unfortunately, that did not solve the issue: <html style="height: 100%"> <body styl ...

Move Picture with Click (like the action on Google Maps)

Currently on the lookout for some code that will enable me to manipulate a floor plan in a manner reminiscent of the one showcased at whitehouse.gov I am in the process of coding a website that would benefit from integrating a similar function with their ...

Tips on replacing a React component's styling with emotion CSS

Is there a way to incorporate the background-color:green style to the <Test/> component in the following example without directly modifying the <Test/> component? /** @jsx jsx */ import { css, jsx } from "@emotion/core"; import React from "r ...

Is there a way to have the headline gently fade in and subtly rise when the page loads using CSS?

Is it possible to make the headline fade in and move up slightly on the home page using CSS after the user lands on the website? For a visual reference, check out this example on . I know it can be achieved with translateY, but I have never tried it before ...

Does creating a form render the "action" attribute insignificant in an AJAX environment?

When submitting forms exclusively through AJAX, is there any advantage to setting the action attribute at all? I have yet to come across any AJAX-form guides suggesting that it can be left out, but I fail to see the purpose of including it, so I wanted t ...

Utilize PHP to Extract ID3 Tags from MP3 Files and Embed Them into HTML

While conducting some research, I stumbled upon a helpful resource: ID3 Functions. This guide is all about PHP and how to utilize ID3 functions in web development. I'm interested in learning more about how to incorporate this into a website so that: ...

A new version of Primefaces has been released, introducing a sleek button feature with

How can I utilize the Primefaces version 10 button with a Font Awesome icon, resizing the icon without displaying the words ui:button? A and B are tests that I can resize successfully, but they are not buttons. C and D are buttons where the icon is resize ...

What is the best way to line up the columns of various divs?

Is there a way to align the content of these different divs? I'm trying to match up the headers of each column with the corresponding items in the divs below. Can someone assist me in achieving this alignment? row-header-course should align with cou ...

What steps do I need to take in order to integrate an mpg video onto my

I am in need of embedding mpg (dvd compliant mpeg2) movie files onto my webpage. Unfortunately, I do not have the ability to convert these videos into any other format. This webpage is solely for personal use, so any solution would be greatly appreciated. ...