Bootstrap Multi-Select Option with Checkbox in Bootstrap 5.2 Introduction In modern web development, creating user-friendly and feature-rich interfaces is crucial. One of the fundamental aspects of user interaction is the ability to select multiple options from a list. Bootstrap, a popular front-end framework, simplifies this task by providing the Multi-Select Option with Checkbox feature. In this guide, we'll walk you through the process of implementing a Bootstrap Multi-Select with checkboxes using Bootstrap 5.2.

Prerequisites Before you get started, make sure to have the following prerequisites in your project:

Bootstrap 5.2 jQuery 3.7.1 Bootstrap Multi-Select 1.1.2 You can include these prerequisites in your project by adding the following CDN links to your HTML file's section:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/css/bootstrap-multiselect.min.css" integrity="sha512-fZNmykQ6RlCyzGl9he+ScLrlU0LWeaR6MO/Kq9lelfXOw54O63gizFMSD5fVgZvU1YfDIc6mxom5n60qJ1nCrQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/1.1.2/js/bootstrap-multiselect.min.js" integrity="sha512-lxQ4VnKKW7foGFV6L9zlSe+6QppP9B2t+tMMaV4s4iqAv4iHIyXED7O+fke1VeLNaRdoVkVt8Hw/jmZ+XocsXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Creating the Bootstrap Multi-Select Let's begin by creating a Bootstrap Multi-Select with checkboxes in your HTML file: html

<div class="d-flex text-left align-items-center w-100">
    <strong class="sl">Select Language:</strong>
    <select id="multiple-checkboxes" multiple="multiple">
        <option value="front-end">Front End</option>
        <option value="back-end">Back End</option>
    </select>
    <br>
    <select name="property_nhb[]" id="p-nhb" multiple>
        <option data-value="" value="" selected>all</option>
        <option data-value="back-end" value="php">PHP</option>
        <option data-value="front-end" value="javascript">JavaScript</option>
        <option data-value="back-end" value="java">Java</option>
        <option data-value="back-end" value="sql">.Net</option>
        <option data-value="front-end" value="jquery">Jquery</option>
        <option data-value="front-end" value=".net">.Net</option>
    </select>
</div>

In the provided code, we've created two elements. The first with the id "multiple-checkboxes" is used for selecting languages, while the second with the id "p-nhb" is for selecting programming languages. Initializing the Bootstrap Multi-Select To enable the Bootstrap Multi-Select with checkboxes, you need to initialize it using JavaScript. Include the following script at the end of your HTML file: <script> ...... </script> This script initializes the Bootstrap Multi-Select for both elements and provides functionality to dynamically update the options in the "p-nhb" dropdown based on the selections in the "multiple-checkboxes" dropdown.

Conclusion Creating a Bootstrap Multi-Select Option with checkboxes in Bootstrap 5.2 can greatly enhance the user experience of your web applications. This feature is useful in scenarios where you need to allow users to make multiple selections from a list of options.

Bootstrap provides a versatile and customizable framework for developing web applications, and the Multi-Select component is just one example of its capabilities.