Bootstrap 4 | Custom Forms - GeeksforGeeks

29 Nov, 2021
Bootstrap 4 enables to customize the browser’s default form and control layouts. The customized form can be created by using Bootstrap 4 like checkbox, radio buttons, file inputs and more. Bootstrap simplifies the process of alignment and styling of web pages in many forms like label, input, field, textarea, button, checkbox, etc.Custom Checkbox: The .custom-control and .custom-checkbox classes are used in <div> element to wrap the container element. The .custom-control-input class is used with input type=”checkbox” to create custom input textbox.Example:  
html
<!DOCTYPE html><html lang="en">     <head>    <title>        Bootstrap Custom forms    </title>         <meta charset="utf-8">         <meta name="viewport"        content="width=device-width, initial-scale=1">         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body>    <div class="container">        <h1 class="text-center text-success">GeeksforGeeks</h1>        <h2 class="text-center">Custom Checkbox</h2>         <form action="#">            <div class="custom-control custom-checkbox mb-3">                <input type="checkbox" class="custom-control-input"                    id="customCheckBox" name="checkbox1">                <label class="custom-control-label" for="customCheckBox">                    Custom checkbox                </label>            </div>                         <div class="custom-control custom-checkbox mb-3">                <input type="checkbox" class="custom-control-input"                    id="customCheckBox" name="checkbox1" checked>                <label class="custom-control-label" for="customCheckBox">                    Custom checkbox                </label>            </div>                         <div class="mb-3">                <input type="checkbox" id="defaultCheckBox" name="checkbox2">                <label for="defaultCheckBox">Default checkbox</label>            </div>                         <input type="checkbox" id="defaultCheckBox" name="checkbox2"                    checked>            <label for="defaultCheckBox">Default checkbox</label>            <br>            <button type="submit" class="btn btn-success">Submit</button>        </form>    </div></body></html>
Output:  
Custom switch: The .custom-control and .custom-switch classes are used to wrap the input checkbox. The .custom-control-input class is used with label tag. Bootstrap switch/toggle is a simple component used for activating one of two predefined options. Commonly used as an on/off button. A toggle button allows the user to change a setting between two states.Example:  
html
<!DOCTYPE html><html lang="en">     <head>    <title>        Bootstrap Custom forms    </title>         <meta charset="utf-8">         <meta name="viewport"        content="width=device-width, initial-scale=1">         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body>    <div class="container">        <h1 class="text-center text-success">GeeksforGeeks</h1>        <h2 class="text-center">Custom Switch Buttons</h2>         <form action="#">            <div class="custom-control custom-switch">                <input type="checkbox" class="custom-control-input"                    id="customSwitch" name="switch" checked>                <label class="custom-control-label" for="customSwitch">                    Toggle On                </label>            </div>            <br>            <div class="custom-control custom-switch">                <input type="checkbox" class="custom-control-input"                    id="customSwitch" name="switch">                <label class="custom-control-label" for="customSwitch">                    Toggle Off                </label>            </div>            <br>            <button type="submit" class="btn btn-success">Submit</button>        </form>    </div></body></html>
Output:  
Custom Radio button: It is same as checkbox. It uses .custom-radio instead of .custom-input on label tag. Checkbox and radio buttond are made to support HTML-based form validation and give a brief, friendly labels.Example:  
html
<!DOCTYPE html><html lang="en">     <head>    <title>        Bootstrap Custom forms    </title>         <meta charset="utf-8">         <meta name="viewport"        content="width=device-width, initial-scale=1">         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body>    <div class="container">        <h1 class="text-center text-success">GeeksforGeeks</h1>        <h2 class="text-center">Custom Radio Buttons</h2>         <form action="#">            <div class="custom-control custom-radio">                <input type="radio" class="custom-control-input"                    id="customRadio" name="radioButton" checked>                <label class="custom-control-label" for="customRadio">                    Radio Button On                </label>            </div>            <br>            <div class="custom-control custom-radio">                <input type="radio" class="custom-control-input"                    id="customRadio" name="radioButton">                <label class="custom-control-label" for="customRadio">                    Radio Button Off                </label>            </div>            <br>            <button type="submit" class="btn btn-success">Submit</button>        </form>    </div></body></html>
Output:  
Custom Inline form control: Custom checkbox and radio buttons are used as a default to use inline control to display them inline by using .custom-control-inline class. The group checkboxes or radio buttons on the same horizontal row by adding .form-check-inline to .form-check class.Example:  
html
<!DOCTYPE html><html lang="en">     <head>    <title>        Bootstrap Custom forms    </title>         <meta charset="utf-8">         <meta name="viewport"        content="width=device-width, initial-scale=1">         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body>    <div class="container">        <h1 class="text-center text-success">GeeksforGeeks</h1>        <h2 class="text-center">Inline Custom Form Controls</h2>         <form action="#">            <div class="custom-control custom-radio custom-control-inline">                <input type="radio" class="custom-control-input"                    id="customRadio" name="radioButton" checked>                <label class="custom-control-label" for="customRadio">                    Radio Button                </label>            </div>            <div class="custom-control custom-radio custom-control-inline">                <input type="radio" class="custom-control-input"                    id="customRadio" name="radioButton">                <label class="custom-control-label" for="customRadio">                    Radio Button                </label>            </div>            <br><br>            <div class="custom-control custom-checkbox custom-control-inline">                <input type="checkbox" class="custom-control-input"                    id="customCheckBox" name="checkbox1">                <label class="custom-control-label" for="customCheckBox">                    Custom checkbox                </label>            </div>            <div class="custom-control custom-checkbox custom-control-inline">                <input type="checkbox" class="custom-control-input"                    id="customCheckBox" name="checkbox1" checked>                <label class="custom-control-label" for="customCheckBox">                    Custom checkbox                </label>            </div>            <br><br>            <button type="submit" class="btn btn-success">Submit</button>        </form>    </div></body></html>
Output:  
Custom select menu: It is used to select any particular attribute value and customized according to users need. The .custom-select class is used within <select> element to create custom menu. It uses <select> and <option> tag for customization. Inside option tag, it puts value and show in the dropdown when you will run the program. Example:  
html
<!DOCTYPE html><html lang="en">     <head>    <title>        Bootstrap Custom forms    </title>         <meta charset="utf-8">         <meta name="viewport"        content="width=device-width, initial-scale=1">         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body>    <div class="container">        <h1 class="text-center text-success">GeeksforGeeks</h1>        <h2 class="text-center">Custom Select Menu</h2>         <form action="#">            <select name="sub" class="custom-select mb-3">                <option selected>Select Computer science Subject</option>                <option value="DS">Data Structure</option>                <option value="Algo">Algorithm</option>                <option value="CN">Computer Networks</option>                <option value="OS">Operating System</option>            </select>                     <button type="submit" class="btn btn-success">Submit</button>        </form>    </div></body></html>
Output:  
Custom Select Menu Size: The .custom-select-sm class is used to create small and .custom-select-lg class is used to create large select menu.Example:  
html
<!DOCTYPE html><html lang="en">     <head>    <title>        Bootstrap Custom forms    </title>         <meta charset="utf-8">         <meta name="viewport"        content="width=device-width, initial-scale=1">         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body>    <div class="container">        <h1 class="text-center text-success">GeeksforGeeks</h1>        <h2 class="text-center">Custom Select Menu Size</h2>         <form action="#">            <select name="sub" class="custom-select custom-select-lg mb-3">                <option selected>Select Computer science Subject</option>                <option value="DS">Data Structure</option>                <option value="Algo">Algorithm</option>                <option value="CN">Computer Networks</option>                <option value="OS">Operating System</option>            </select>                         <select name="sub" class="custom-select custom-select mb-3">                <option selected>Select Computer science Subject</option>                <option value="DS">Data Structure</option>                <option value="Algo">Algorithm</option>                <option value="CN">Computer Networks</option>                <option value="OS">Operating System</option>            </select>                         <select name="sub" class="custom-select custom-select-sm mb-3">                <option selected>Select Computer science Subject</option>                <option value="DS">Data Structure</option>                <option value="Algo">Algorithm</option>                <option value="CN">Computer Networks</option>                <option value="OS">Operating System</option>            </select>        </form>    </div></body></html>
Custom File Upload: for make a custom file control, wrap the tag inside div tag that uses .custom-file class .The file uploader component has always been part of the HTML specification since the very early days. Lately, though, it is often hidden behind nicer user interfaces that support the drag-and-drop of files and preview of images. Some basic restyling of the classic input box with a push button that unifies the rendering across all browsers is possible. for label tag it uses .custom-control-label class. for input tag it uses .custom-control-input class .Example:  
HTML
<!DOCTYPE html><html lang="en">     <head>    <title>        Bootstrap Custom forms    </title>         <meta charset="utf-8">         <meta name="viewport"        content="width=device-width, initial-scale=1">         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body>    <div class="container">        <h1 class="text-center text-success">GeeksforGeeks</h1>        <h2 class="text-center">Custom File Upload</h2>         <form action="#">              <p>Custom file upload:</p>              <div class="custom-file">                <input type="file" class="custom-file-input"                        id="fileUpload" name="file_name">                <label class="custom-file-label" for="fileUpload">                    Choose file from computer                </label>            </div>        </form>    </div>         <!-- Script to appear file name in select box -->    <script>        $(".custom-file-input").on("change", function() {            var file_name = $(this).val().split("\\").pop();            $(this).siblings(".custom-file-label")                    .addClass("selected").html(file_name);        });</script> </body></html>
Output:  
Custom Range: The .custom-range class is used within <range> element to create custom_range menu.Example:  
html
<!DOCTYPE html><html lang="en">     <head>    <title>        Bootstrap Custom forms    </title>         <meta charset="utf-8">         <meta name="viewport"        content="width=device-width, initial-scale=1">         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head> <body>    <div class="container">        <h1 class="text-center text-success">GeeksforGeeks</h1>        <h2 class="text-center">Custom Range</h2>         <form action="#">            <label for="cus_range">Custom range</label>                         <input type="range" class="custom-range"                    id="cus_range" name="range">        </form>    </div></body></html>
Supported Browser:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
ysachin2314
rs1686740
Bootstrap-4
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to align navbar items to the right in Bootstrap 4 ?
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills