Bootstrap 4 | Custom Forms

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
    <script src
    </script
    <script src
    </script
    <script src
    </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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
    <script src
    </script
    <script src
    </script
    <script src
    </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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
    <script src
    </script
    <script src
    </script
    <script src
    </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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
    <script src
    </script
    <script src
    </script
    <script src
    </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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
    <script src
    </script
    <script src
    </script
    <script src
    </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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
    <script src
    </script
    <script src
    </script
    <script src
    </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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
    <script src
    </script
    <script src
    </script
    <script src
    </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 fole 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

chevron_right


Output:

Custom Range: The .custom-range class is used within <range> element to create custom_range menu.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
    <script src
    </script
    <script src
    </script
    <script src
    </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

chevron_right




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.