Ways to position Bootstrap 4 navbar elements at the bottom

Struggling to adjust the alignment of the text in the navbar items using Bootstrap 4? My initial thought was to align them at the bottom of the ul and then position the ul accordingly, but I'm facing challenges with both. The objective is to have the text roughly at the same height as the brand logo:

https://i.sstatic.net/2ZafH.png

I've come across some solutions, but most are for Bootstrap 3 or fail to work for reasons unbeknownst to me.

Here is a snippet of HTML code:

<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
    <a class="navbar-brand" style="font-family: sans-serif; font-weight: 800; font-style: italic; font-size:xx-large;">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item" >
                <p style="vertical-align:bottom;" >Test</p>
            </li>
            <li class="nav-item<?php addActiveClass('/index.php'); ?>">
                <a class="nav-link" href="index.php">Test</a>
            </li>
    <li class="nav-item d-none d-md-block"><img src="" id="profileImage" height="40" width="40" style="margin-right: 10px; border-radius: 5px;"></li>
  </ul>
</div>

Using this bootstrap theme and the following CSS example:

.navbar
{
    padding:0rem 0.75rem;
}
.navbar-brand
{
    padding: 0;
    margin:0;
}

  .navbar-nav > li
    {
        line-height: 36px;
        padding: 0;
        margin: 0;
        background: red;
    }

  .navbar-nav > li > a 
    {
        padding: 0;
        margin: 0;
        background: red;
        vertical-align: bottom;
    }
    .navbar-nav > li > p 
    {
        padding: 0;
        margin: 0;
        background: yellow;
        vertical-align: bottom;
    }

For a complete example, check out the link below: https://jsfiddle.net/d6n5z3gb/8/

Answer №1

To make the items align to the bottom in the navbar-nav, simply add align-items-end...

<ul class="navbar-nav align-items-end ml-auto">
    <li class="nav-item" >
    </li>
</ul>

Additionally, it's recommended to remove the custom line-height style from the following CSS code snippet...

.navbar-nav > li > a 
{
    padding: 0;
    margin: 0;
    background: red;
    vertical-align: bottom;
}

To see the changes in action on Codeply, click here:

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

Tips for avoiding accidental unit conversion in jQuery

Imagine having the following code: var $element = $('<div/>'); $element.css("margin-left", "2cm"); console.log($element.css("margin-left")); When tested in Chrome, it doesn't return anything, but Firefox shows "75.5833px". Any sugges ...

Can someone explain why my button icons are not aligning to the center properly?

I have a small issue with the icons I pulled from react-icons - they appear slightly raised within the buttons. How can I position them in the middle? That's my only query, but I can't post it alone due to mostly having code in my post. What an ...

What is the best way to have three divs displayed in a row - either all inline or all block, without having two displayed inline and one displayed

I am facing an issue with a set of three inline divs that need to be displayed either in a row or in a column if they do not fit within their container width. In cases where the container is too narrow for them to fit in one row, but not narrow enough to c ...

Can you use "or" or "not" syntax with CSS input type selectors?

In the world of programming, if they actually exist, Suppose I have created an HTML form with the following input fields: <input type="text" /> <input type="password" /> <input type="checkbox" /> I wish to style all input fields that a ...

Unveil Secret Divs with a Click

I am in search of a way to display a hidden div when I click on a specific div, similar to the expanding images feature in Google's image search results. I have made progress with my limited knowledge of javascript, as shown in this CodePen: http://co ...

Utilize Bootstrap and Flat UI to enhance the design of a div, or duplicate the styles to apply to the navbar

My navigation bar was created using Bootstrap and Flat UI on top of it. However, when I try to incorporate bootstrap+flat ui into another HTML+CSS file that I have, the hexagons end up looking distorted. It seems like my navigation bar only works with flat ...

Unable to apply CSS styles to a form input using Ajax

Alright, so I've got this Ajax form that successfully fetches the data and displays it in #register_msg. However, I'm also trying to apply some styles to the input forms. Here's my Ajax code, along with the form. But for some reason, the st ...

Troubleshooting: Header Appears Slightly Below the Top of the Screen in CSS/HTML

Despite setting padding: 0; and margin: 0;, the div always appears below the top of the browser, without touching it. Below is the snippet of code: html, body { margin: 0; padding: 0; } .nav>ul>li { display: inline-block; padding: 0px 25 ...

What is the best way to target and style anchor links in CSS that are not empty?

Hi there! I am on the hunt for a CSS selector that will target all anchor links that are not empty and contain content. I currently have a selector to identify all links with an anchor attribute, like in this example: a[href*=\#] { background-co ...

Is there a way to ensure my function runs as soon as the page starts loading?

My goal is to have a function execute as soon as a person opens my page, without requiring any interaction. The function should trigger on page load, rather than waiting for a click event. Additionally, I want the function to repeat every 90 seconds. I&apo ...

I'm having trouble getting the footer to stay at the bottom of my website

Struggling with positioning my footer at the bottom of my website, I've tried various solutions posted by others but they don't seem to work for me. I've experimented with different methods like using 'Bottom: 0;' or placing my fo ...

Angular ensures that the fixed display element matches the size of its neighboring sibling

I have a unique challenge where I want to fix a div to the bottom of the screen, but its width should always match the content it scrolls past. Visualize the scenario in this image: https://i.sstatic.net/i7eZT.png The issue arises when setting the div&apo ...

Is the "sticky footer" in CSS causing issues with the percentage height of nested divs?

My "main-section" div is designed to inherit its height from the parent div, known as the "wrapper." The wrapper div, in turn, takes its height from the body of the document. Both the HTML and body tags are set with a height of 100%. To implement the ...

Removing an Element According to Screen Size: A Step-by-Step Guide

Currently, I am facing a dilemma with two forms that need to share the same IDs. One form is designed for mobile viewing while the other is for all other devices. Despite using media queries and display: none to toggle their visibility, both forms are stil ...

CSS is effective when styling table elements such as 'tr' and 'td', but encounters issues when trying to include 'th'

I have a variety of tables on my website, most of them without borders. However, I want to add borders to some of them. In my CSS, I am using a specific class for those tables: table { padding: 2px; border-collapse: collapse; table-layout: auto; te ...

Steps to troubleshoot a scrollbar problem while applying flexbox in CSS

I'm currently working with a front-end framework that utilizes a flex layout. In my development of an admin page, I have included sections for the sidebar, header, and main. My objective is to ensure that the sidebar and the header + main sections fun ...

The peculiar characteristics of the dragLeave event in various web browsers

I observed a peculiar behavior while working with drag events in Internet Explorer 11. It seems that adding a 'width' property to the elements triggers the dragLeave event, whereas without it, the event does not fire. Can anyone shed light on why ...

Manipulating Width in CSS

I am facing a challenge with the HTML code below where an automated software inserts the initial CSS style g2f0 <div class="linelevel row"> <div class="g2f0 col-sm-6 form-group"> <label for="name">Name</label> < ...

What could be the reason for the datepicker popup failing to appear?

I am currently working on developing a custom bootstrap datepicker directive: app.directive('datePicker', function ($compile, $timeout) { return { replace: true, restrict:'E', templateUrl: 'datepicker.h ...