Shifting Objects within Bootstrap 5 Navigation Menu

Hey there! I'm having some trouble aligning the items in a Bootstrap 5 navigation bar to the side, just like in this screenshot:

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

I tried adjusting the alignment but nothing changed on the site (I was using Live Server extension). It seems that Bootstrap is overriding my changes.

As I searched for solutions, none of the similar questions were related to Bootstrap 5.

I attempted using margin, padding, text-align: right / text-align:flex-end;, and align-items:right / align-items:flex-right on navbar-nav without success.

Here is a snippet of the code I used:

navbar-nav {
  padding: 20px;
  margin: 20px;
}

navbar-nav {
  text-align: right;
  align-items: right;
}

navbar-nav {
  text-align: flex-end;
  align-items: flex-end;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="styles.css">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d6f6262797e797f6c7d4d38233c233c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scratch Bookmarklets</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Scratch Bookmarklets</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4f4242595e595f4c5d6d18031c031c">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>

</html>

Thank you for your help!

javascripthtmlcsstwitter-bootstrap

Answer №1

https://i.sstatic.net/9RHZ2.png

To make the change, simply swap out me-auto for ms-auto within the navbar-nav element.

<ul class="navbar-nav me-auto mb-2 mb-lg-0">

TO

<ul class="navbar-nav ms-auto mb-2 mb-lg-0">

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

A time-tracking counter that tallies the amount of time users spend on the webpage

I'm currently working on a code that tracks the time spent on a page starting from when it was clicked. My challenge now is figuring out how to capture the time when the submit button is clicked and store it in the database. < script > var ...

javascriptphpjqueryhtml

Ember JS: Master of Controlling

I am working with the following controllers: clusters_controller.js.coffee Portal.DashboardClustersController = Ember.ArrayController.extend dashboard_controller.js.coffee Portal.DashboardController = Ember.ArrayController.extend In my template, I am ...

javascriptember.js

Equality and inequality in arrays

Could someone help clarify why these comparisons between different JavaScript arrays result in true? ["hello"] !== ["world"] [42] !== [42] ["apple"] != ["orange"] [7] != [7] ...

javascript

What steps can be taken to resolve the issue of Ajax not retrieving any data from

I'm struggling to identify the error in this code. I have created a search bar and implemented AJAX to automatically fetch data. Here is the HTML file: <!DOCTYPE html> <html> <head> <title></title> <script ...

javascriptphpjqueryhtmlobject

Show complete items in Vue.js

Issue at hand: I am in need of displaying and potentially changing JSON data. My goal is to present it in a directory tree format. The structure of the object is unknown, it could be something like this: "buttons": { "login": "LOGIN", "register": ...

javascriptjsonobjectvue.jsvue-component

Assigning a variable in jQuery to a PHP variable that has not been defined can halt the script

Here is the code snippet for a document ready function: $(document).ready(function(){ var id = <?php echo "" ?>; alert('boo'); if(id!=0){ $(' ...

javascriptphpjquery

Simultaneous display of icon and text on Bootstrap toggle button

Currently, I am utilizing Bootstrap 3 along with Jquery. Within my coding structure, there is a button that holds an icon within a span tag (specifically using the glyphicon provided by Bootstrap). <button id="swapArchived" class="btn btn-default btn-s ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Transitioning from curl to jQuery's $.ajax() method

Recently, I encountered a challenge while trying to switch the curl code used for an API known as TextRazor to jquery's AJAX due to certain limitations on the platform. Despite exploring various solutions suggested by the community in response to simi ...

javascriptphpjqueryajaxcurl

What could be causing the issue with Google Chart in my ASP MVC app?

My controller has a method that returns Json data. [HttpPost] public JsonResult CompanyChart() { var data = db.adusers; var selectUsers = from s in data where (s.Company != null) select s; int f ...

javascriptjsonasp.net-mvc

React component props are failing to update

import React,{useEffect} from 'react' import { Pin, Group } from './Pin'; import Cluster from './Cluster'; function DisplayClusterGroup({textAsIcon,iconStyle,mapRef,onViewportChange,dataSet,icon,onClick,clickedMarkers }) { ...

javascriptreactjsreact-propsuse-state

Sending a $.ajax post request transforming into a get

Struggling to understand the behavior of my jquery ajax request, I've hit a roadblock. function newContact() { $.ajax({ type: 'POST', contentType: 'application/json', // url: ...

javascriptjqueryajaxjsonhttp-post

Guide to creating AngularJS directive attributes without a right-hand side in hiccup code?

I'm currently developing an AngularJS application using markup in hiccup format. Here is a snippet of the markup: <div modal-show modal-visible="showDialog" .........></div> Below is the corresponding Hiccup I have created: [:div.modal. ...

javascriptangularjsclojurehiccup

Tips for organizing and nesting form data

Can I format my data in JSON like this: { attachments: { file: [ { name: 'pic1.jpg' }, { name: 'pic2.png' } ], username: 'Test', age: 1 } } Is it achievable us ...

javascriptmultipartform-dataform-data

The collapsed form-control is adjusting its attributes while resizing

Having trouble with a website design featuring a collapsed window and menu items, but the search bar is not displaying correctly? In image 3, you can see that the style of the search bar changes when the width exceeds a certain limit. I've tried vario ...

htmlcsstwitter-bootstrapuser-interfacetwitter-bootstrap-3

Topaz font does not properly display backslashes and certain characters when rendered on Canvas

Who would have thought I'd stumble upon a new challenge on Stack Overflow? But here we are. If there's already a solution out there, please guide me in the right direction. I'm currently developing an interactive desktop environment inspired ...

javascriptcanvasfontstruetype

Customizing HTML element tags in MUI: Best practices

Using the most recent version of MUI (v5) and incorporating CssBaseline from @mui/materials. Typically, in CSS, I would set up my styles like this: body, html, #root { width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 0; font-siz ...

cssreactjsmaterial-ui

Adjust the margins of an image within a text box

I've come across a simple yet widely used code online. I tried placing an image inside a textbox with the type of "text", but the image is touching the border of the empty box. Is there a way I can adjust the positioning of the image to the right to p ...

htmlcssimagetextbox

Combine table cells to improve readability on smaller screens

I currently have a setup designed for larger screens: <table> <thead> <tr> <th>title and image</th> <th>description</th> </tr> </thead> <tbody> ...

javascripthtmlcssresponsive-designhtml-table

Connecting text boxes with JavaScript and JSON for gaming experience

I am currently developing a game and have encountered a slight issue. Currently, there is a text box in the game that prompts the player to run into it to progress to the next level. When the player does so, the next level loads seamlessly, which works per ...

javascripthtmljsongame-development

As the screen size shrinks, two components merge together

One issue I'm facing with my site is the component called NavPanel. This consists of two components - a back button (BackToButton) and a search field (SearchTextField). Everything looks fine on a standard screen size, but when the screen size decrease ...

cssreactjsmaterial-uigrid