'How to align right in BootStrap 5.0 for the components?

I am actually trying to do this online course and in that the instructor uses Bootstrap 4, but I decided I could do BootStrap 5.1.

I am trying to make my navigator bar elements like the ordered list on the right, but I checked the documentation and everything, I can't seem to figure why it's not working.

So my current navigation bar is something like: enter image description here

So I can't seem to get it there, I used these different variations:

  1.   <ul class="navbar-nav justify-content-end">

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

  3.   <ul class="navbar-nav ml-auto>

Also, Could someone help me understand what does me? mb? ml stand for? And how do I get this to right side in BootStrap 5.0

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <title>Priyanka Giri</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <div class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="">Name ABC</a>
      <ul class="navbar-nav ml-auto ml-2">
        <li class="nav-item">
        <a class="nav-link" href="">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Education</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Experience</a>
      </li>
    </ul>
    </div>
  </body>
</html>

UPDATE: ms-auto WORKED But what does this mean exactly? What did the above three mean?

htmlcsstwitter-bootstrap


Solution 1:[1]

  • .me is the renamed classname of .mr, which stands for margin-right property

  • .mb is the classname which stands for margin-bottom property

  • .ml is the classname which stands for margin-left property

Since Bootstrap 5 .ml has been renamed to .ms, and .mr has been renamed to .me.

More on that in the documentation of migrating to v5: https://getbootstrap.com/docs/5.0/utilities/spacing/

Speaking of your code, the .ml-auto class sets your nav-items on the left. It simply sets the margin-left: auto; CSS. This may not work in the newer Bootstrap. Try renamed the version with .ms-auto, so your code will look like:

 <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <title>Priyanka Giri</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <div class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="">Name ABC</a>
      <ul class="navbar-nav ms-auto ms-2">
        <li class="nav-item">
        <a class="nav-link" href="">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Education</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Experience</a>
      </li>
    </ul>
    </div>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tacoshy

Related Questions