Adding a Checked State to Bootstrap 4 Dropdown Menus

Bootstrap's dropdown menus are pretty awesome, but they lack a checked state. Think macOS or Windows:

Fortunately, this is pretty easy to add yourself.

Live Demo

The Code

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

To changed the checked state of a dropdown item, simply toggle its dropdown-item-checked class.

License

This code has been released into the public domain.

Author avatar

About the author

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.