Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

Create checkbox, select, radio button, toggle switch with Bootstrap library

Ethan Karla 577 28 Jul 2021

How to create checkbox, select, radio button, toggle switch with bootstrap library?

Ask by Ethan Karla

Updated 28 Jul 2021

1 Answers

Anonymous User 03 Aug 2021

To make a checkbox, select, radio button, toggle switch with Bootstrap library see the below example:

<html lang='en'>

<head>

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>

    <title>Bootstrap Dropdown</title>

    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>

</head>

<body>

    <div class='container d-flex justify-content-center flex-column'>

        <form class='row g-3'>

            <div class='col-md-4'>

                <div class='form-check'>

                    <input class='form-check-input' type='checkbox' value='' id='flexCheckDefault'>

                    <label class='form-check-label' for='flexCheckDefault'>

                        Checkbox

                    </label>

                </div>

            </div>

            <div class='col-md-4'>

                <select class='form-select' aria-label='Default select example'>

                    <option selected>Select Gender</option>

                    <option value='1'>Male</option>

                    <option value='2'>Female</option>

                    <option value='3'>Transgender</option>

                </select>

            </div>

            <div class='col-md-4'>

                <div class='form-check'>

                    <input class='form-check-input' type='radio' name='flexRadioDefault' id='flexRadioDefault1'>

                    <label class='form-check-label' for='flexRadioDefault1'>

                        Radio

                    </label>

                </div>

            </div>

            <div class='col-md-4'>

                <div class='form-check form-switch'>

                    <input class='form-check-input' type='checkbox' id='flexSwitchCheckDefault'>

                    <label class='form-check-label' for='flexSwitchCheckDefault'>Toggle Button</label>

                </div>

            </div>

        </form>

    </div>

</body>

</html>

Hope this will help you.

Happy Coding!

advertising

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.