Could someone help me align the text and checkbox so they are both inside the Tabs here please, preferably without CSS or using inline CSS.

Ive tried a few diffent approaches, but bootstrap isn't my strong suit, im using a CRUD framework that handles the bootstrap side of things, but I need to do somthing like this so the end user can select tabs to export.

<div class="container">
  <ul class="nav nav-tabs">
  
    <!-- Tab 1 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="d-flex align-items-center">
          Badger
          <input class="form-check-input" type="checkbox" id="checkTab1">
        </span>
      </a>
    </li>
    
    <!-- Tab 2 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="d-flex align-items-center">
          Cat
          <input class="form-check-input" type="checkbox" id="checkTab2">
        </span>
      </a>
    </li>
    
    <!-- Tab 2 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="d-flex align-items-center">
          Foo
          <input class="form-check-input" type="checkbox" id="checkTab3">
        </span>
      </a>
    </li>
    
    <!-- Tab 2 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="d-flex align-items-center">
          Bar
          <input class="form-check-input" type="checkbox" id="checkTab4">
        </span>
      </a>
    </li>
  </ul>
</div>

Fiddle here

Could someone help me align the text and checkbox so they are both inside the Tabs here please, preferably without CSS or using inline CSS.

Ive tried a few diffent approaches, but bootstrap isn't my strong suit, im using a CRUD framework that handles the bootstrap side of things, but I need to do somthing like this so the end user can select tabs to export.

<div class="container">
  <ul class="nav nav-tabs">
  
    <!-- Tab 1 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="d-flex align-items-center">
          Badger
          <input class="form-check-input" type="checkbox" id="checkTab1">
        </span>
      </a>
    </li>
    
    <!-- Tab 2 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="d-flex align-items-center">
          Cat
          <input class="form-check-input" type="checkbox" id="checkTab2">
        </span>
      </a>
    </li>
    
    <!-- Tab 2 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="d-flex align-items-center">
          Foo
          <input class="form-check-input" type="checkbox" id="checkTab3">
        </span>
      </a>
    </li>
    
    <!-- Tab 2 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="d-flex align-items-center">
          Bar
          <input class="form-check-input" type="checkbox" id="checkTab4">
        </span>
      </a>
    </li>
  </ul>
</div>

Fiddle here

• bootstrap-4

Share Improve this question Follow edited Nov 20, 2024 at 16:39 isherwood 61.1k1616 gold badges121121 silver badges169169 bronze badges asked Nov 20, 2024 at 15:36 MonkeyHunterMonkeyHunter 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

in your case can use d-flex and align-items-center classes or use custom css, bootstrap tab borders and padding interfere with the checkbox placement

<div class="container">
 <ul class="nav nav-tabs">
<li class="nav-item">
  <a class="nav-link d-flex align-items-center" href="#">
    <span>Badger</span>
    <input class="form-check-input ms-auto" type="checkbox" id="checkTab1">
  </a>
</li>
<li class="nav-item">
  <a class="nav-link d-flex align-items-center" href="#">
    <span>Cat</span>
    <input class="form-check-input ms-auto" type="checkbox" id="checkTab2">
  </a>
</li>
<li class="nav-item">
  <a class="nav-link d-flex align-items-center" href="#">
    <span>Foo</span>
    <input class="form-check-input ms-auto" type="checkbox" id="checkTab3">
  </a>
</li>
<li class="nav-item">
  <a class="nav-link d-flex align-items-center" href="#">
    <span>Bar</span>
    <input class="form-check-input ms-auto" type="checkbox" id="checkTab4">
  </a>
</li>