BS4 Custom Forms
Bootstrap 4 Custom Forms
Customized form components included with Bootstrap 4 are meant to take the place of the browser’s default elements.
==== example mukavu -====
Custom Checkbox
Wrap a container element, such as <div>, with the classes .custom-control and .custom-checkbox around the checkbox to create a custom checkbox. Next, include the .custom-control-input in the input that has the type=”checkbox” attribute.
Tip: Include the .custom-control-label class in labels if you plan to use them for accompanying content. Keep in mind that the for attribute’s value and the checkbox’s id must match:
Toggle me
Example
<form>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>
</form>
Custom Switch
Wrap a checkbox in a container element (such as <div>) with the classes .custom-control and .custom-switch to create a custom “toggle switch”. Next, give the checkbox the .custom-control-input class:
==== BUTTON MUKAVA ====
Example
<form>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1">
<label class="custom-control-label" for="switch1">Toggle me</label>
</div>
</form>
Custom Radio buttons
Wrap a container element, such as <div>, with the classes.custom-control and.custom-radio around the radio button to create a custom radio button. Next, include the.custom-control-input in the input that has the type=”radio” attribute.
Tip: Add the .custom-control-label class to it if you plan to utilize labels for the accompanying content. Keep in mind that the radio’s id and the value of the for property must match:
Example
<form>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
<label class="custom-control-label" for="customRadio">Custom radio</label>
</div>
</form>
Inline Custom Form Controls
Add the .custom-control-inline to the wrapper/container if you want the custom form controls to be inline, or side by side:
Example
<form>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
<label class="custom-control-label" for="customRadio">Custom radio 1</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
<label class="custom-control-label" for="customRadio2">Custom radio 2</label>
</div>
</form>
Custom Select Menu
Add the .custom-select class to the <select> element to create a custom select menu:
==== BUTTON MUKAVA ====
Example
<form>
<select name="cars" class="custom-select">
<option selected>Custom Select Menu</option>
<option value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
Custom Select Menu Size
To make a small choose menu, use the .custom-select-sm class, and to make a large one, use the .custom-select-lg class:
==== BUTTON MUKAVA ====
Example
<form>
<!-- Small -->
<select name="cars" class="custom-select custom-select-sm">
<option selected>Small Custom Select Menu</option>
<option value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<!-- Large -->
<select name="cars" class="custom-select custom-select-lg">
<option selected>Large Custom Select Menu</option>
<option value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
Custom Range
Add the .custom-range class to an input with type=”<range>” to create a custom range menu:
==== BUTTON MUKAVA ====
Example
<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>
Custom File Upload
Wrap a container element around the input with type=”file” and a class of .custom-file to create a custom file upload. Next, give it the .custom-file-input extension.
Advice: Include the .custom-file-label class in labels if you plan to use them for accompanying text. Keep in mind that the checkbox’s id and the value of the for property must match:
==== BUTTON MUKAVA ====
It should be noted that additional jQuery code is required if you like the file name to show up when you choose a certain file:
Example
<form>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
<script>window.addEventListener('DOMContentLoaded', function() {
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
});</script>
