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

Creator of Surreal CMS and other web things. Follow me for tweets about JavaScript, CSS, and web programming.