Bootstrap Custom Forms

Post by **C0D3D** »

Creating custom checkboxes with Bootstrap

Example 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Custom Checkboxes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <form>
        <div class="form-check">
            <input type="checkbox" class="form-check-input" name="customCheck" id="customCheck1">
            <label class="form-check-label" for="customCheck1">Custom checkbox</label>
        </div>
        <div class="form-check mt-2">
            <input type="checkbox" class="form-check-input" name="customCheck" id="customCheck2" checked>
            <label class="form-check-label" for="customCheck2">Another custom checkbox</label>
        </div>
    </form>
</div>
</body>
</html>

Creating custom radio buttons with Bootstrap

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Custom Radio Buttons</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <form>
        <div class="form-check">
            <input type="radio" class="form-check-input" name="customRadio" id="customRadio1">
            <label class="form-check-label" for="customRadio1">Custom radio</label>
        </div>
        <div class="form-check mt-2">
            <input type="radio" class="form-check-input" name="customRadio" id="customRadio2" checked>
            <label class="form-check-label" for="customRadio2">Another custom radio</label>
        </div>
    </form>
</div>
</body>
</html>

Disabling custom checkboxes and radio buttons in Bootstrap

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Disabled Custom Checkboxes and Radio Buttons</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <form>
        <div class="form-check">
            <input type="checkbox" class="form-check-input" id="customCheck" disabled>
            <label class="form-check-label" for="customCheck">Disabled custom checkbox</label>
        </div>
        <div class="form-check mt-2">
            <input type="radio" class="form-check-input" id="customRadio" disabled>
            <label class="form-check-label" for="customRadio">Disabled custom radio</label>
        </div>
    </form>
</div>
</body>
</html>

Creating toggle switch with Bootstrap

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Toggle Switch</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <form>
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="switchDefault">
            <label class="form-check-label" for="switchDefault">Default switch checkbox</label>
        </div>
        <div class="form-check form-switch mt-2">
            <input class="form-check-input" type="checkbox" id="switchChecked" checked>
            <label class="form-check-label" for="switchChecked">Checked switch checkbox</label>
        </div>
        <div class="form-check form-switch mt-2">
            <input class="form-check-input" type="checkbox" id="switchDisabled" disabled>
            <label class="form-check-label" for="switchDisabled">Disabled switch checkbox</label>
        </div>
    </form>
</div>
</body>
</html>

Creating custom select menu with Bootstrap

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Custom Select Dropdown</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <form>
        <select class="form-select">
            <option selected>Custom select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </form>
</div>
</body>
</html>

Height sizing of Bootstrap custom select menu

Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Custom Select Sizing</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <form>
        <select class="form-select form-select-lg">
            <option selected>Large custom select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
        <select class="form-select mt-3">
            <option selected>Default custom select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
        <select class="form-select form-select-sm mt-3">
            <option selected>Small custom select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </form>
</div>
</body>
</html>

Creating custom range input with Bootstrap

Example 7

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Custom Range</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <form>
        <label for="customRange">Custom range</label>
        <input type="range" class="form-range" id="customRange">
    </form>
</div>
</body>
</html>

Specifying min, max and step attributes for Bootstrap custom range

Example 8

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Custom Range with Min Max and Step</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <form>
        <label for="customRange">Custom range</label>
        <input type="range" class="form-range" min="0" max="10" step="0.5" id="customRange">
    </form>
</div>
</body>
</html>

Bootstrap Custom Forms

Bootstrap Custom Forms

Who is online