CODEWITHSUNDEEP
htmlcssbootstrap-5bootstrap-select
LogicalDeveloper
LogicalDeveloper

Reputation: 13

Customize Select using bootstrap v5.3

This is the select I would like to replicate using bootstrap v5.3

not selected

opening selection

I've been looking at all the options given by bootstrap.

I don't see any select that has details within the <options> tag

Is it possible with bootstrap or would I have to create a custom select for this as the following does not work and displays everything inline:

<select>
    <option>
         Option 1 <br />
         Created At: date...
    </option>
</select>

Upvotes: 0

Views: 355

Answers (1)

LogicalDeveloper
LogicalDeveloper

Reputation: 13

Thanks to @Yogi for recommending bootstrap dropdown instead

Using bootstrap Dropdown and jquery, i am able to replicate the select in my question :)

$(document).ready(function (e) {
    $('.dropdown-menu a').on('click', function () {
        var selectedOption = $(this).attr("data-value");
        $('#accessListOptions').val(selectedOption); 
        $('.dropdown-item').removeClass('active');  
        $(this).addClass('active');                 
    });
});
.dropdown-toggle {
    cursor: pointer;
}

.dropdown-menu {
    width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="mb-3">
    <div class="dropdown">
        <label for="access_list">Access List</label>
        <input type="text" class="form-control dropdown-toggle" id="accessListOptions" placeholder="Select an option"
            value="Publicly Accessible" data-bs-toggle="dropdown" aria-expanded="false" readonly />

        <ul class="dropdown-menu" aria-labelledby="accessListOptions">
            <li>
                <a class="dropdown-item active" href="javascript:void(0);" data-value="Publicly Accessible">
                    <i class="fa-solid fa-lock-open" style="color:gold;"></i>&nbsp;Publicly Accessible <br />
                    <span class="text-muted" style="font-size:12px;">No Access Restrictions</span>
                </a>
            </li>
            <li>
                <a class="dropdown-item" href="javascript:void(0);" data-value="Internal Service">
                    <i class="fa-solid fa-lock" style="color:red;"></i>&nbsp;Internal Service <br />
                    <span class="text-muted" style="font-size:12px;">0 Users, 2 Rules - Created: 28 May 2022, 06:14 AM</span>
                </a>
            </li>
        </ul>
    </div>
</div>

Upvotes: 1

Related Questions