Open In App

Bootstrap 4 | Custom Forms

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    <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>


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=
    <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>


Output: 

Custom Radio button: It is the same as a checkbox. It uses .custom-radio instead of .custom-input on the label tag. Checkbox and radio buttons are made to support HTML-based form validation and give 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=
    <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>


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 the .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=
    <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>


Output: 

Custom select menu: It is used to select any particular attribute value and customized it according to users’ needs. The .custom-select class is used within <select> element to create a custom menu. It uses <select> and <option> tags for customization. Inside the option tag, it puts value and shows 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=
    <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>


Output: 

Custom Select Menu Size: The .custom-select-sm class is used to create a small and .custom-select-lg class is used to create a 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=
    <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>


Output:

Custom File Upload: for making a custom file control, wrap the tag inside the div tag that uses the .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 a 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 the label tag, it uses .custom-control-label class. 
for the input tag, it uses the .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=
    <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 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 a 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=
    <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>


Output:

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Last Updated : 28 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads