Nav Tabs Checkbox example

[arthurshlain]

Just an example of Bootstrap 4+ use case.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Compare 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Compare 2</a>
  </li>
  <li class="nav-item">
    <div class="nav-link position-relative">
      <div class="form-check position-static">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
        <label class="form-check-label stretched-link" for="defaultCheck1">
        Show only different properties
        </label>
      </div>
    </div>
  </li>
</ul>

Red background added to show clickable area:

This example can be expanded with collapse elements in content (JavaScript behavior).

I think checkboxes now works good with collapse? #22272

[ysds]

Sorry, but we cannot help with how-to or general troubleshooting issues here; only bug reports and feature requests. You'll want to ask around in the official Slack team or Stack Overflow. See our readme for more details.

If you think that is a bug, bug reports must include a live reduced test case via CodePen/JS Bin or Stackblitz. And report specific browser and OS details.

[arthurshlain]

I don't need help with it, it's example of use. The stretched-link class can be used with checkboxes inside tabs.

[ysds]

Thanks for the example :)