Adding check marks to Bootstrap button drop-down items

Question

I am using Twitter bootstrap drop down button:

http://getbootstrap.com/components/#btn-dropdowns-single

And I would like to add checkmarks (not necessarily checkboxes) to those list items that the user has selected. Is there style already built in do this or does someone already have a solution built for this?

Thanks!

Answer 1

Here's a solution that doesn't require icon fonts or images. This is all the CSS you need:

.dropdown-item-checked::before {
  position: absolute;
  left: .4rem;
  content: '✓';
  font-weight: 600;
}

Toggling the Checked State

To add/remove a checkmark, just toggle the dropdown-item-checked modifier on the appropriate dropdown-item:

<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Menu</button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Item 1</a>
    <a href="#" class="dropdown-item dropdown-item-checked">Item 2</a>
    <a href="#" class="dropdown-item">Item 3</a>
  </div>
</div>

Here's what it looks like:

Demo & Source

Demo: https://codepen.io/claviska/pen/aLxQgv

Source: https://www.abeautifulsite.net/adding-a-checked-state-to-bootstrap-4-dropdown-menus

Answer 2

Here's a simple solution using a Font Awesome icon: http://www.bootply.com/oJgbiXIzBM

Using the same HTML as http://getbootstrap.com/components/#btn-dropdowns-single

The CSS is:

.active-tick a::after {
    content: '\f00c'; /* http://fontawesome.io/3.2.1/icon/ok/ */
    font-family: 'FontAwesome';
    float: right;
}

And here's an example of mutually exclusive ticks on the options:

$('li').click(function(e) {
    $(this).addClass('active-tick').siblings().removeClass('active-tick');
});