BootStrap 5 Reboot Forms

Last Updated : 09 Jan, 2023

Bootstrap 5 Reboot Forms are used to reboot form elements, that took it to the base style where there will be no effect of HTML tags inherited. There are some elements listed below that have been rebooted.

Bootstrap 5 Reboot Forms element list:

HTML <fieldset> Tag: It has no borders, padding, or margin so it can be easily used as a wrapper for each input or group of inputs.
HTML <legend> Tag: It has also been restyled to be displayed as a heading of sorts.
HTML <label> Tag: This is set to display: inline-block to allow margin to be applied.
HTML <input>, and <select> Tag: These are mostly addressed by Normalize, but Reboot removes their margin and sets line-height: inherit, too.
HTML <textarea> Tag: This is modified to only be resizable vertically as horizontal resizing often “breaks” page layout.
HTML <button> Tag: Button elements have cursor: pointer when :not(:disabled).

Bootstrap 5 Reboot Forms:

Pointers on buttons: It is used to change the default cursor to a pointer, it helps indicate elements are interactive.

Syntax:

<form>
    ....
</form>

Below examples illustrate the Bootstrap 5 Reboot Forms:

Example 1: In this example, we will create a simple feedback form.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
          integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
          crossorigin="anonymous">
    </script>
</head>
 
<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
 
        <h2>Bootstrap 5 Reboot Form</h2>
        <form>
            <div class="form-group">
                <label>Email address</label>
                <input type="email"
                       class="form-control"
                       placeholder="geeks@example.com">
            </div>
            <div class="form-group mt-2">
                <label>Example select</label>
                <select class="form-control">
                    <option>Bootstrap 1</option>
                    <option>Bootstrap 2</option>
                    <option>Bootstrap 3</option>
                    <option>Bootstrap 4</option>
                    <option>Bootstrap 5</option>
                </select>
            </div>
            <div class="form-group mt-2">
                <label>Example textarea</label>
                <textarea class="form-control"></textarea>
            </div>
        </form>
    </div>
</body>
 
</html>

Output:

Bootstrap 5 Reboot Forms

Example 2: In this example, we will create a form where all the rebooted elements will be covered.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>
 
<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
 
        <h2>Bootstrap 5 Reboot Form</h2>
        <form>
 
            <div class="form-group mt-2">
                <fieldset class="form-control">
                    <legend>Emp Details:</legend>
                    <label>Name:</label>
                    <br>
                    <input type="text">
                    <br />
                    <label>Emp_Id:</label>
                    <br />
                    <input type="text">
                    <br />
                    <label>Designation:</label>
                    <br />
                    <input type="text">
                </fieldset>
                <label>Your Issus</label>
                <select class="form-control">
                    <option>Salary not Credited</option>
                    <option>Less Salary Credited</option>
                </select>
            </div>
            <div class="form-group mt-2">
                <label>Example textarea</label>
                <textarea class="form-control"></textarea>
            </div>
            <br>
            <button class="btn-primary">Submit</button>
        </form>
    </div>
</body>
</html>