Show the TEXT in the upper right corner

I'm currently using bootstrap CSS. I have a header page where all the page links are displayed, and I want to show the LOGGED IN USER'S NAME IN THE TOP RIGHT CORNER.

<li class="nav-item"><a class="nav-link text-dark">Home</a></li>
<li class="nav-item"><a class="nav-link text-dark">Link1</a></li>
<li class="nav-item"><a class="nav-link text-dark">Link2</a></li>
<li class="nav-item"><a class="nav-link text-dark">Link3</a></li>
<li class="nav-item"><a class="nav-link text-dark">Logout</a></li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Hello @Context.Session.GetString("UserName")</a>
</li>
htmlcssbootstrap-4

Answer №1

Utilizing this method will be beneficial for you.

  • Include the flex-grow-1 class to your ul element to expand it to the full width of its parent.
  • Add ml-auto to the necessary li element. This will apply a margin-left: auto property, positioning the element to the far right.

<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <ul class="navbar-nav flex-grow-1">
    <li class="nav-item"><a class="nav-link text-dark">Home</a></li>
    <li class="nav-item"><a class="nav-link text-dark">Link1</a></li>
    <li class="nav-item"><a class="nav-link text-dark">Link2</a></li>
    <li class="nav-item"><a class="nav-link text-dark">Link3</a></li>
    <li class="nav-item"><a class="nav-link text-dark">Logout</a></li>
    <li class="nav-item ml-auto ">
      <a class="nav-link text-dark" href="#">Hi Admin</a>
    </li>
  </ul>
</nav>


<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

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

Trouble with HTML2PDF.js - download not being initiated

Currently, I am utilizing html2pdf.js in my project by following this tutorial: https://github.com/eKoopmans/html2pdf.js However, I've encountered an issue where despite implementing everything as instructed, the download prompt for the specified div ...

javascripthtmlcss

Problems with aligning elements to both the left and right sides of the same line

Currently, I have two divs that I would like to float on the left and right sides. However, they seem to be sticking together and I can't seem to separate them.. HTML: <nav> <div id="nav_content"> <div id="home_ico ...

htmlcss

Position an HTML div by using data from a JSON object

While working on my dashboard, I successfully saved data to my database using jQuery, JSON, and a generic handler. Subsequently, I managed to retrieve this data using a WebService and JSON. The structure of my database information is as follows: Upon docu ...

javascriptjqueryhtmlasp.netjson

Variables in a for loop can be given unique and descriptive names

I am exploring the world of JS and HTML as a newcomer. I recently discovered that variables can be dynamically named in code. Excited to try it out, I implemented some basic variable naming code. However, to my disappointment, nothing is being displayed on ...

javascriptjqueryhtmlfor-loop

I prefer not to have the entire URL visible to me

function updateDate(day, month, year) { month += ""; if (month.length <= 1) month = "0" + month; document.location.href = "<?php $_SERVER['PHP_SELF'];?>?page=events&day=" + day + "&month=" + m ...

javascriptphphtmlurlget

Utilizing HTML5 Video Autoplay with AngularJS ng-show: A Comprehensive Guide

How can I implement a video using the HTML5 video tag with autoplay in an AngularJS web application? I attempted to use the following code: <video ng-show="condition" autoplay ng-src="{{video.src}}"></video> Upon loading the web application, ...

angularjshtmlvideo

Having trouble clicking on SubMenu with selenium web driver

Currently, I am looking into automating a UI application. In this application, there is a menu that displays sub-menus upon hovering the mouse over it. However, I am facing an issue where I am unable to click on the items within the sub-menu. Here is the ...

htmlcssselenium

No modifications to the CSS can be made within the "alterations" section of the Console drawer in Chrome

Is there a way to easily track and summarize all of my live CSS changes in the Chrome browser? I've searched on Stack Overflow, but haven't found a solution that works for me. This specific answer seems like it could be the most helpful for achie ...

cssgoogle-chromewebpackgoogle-chrome-devtoolswebpack-dev-server

Issue with Bootstrap 4 navbar dropdown on mobile: unable to click on menu item

My website is currently in development with Bootstrap 4. I'm facing an issue where, on mobile devices, when the menu items collapse into the three bars, they are not clickable. Despite following the recommendations in the Bootstrap documentation, the ...

jquerycsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Which CSS property prevents items from stacking on top of each other?

Looking for help with aligning the elements visible in the image below. I want the slideshow image and title link to remain where they are, but I need the description text to be positioned below the title and aligned next to the slideshow image instead of ...

htmlcssdrupal

Django: The download page content is being downloaded by Internet Explorer instead of being rendered

I'm currently working on a website using the Django Web Framework. Everything looks great when I check it in browsers like Chrome, Safari, and Firefox. However, if I try to open the page in Internet Explorer, I encounter this issue: https://i.sstatic ...

pythonhtmldjangointernet-explorer

Creating a unique visual identity for the collapsing navbar with a dark theme

As a novice in the world of web design, I might be asking a simple question or posting in the wrong forum, so bear with me. In my static blog, I'm using Bootstrap 4 to streamline the design process. While I'm generally satisfied with how it looks ...

csstwitter-bootstrap-4

Break up a list into separate paragraphs and style each word using individual CSS

I have a user-generated paragraph that consists of a list of words separated by commas, such as "dog, cat, hamster, turtle." I want to be able to individually assign attributes to each word in the list. Check out this image for reference In the example i ...

javascripthtmlcss

Interconnected slider and numerical entry field both influencing a shared numeric value

My goal is to display the Slider Value "sliderStatus" in a number input box that can be adjusted using various methods. For instance, if the slider is set to 199 and the customer wants to quickly select 200, they can either input the value in the box or a ...

javascriptjqueryhtml

Guide to highlighting rows in v-data-table with a click in Vuetify (version >= 2.0)

In my email management system, I utilize a v-data-table to organize emails. When a user clicks on a row, a popup displaying the email details appears. Desired Feature: I am looking to have the rows marked as "readed" (either bold or not bold) after th ...

javascriptcssvue.jsvuetify.js

Issue with Bootstrap form group checkboxes not being checked when switching between Nav Pills

Check out my work on JSFiddle: https://jsfiddle.net/pb23Ljd8/5/ I've utilized Bootstrap nav-pills to display all products and categorize them like this: https://i.sstatic.net/oQxTk.png The checkboxes are based on this design: To keep track of the ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to create a table with "cells that can be controlled individually" similar to the image provided using HTML and CSS?

I have been searching online for solutions on how to create a table similar to the one in this image, but so far I haven't had much luck. I attempted to use colspan, however, it didn't yield the results I was hoping for. Does anyone have any alt ...

htmlcss

Having trouble enlarging the navigation panel

I am working on creating a dynamic navigation bar with bootstrap 4. However, I am facing an issue with the top right button not expanding the navigation bar as expected. I have checked my code but I cannot figure out what I missed. Can anyone help me with ...

htmlcssbootstrap-4

Ways to insert a gap underneath every line

Hello, I'm struggling to create space below each line of code. I've tried using the br tag and margin property, but it didn't work. Can anyone help me with this? I'm not sure if the current HTML structure is correct or if I should swit ...

htmlcssrowlinespace

What are some ways I can enhance the typography within Material UI?

Currently, I am in the process of developing a custom theme utilizing createMuiTheme. However, my application requires more typography variants than what Material UI provides out of the box. I need to extend the typography so that it aligns with my specifi ...

cssreactjstypescriptmaterial-uinext.js