Navpills to be aligned on right in media min-width: 900px

Question

Pills must be right-aligned only in laptop and to be left on phone and my code is: LAPTOP MODE

PHONE MODE

Code

<style>@media(min-width: 576px){ .nav-pills > a{ text-align: left; } } @media(min-width: 900px){ .nav-pills > a{ text-align: right; } }</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <!-- JavaScript Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"/>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <h1 style="font-family:Tangerine;">IgniteShare</h1>
                    <small>&emsp;&emsp;ReInvent Your Memories</small>
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"/>
                </button>
                <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                    <br>
                        <div class="nav nav-pills flex-column flex-sm-row">
                            <a class="flex-sm-fill text-sm nav-link" aria-current="page" href="home.php">Home</a>
                            <a class="flex-sm-fill text-sm nav-link" href="register.php">Register</a>
                            <a class="flex-sm-fill text-sm nav-link" href="login.php">Login</a>
                        </div>
                    </div>
                </div>
            </nav>

Answer 1

Is this what you are expecting ?

I've added justify-content-end class

<style>
  @media(min-width: 576px) {
    .nav-pills>a {
      text-align: left;
    }
  }
  
  @media(min-width: 900px) {
    .nav-pills>a {
      text-align: right;
    }
  }
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <h1 style="font-family:Tangerine;">IgniteShare</h1>
      <small>&emsp;&emsp;ReInvent Your Memories</small>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"/>
                </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
      <br>
      <div class="nav nav-pills flex-column flex-sm-row">
        <a class="flex-sm-fill text-sm nav-link" aria-current="page" href="home.php">Home</a>
        <a class="flex-sm-fill text-sm nav-link" href="register.php">Register</a>
        <a class="flex-sm-fill text-sm nav-link" href="login.php">Login</a>
      </div>
    </div>
  </div>
</nav>

Answer 2

<a> is an inline element by default - text-align won't have any effect on it since inline elements are only as long as their contents.

You probably want to apply text-align to the parent of the a tags, like this:

.nav-pills {
    text-align: right;
}

Or you apply display: block to a and make it as wide as its parent by adding width: 100% - in this case the text-align setting would work on the a tags themselves.