Issue with text alignment due to Bootstrap button being present in horizontal navigation menu

I am currently working with code that was generated using ASP.NET Core scaffolding. Although I am not very proficient in CSS, I have encountered an issue with a menu where one button is causing the option to its left to be slightly misaligned compared to the other options. The problematic button is labeled as Logout and the affected option is Profile. After some trial and error, I have identified that the cause of this issue lies within the "btn" class assigned to the Logout button.

I would like help understanding why this issue is occurring and how it can be resolved. Below, you will find a sample web page that showcases the problem:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <title>Tracker1</title>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a id="manage" class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Profile</a>
                        </li>
                        <li class="nav-item">
                            <a id="logout" class="nav-link btn btn-link text-dark">Logout</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
</body>
</html>

htmlcssbootstrap-4

Answer №1

There is a default CSS border of 1PX on the btn class in Bootstrap-4, which causes an issue because it is not applied to the 'Profile' #manage element.

Why does the border have this effect?

In CSS, elements have their own border property. If the style is not defined, the border will be invisible as the style defaults to none. In our case, the border is defined with 1px, which consumes space around the element. Setting the border like border: 0 or border: none would prevent consuming any space.

Why isn't 'Home' affected when it doesn't have the btn style?

'Home' is wrapped under a container <ul> which has the bootstrap class flex-grow-1, applying the flex-grow: 1 css to the element.

