Can each bootstrap navbar link be spaced individually

Question

For example I have a navbar with the following links :

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">Register <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Login</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Business Owner's Learn More</a>
  </li>
  <li id="login" class="nav-item ">
    <a class="nav-link" href="#">Login</a>
  </li>
</ul>

All of these currently align to the left, but I would like to place the #login link to the right, is this possible with bootstrap? Should I be using something else such as flex box, grid, etc... ?

score 0 · Answer 1 · answered Jul 12 '18 at 03:29

As with most things in CSS, there are dozens of way to do this. For starters, you can give #login a css property of float: right;. More on float here.

Another newer way would be to use flexbox. In this case, it would look something like adding display: flex; on the parent, followed by justify-content: space-between;. Here's a great guide to flexbox.

Here's a stack overflow question on aligning text the Bootstrap way.

score 0 · Answer 2 · answered Jul 12 '18 at 03:42

Add d-flex class on ul and align-self-end on the li that you want to align to the right.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<ul class="navbar-nav mr-auto d-flex">
  <li class="nav-item active">
    <a class="nav-link" href="#">Register <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Login</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Business Owner's Learn More</a>
  </li>
  <li id="login" class="nav-item align-self-end">
    <a class="nav-link" href="#">Login</a>
  </li>
</ul>

OR Add text-right class to the required li

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">Register <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Login</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Business Owner's Learn More</a>
  </li>
  <li id="login" class="nav-item text-right">
    <a class="nav-link" href="#">Login</a>
  </li>
</ul>

Can each bootstrap navbar link be spaced individually

2 Answers2