Bootstrap 4 label inside anchor

Question

I am trying to have a checkbox label showing on the right hand side of a nav-item. The idea is a CSS only way to show a tick or cross depending on the checked status of the checkbox. The label should also be vertically aligned in the middle of the nav-item.

I'm using Bootstrap 4.

This gives the desired functionality but the label is shown below the nav-item

<li class="nav-item">
  <input type="checkbox" hidden="" id="existing-5" name="existing-5[active]" checked="">
  <a class="active show nav-link text-nowrap" data-toggle="tab" href="#existing-5">
    Session <span class="session-number">1</span>
  </a>
  <label class="float-right" for="existing-5">
    <i class="fa fa-check tick" aria-hidden="true"></i>
    <i class="fa fa-times cross" aria-hidden="true"></i>
  </label>
  <input type="hidden" name="existing-5[name]" value="2">
</li>

The next one gives the desired appearance but when the label is clicked the checkbox is not toggled

<li class="nav-item">
  <input type="checkbox" hidden="" id="existing-5" name="existing-5[active]" checked="">
  <a class="active show nav-link text-nowrap" data-toggle="tab" href="#existing-5">
    Session <span class="session-number">1</span>
    <label class="float-right" for="existing-5">
      <i class="fa fa-check tick" aria-hidden="true"></i>
      <i class="fa fa-times cross" aria-hidden="true"></i>
    </label>
  </a>
  <input type="hidden" name="existing-5[name]" value="2">
</li>

What do I need to do to have the label controls aligned to the right of the li.nav-item and controlling the checkbox ?

Answer 1

This is how I solved it. Firstly, changed the class of the label

<li class="nav-item">
  <div class="nav-item-inner">
    <input type="checkbox" hidden="" id="existing-5" name="existing-5[active]" checked="">
    <a class="active show nav-link text-nowrap" data-toggle="tab" href="#existing-5">
      Session <span class="session-number">1</span>
    </a>
    <label class="align-right" for="existing-5">
      <i class="fa fa-check tick" aria-hidden="true"></i>
      <i class="fa fa-times cross" aria-hidden="true"></i>
    </label>
    <input type="hidden" name="existing-5[name]" value="2">
  </div>
</li>

and then added new CSS

section.session-tabs-section .nav-item-inner {
  /* display: inline-block; */
  /* height: 100%; */
  width: 100% ;
  box-sizing: border-box;
}

section.session-tabs-section .nav-item-inner .align-right {
  position: relative;
  /* top: 50%; */
  float: right;
  right: 5px ;
  transform: translateY(-150%);
}

The base of this comes from Banzys comment in How to get float:right button to vertically align in the middle All thanks go to him :) Here's hoping he's made it through the current war.