How does CSS `flex-grow' work?
Flex-grow determines whether or not an element can take up additional space. Setting a flex-grow value of 1 or larger tells the element to grow and take up available space, while a value of 0 prevents growth.

This documentation on flex-grow may also be helpful.

https://codepen.io/cursorrux/pen/BaZPBqJ

Snippet:

#manage {
  border: 1px solid transparent;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <title>Tracker1</title>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a id="manage" class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Profile</a>
                        </li>
                        <li class="nav-item">
                            <a id="logout" class="nav-link btn btn-link text-dark">Logout</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
</body>
</html>

Here is a short code snippet where the 3rd and 4th menus do not have the btn class, but the 4th menu has the flex-grow css applied to its parent container, causing it to occupy space and appear similar to the 2nd menu:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a id="manage" class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Menu</a>
                    </li>
                    <li class="nav-item">
                        <a id="logout" class="nav-link btn btn-link text-dark">Menu with border (btn)</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Menu</a>
                    </li>
                </ul>
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Menu with <i>flex-grow</i></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

In this scenario, the 3rd and 4th menus do not have the btn class, and the 4th menu also lacks the flex-grow-1 bootstrap css class applied to the parent <ul> element. As a result, the 4th menu does not occupy additional space and appears similar to the 1st and 3rd menus, regardless of being wrapped in another <ul></ul> element:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a id="manage" class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Normal Menu</a>
                    </li>
                    <li class="nav-item">
                        <a id="logout" class="nav-link btn btn-link text-dark">Menu with "btn"</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Normal menu</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Normal menu</i></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

Answer №2

House remains unaffected as it resides within a separate unordered HTML list. If you eliminate the 

</ul><ul class="navbar-nav flex-grow-1">
between the second and third nav-item, you will observe that House is no longer aligned with Logout. Here's an example snippet to illustrate this:

#manage {
  border: 1px solid transparent;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <title>Tracker1</title>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a id="manage" class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Profile</a>
                        </li>
                        <li class="nav-item">
                            <a id="logout" class="nav-link btn btn-link text-dark">Logout</a>
                        </li>
                        
                   <!-- remove this </ul>
                    <ul class="navbar-nav flex-grow-1"> -->
                    
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
</body>
</html>

To resolve this issue, ensure all nav-item elements are contained within the same unordered HTML list. Additionally, if classes have borders – such as the btn class in this scenario – make sure all nav-item elements share these classes. As pointed out by @cursorrux, Logout has a transparent border while the others do not.

Examine the code below:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <title>Tracker1</title>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a id="manage" class="nav-link btn btn-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Profile</a>
                        </li>
                        <li class="nav-item">
                            <a id="logout" class="nav-link btn btn-link text-dark">Logout</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link btn btn-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
</body>
</html>

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

Arranging text links in a column format

I am attempting to align a series of text links vertically, but for some reason, some of the links are not stacking properly. Here is the current layout: https://i.sstatic.net/1gonA.jpg. This is how I want it to look: https://i.sstatic.net/oH0Ap.jpg Bel ...

htmlcssfooter

Determine if offcanvas element is visible upon initialization in Bootstrap 5 Offcanvas

I have a search-filter offcanvas div for location and property type on this webpage: On larger screens (desktop), the offcanvas is always visible, but on smaller screens (mobile), it is hidden and can be toggled with a button. This functionality works per ...

javascripthtmlbootstrap-5

I'm feeling pretty lost when it comes to understanding how line-height and margins work together

When creating a webpage layout, my goal is to maintain balance by ensuring there is an equal amount of spacing between sections and elements. However, when dealing with varying font sizes and line heights, achieving this can be challenging. To provide fur ...

htmlcss

Issue with animated cursor function not activating when used with anchor links

I've spent hours searching for a solution but I can't seem to find one. I'm attempting to modify the codepen found at https://codepen.io/Nharox/pen/akgEQm to incorporate images and links, however, two issues are arising. The first issue is t ...

javascripthtmlcssanimationcursor

Can Webpack be used to produce only CSS files without generating the output.js file?

I've integrated Webpack into my project alongside the extract-text-webpack-plugin. Within my project, I have various build scripts. One of these scripts focuses solely on bundling and minifying CSS. While utilizing Webpack for other tasks, I decided ...

cssnode.jsnpmbundling-and-minificationwebpack

The $.getJSON function seems to be malfunctioning and is not returning the expected data, instead, showing [object Object

I seem to be encountering a common issue with my ajax call not retrieving the JSON data. It appears that it may be due to an array and not using the correct index, although I am indeed utilizing an index on the front-end. Despite trying various solutions f ...

phphtmljqueryjsonajax

Understanding the process of extracting HTML tags from an RSS feed using Python

I am looking for a way to create a plain text readout of an RSS feed using a small utility. Below is the code I have: #!/usr/bin/python # /usr/lib/xscreensaver/phosphor -scale 3 -program 'python newsfeed.py | tee /dev/stderr | festival --tts' ...

pythonhtmlparsingrss

storing text in an array for creating an HTML email

This snippet of code includes a section of HTML with PowerShell variables that will be used to create dynamic emails. Currently, the HTML content is stored within the script itself, but I would like to separate it into an external file for easier managem ...

htmlpowershellstring-interpolationvariable-expansion

Persistent extra pixels found in CSS radiobutton group buttons that persist despite attempts to remove them

UPDATE: I have corrected the title of this post, as it was mistakenly taken from another post. For the past few months, I've been working on a sports app using React. However, I am facing a minor cosmetic problem with my radio buttons. Despite my eff ...

javascriptcss

Excess space at the bottom of the Heatmap chart in Highcharts

I am facing an issue with a heatmap having extra space at the bottom that I cannot seem to remove. Despite trying various solutions from different Stack Overflow threads, such as adjusting chart.marginBottom, chart.spacingBottom, x and yAxis margins, and d ...

javascriptjqueryhtmlcsshighcharts

Troubleshooting Compatibility Issues: JavaScript Function Works in Chrome but not in Internet

After collaborating with fellow coders to develop info boxes using HTML, CSS, and JavaScript, I have come across an issue with the hover functionality not working properly in Internet Explorer. Interestingly, everything functions flawlessly on Google Chrom ...

javascripthtmlcssgoogle-chromeinternet-explorer

Printing using *ngFor will display items in an ascending order

When attempting to display an object in markup, I am running into the issue of *ng printing it in ascending order instead of maintaining the original order. Ideally, I would like the elements to be printed as they are. You can view my code on StackBlitz ...

javascripthtmlangulartypescript

What can I do to prevent Masonry from floating all of my grid items to the left?

Is there a way to center justify the masonry grid items? I have noticed that my Masonry layout is aligning all the grid items to the left or justifying them to the left side: <div class="wrap"> <div class="parent grid"> <div class=" ...

jqueryhtmlcssgridmasonry

Unique custom animations using Jquery on HTML elements

Within a row, there are four divs. When one is clicked, the other three divs disappear, but the issue is that the remaining div quickly shifts to the left. I am looking for a solution that involves adding a custom animation where the remaining div smoothl ...

jqueryhtmlcss

What is the best way to anchor an image so that it remains fixed in its position relative to the browser or screen resolution?

I inquired about an issue a few days back, but I realize now that my explanation was unclear. To make things clearer, let me present two images to illustrate my problem. This is how it appears for me: . However, individuals with different screen resolution ...

csspositioning

The Safari 7.1+ browser seems to be having trouble with the spotlight effect

Why is the CodePen not functioning properly in Safari? Despite working well in Chrome and Firefox, it completely fails to work in Safari 7.1+. Can anyone provide some insights? http://codepen.io/cchambers/pen/Dyldj $(document).on("mousemove", function( ...

javascriptjqueryhtmlcsssafari

Creating resizable rows of DIVs using jQuery

I'm currently developing a scheduling widget concept. The main idea is to create a row of DIVs for each day of the week. Every row consists of a set number of time periods represented by DIVs. My goal is to enable the resizing of each DIV by dragging ...

javascriptjquerycsshtmljquery-ui

Error Message: Angular Typescript: x function is not defined

UPDATE: Huge shoutout to everyone who caught my mistake with the code location... Haha I've been wrestling with this issue all day long - the button should trigger the menu to open and switch to "close menu" after displaying a list of 3 items. The co ...

htmlangulartypescript

Discovering elements in Selenium that are dynamically loaded using JavaScript

My endeavor to automate form completion using selenium is being hindered by a peculiar issue. The particular form I am interacting with does not load instantly in the HTML code; instead, it is loaded dynamically through JavaScript after the initial page lo ...

javascriptpythonhtmlselenium

A guide on using Regular Expression to swap out every character with *

Recently, I came across a text that says: s = bluesky My aim is to transform it into s = ******* (with the same number of '*' as the number of characters). I have been on the lookout for a Python regular expression to achieve this. Update 1: ...

pythonhtmlregexdjangodjango-templates