Alignment of text in Bootstrap Navbar

I'm looking to align text in this way:

https://i.sstatic.net/6DS4q.png

Here's my navbar design:

https://i.sstatic.net/FZ3sg.png

It's been a challenge for me, I've spent exactly 2 days trying to achieve the style similar to Max Back's website

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8984849f989f998a9babdec5d9c5d8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container bg-light mt-5">
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <img src="assets/icon.jpg" width="48" height="48" class="rounded-circle" alt="">
      <span>Emre İlhan</span>
      <img src="assets/icons8-verified-account-20.png" alt="">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="nav nav-pills ms-auto">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#"><span class="tex-black-50">01</span> Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><span class="tex-black-50">02</span> Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><span class="tex-black-50">03</span> Link</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7c71716a6d6a6a6c7f6e5e2b302c302d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7L+jL+jXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

htmlcss

Answer №1

Here is a code snippet to align navbar text to the right

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand text-right" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Answer №2

give this a shot

<!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>Document</title>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
    .img-container{
        background-color: black;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgb(76, 76, 76);
    }
    .img{
        border-radius: 50%;
        width: 40px;
        height: 40px;
    }
    .main{
        display: flex;
    }
    .text{
        margin-left: 5px;
        padding: 3px;
    }
</style>
<body>
    <div class="main" >
        <div class="img-container">
            <img src="33720.jpg" class="img" alt="">
        </div>
        <div class="text">
            <div>Nadia Smith <i class=" fa fa-check"></i></div>
            <div style="color: gray;"><i class=" fa fa-check"></i>verified</div>
        </div>
    </div>
</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

When the CSS animation has finished in JavaScript

I am currently developing a game using HTML/JavaScript, and I have implemented a "special ability" that can only be activated once every x seconds. To indicate when this ability is available for use, I have created a graphical user interface element. Since ...

javascripthtmlcsscss-animations

Using REST API and AngularJS to sign in to asp.net

After successfully implementing a login page in ASP.NET with AngularJS and REST API integration, I am now looking to add an auto-generated token for added security measures. How can I achieve this login operation in ASP.NET using AngularJS and REST API? ...

javascriptjqueryhtmlcssangularjs

How to stop font-family and letter spacing from affecting the margin of div and ul elements in CSS

I'm facing a challenge with aligning a rotated div and an unordered list in a container. Adjusting the margin of either element does the trick, but changing font-family or letter-spacing globally affects the spacing between the two. Check out this JS ...

htmlcss

The location layer on my Google Maps is not appearing

For a school project, I am working on developing a mobile-first website prototype that includes Google Maps integration. I have successfully added a ground overlay using this image, but I am facing issues with enabling the "my location layer". When I tried ...

javascripthtmlgoogle-mapslocationmaps

Differences Between Bootstrap Source Code and Bootstrap CDN Link

I am in the process of updating the user interface for my website, utilizing Bootstrap 5.3. Initially, I utilized the CDN link provided in the official documentation. Recently, I acquired Bootstrap Studio as a tool to streamline the UI development process. ...

htmlcssbootstrap-5

CSS3 animations can sometimes result in incorrect element sizing due to the animation-fill-mode property

After experimenting with CSS3 animation, I encountered an unusual issue. Adding animation-fill-mode to the "parent" <div> caused the width of the "child" <div> to be less than 100% upon completion of the animation. Can anyone shed light on why ...

cssanimation

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

Is it possible to modify a Facebook post in editing mode using JavaScript?

I am trying to edit the content of a Facebook post dynamically using JavaScript. https://i.sstatic.net/pyO9h.png My goal is to be able to select the text in edit mode and make changes to it programmatically. The structure of the HTML code for a Facebook ...

javascripthtmlfacebook

I aim to adjust the width of a logo and ensure its size is fixed for optimal visibility

The selected logo needs to be more visible. I have attempted to use media queries to adjust its visibility, but I am having trouble with it. I want the logo to be able to stretch in width, but I am unsure how to achieve that. Currently, this is what I hav ...

htmlcssangularbootstrap-4twitter-bootstrap-3

Filtering tables in Angular 6 using checkbox options

I have a functional code snippet that filters a table using checkboxes. However, I am facing an issue when unchecking a checkbox. It does not return the original array as expected. .html <ng-container *ngFor="let group of groups"> <label cla ...

javascripthtmlangularangular6

The first generation iPad, CSS3 transformations, and the constraints on image processing due to limited RAM

During my exploration of the original iPad on iOS 5.0.1, I stumbled upon some peculiar quirks that appear to be linked to the number of images being loaded into the browser simultaneously. I noticed certain things rendering at half resolution or even lowe ...

cssiosipadresolutionram

Customize the width and padding of your data tables

I have several tables with different padding and width settings. Previously, I had set these inline without any issues. However, now that I am using data tables, the inline styles are not working. If you need more information about Datatables, check out t ...

javascriptjquerycssdatatables

Turn off the background of a div

Greetings! I am working on a webpage that includes a button. Upon clicking the button, I would like to display a div and disable the content behind it. The div will also contain a button that can be clicked to hide the div. As a newcomer to Web Programmi ...

javascripthtmlcss

json_encode has stopped functioning (now)

Recently, I encountered a strange issue. I've been trying to display chart data, but the JSON_ENCODE function that is supposed to convert my data into JSON format is not returning anything. It was working fine before when I had less data, but now it&a ...

phphtmlmysqljsonchart.js

Link clicking does not trigger URL routing properly

I've been tasked with updating our web application, and I'm facing a challenge that I need help with. My boss wants users to be able to click on a link in an email and have the internal company web app directly navigate to a specific page indicat ...

javascriptjqueryhtml

I'm currently working with React and experiencing issues with my components being unrendered

I'm currently navigating a React tutorial and I'm having issues getting this code to display some buttons. I'm utilizing codepen.io to work on the code and can provide the tutorial link if needed. const clips = [ { keyCode: 81, key ...

javascripthtmlreactjs

Font animation experiencing limited functionality

As a beginner in the world of programming, I am facing some challenges with my animation. The struggle lies in the fact that only my "Treats" are moving and not the "Tricks". Any guidance or suggestions would be greatly welcomed as I might have jumped into ...

htmlcsscss-animations

The navigation bar designed with flex boxes is experiencing an issue where the "Login" button positioned on the right is being partially hidden

My website's navbar has a display: flex property to provide padding around the links, but it is causing some issues with overflow. For more details, you can check the JSfiddle link here: https://jsfiddle.net/Bradley_/3bhroby2/3/ I have noticed that m ...

htmlcssflexboxnavbar

Is it possible to automatically adjust the text color based on the dynamic background color?

While browsing Palantir.com, I noticed that the logo color always changes to be the inverse of the background color behind it as the background scrolls or changes. https://i.sstatic.net/BYvZa.png I'm currently working on a website using Wordpress an ...

htmlcsswordpress

How do I use jQuery to remove a dynamically added class from the page's header?

When using an inline editor to modify css classes, I encounter the need to remove and then re-add a class definition after making changes. Additionally, users have the option to delete elements, so it's important that the definition is also deleted. ...

javascriptjquerycsshtml