Bootstrap 4 Custom Forms
Clash Royale CLAN TAG#URR8PPP <!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
Bootstrap 4 Custom Forms
❮ Previous
Next ❯
Bootstrap 4 Custom Forms
Bootstrap 4 comes with customized form elements, that are meant to replace browser defaults:
Custom Range:
Default Range:
Custom select menu
One
Two
Three
Default select menu
One
Two
Three
Custom Checkbox
To create a custom checkbox, wrap a container element, like <div>, with a
class of .custom-control and .custom-checkbox around the checkbox. Then add the .custom-control-input to the input with type="checkbox".
Tip: If you use labels for accompanying text, add the .custom-control-label class to it.
Note that the value of the for attribute should match the id of the checkbox:
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>Try it Yourself »
Custom Radio buttons
To create a custom radio button, wrap a container element, like <div>, with a
class of .custom-control and .custom-radio around the radio button. Then add the .custom-control-input to the input with type="radio".
Tip: If you use labels for accompanying text, add the .custom-control-label class to it.
Note that the value of the for attribute should match the id of the radio:
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>Try it Yourself »
Inline Custom Form Controls
If you want the custom form controls to sit side by side (inline), add the .custom-control-inline to the wrapper/container:
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>Try it Yourself »
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
Custom Select Menu
To create a custom select menu, add the .custom-select class to the
<select> element:
Custom Select Menu
Volvo
Fiat
Audi
Default select menu
Volvo
Fiat
Audi
Example
<form>
<select name="cars" class="custom-select-sm">
<option selected>Custom Select Menu</option>
<option
value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>Try it Yourself »
Custom Select Menu Size
Use the .custom-select-sm class to create a small select menu and the .custom-select-lg class for a large one:
Small Custom Select Menu
Volvo
Fiat
AudiDefault Custom Select Menu
Volvo
Fiat
AudiLarge Custom Select Menu
Volvo
Fiat
Audi
Example
<form>
<!-- Small -->
<select name="cars" class="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-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>Try it Yourself »
Custom Range
To create a custom select menu, add the .custom-range class to an
input with type="<range>":
Example
<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>Try it Yourself »
Custom File Upload
To create a custom file upload, wrap a container element with a
class of .custom-file around the input with type="file". Then add the .custom-control-input to it.
Tip: If you use labels for accompanying text, add the .custom-control-label class to it.
Note that the value of the for attribute should match the id of the checkbox:
Default 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>Try it Yourself »
❮ Previous
Next ❯