Bootstrap 5 Validation Browser defaults

Last Updated : 23 Jul, 2025

Bootstrap5 Validation Browser defaults provide feedback by browser default behaviors. It mainly uses browser default when we do not want to provide validation feedback messages or are not interested in writing javascript code for validation then we can use browser defaults. Browser default validation depends on your OS.

Bootstrap 5 Validation Browser defaults Class:

There is no pre-defined class, these feedback styles cannot be styled with CSS, but you can still customize the feedback text through JavaScript.

Syntax:

<form class="row">
    ...
</form>

Example 1: This example describes the Validation Browser defaults in Bootstrap5.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" 
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          crossorigin="anonymous">
</head>

<body>
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h3>
        Bootstrap5 Validation Browser defaults
    </h3>
    <form class="row g-5">
        <section class="col-4">
            <label for="name" 
                   class="form-label">
                Your name
            </label>
            <input type="text" 
                   class="form-control" 
                   id="name" 
                   required>
        </section>
        <section class="col-12">
            <button class="btn btn-primary" 
                    type="submit">
                Submit form
            </button>
        </section>
    </form>
</body>

</html>

Output:

Example 2: This is another example that describes the browser default validation in Bootstrap5.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" 
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          crossorigin="anonymous">
</head>

<body>
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h3>
        Bootstrap5 Validation Browser defaults
    </h3>

    <form class="row g-5">
        <section class="col-4">
            <label for="name" 
                   class="form-label">
                First name
            </label>
            <input type="text" 
                   class="form-control" 
                   id="name" 
                   required>
        </section>

        <section class="col-4">
            <label for="name2" 
                   class="form-label">
                Last name
            </label>
            <input type="text" 
                   class="form-control" 
                   id="name2" 
                   required>
        </section>

        <section class="col-4">
            <label for="name3" 
                   class="form-label">
                City
            </label>
            <input type="text" 
                   class="form-control" 
                   id="name3" 
                   required>
        </section>

        <section class="col-4">
            <label for="name4" 
                   class="form-label">
                State
            </label>
            <input type="text" 
                   class="form-control" 
                   id="name4" 
                   required>
        </section>

        <section class="col-12">
            <button class="btn btn-primary" 
                    type="submit">
                Submit form
            </button>
        </section>
    </form>
</body>

</html>