How to Create Form Layouts with Bootstrap ?

Last Updated : 07 Mar, 2024

Bootstrap is a popular CSS framework that makes it easier to create responsive web designs. One of its key features is its robust support for form layouts, allowing developers to easily structure and style input fields, labels, buttons, and other form elements.

Below Bootstrap layouts can be used to create a form layout:

Table of Content

Vertical Form Layout
Horizontal Form Layout
Inline Form Layout

Vertical Form Layout

In a vertical form layout, form elements are stacked on top of each other, making efficient use of vertical space. This layout is suitable for forms with a small to moderate number of fields.

Example: The below code creates a vertical form layout using the Bootstrap classes.

HTML

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <title>Vertical Form</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        integrity=
"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
        crossorigin="anonymous">
</head>
 
<body>
    <div class=
        "container-fluid bg-success 
        d-flex justify-content-center 
        align-items-center" style="min-height: 100vh;">
        <form class="row g-3" id="myForm"
            onsubmit="return validateForm()">
            <div class="fw-bold">
                <label for="inputuser" class="form-label">
                    Username
                </label>
                <input type="text" class="form-control"
                    id="inputuser" required>
            </div>
            <div class="fw-bold">
                <label for="inputPassword" class="form-label">
                    Password
                </label>
                <div class="input-group">
                    <input type="password" class="form-control"
                        id="inputPassword" required>
                    <button class=
                        "btn btn-outline-secondary 
                        bg-primary text-light border-primary" 
                        type="button"
                        id="togglePassword">
                        Show
                    </button>
                </div>
            </div>
            <div class="fw-bold">
                <label for="inputCity" class="form-label">
                    City
                </label>
                <input type="text" class="form-control"
                    id="inputCity" required>
            </div>
            <div class="fw-bold">
                <label for="inputState" class="form-label">
                    State
                </label>
                <select id="inputState" class="form-select" required>
                    <option selected>Choose...</option>
                    <option>Delhi</option>
                    <option>Haryana</option>
                    <option>Karnataka</option>
                    <option>Punjab</option>
                    <option>Madhya Pradesh</option>
                </select>
            </div>
            <div class="col-12 mt-4">
                <button type="submit" class="btn btn-primary">
                    Sign in
                </button>
            </div>
        </form>
    </div>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous">
    </script>
    <script>
        const passwordInput = 
            document.getElementById('inputPassword');
        const togglePasswordButton = 
            document.getElementById('togglePassword');
 
        togglePasswordButton.addEventListener('click', 
            function () {
            const type = 
                passwordInput.getAttribute('type') === 
                    'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            this.textContent = type === 
                'password' ? 'Show' : 'Hide';
        });
 
        function validateForm() {
            const username = 
                document.getElementById('inputuser').value;
            const password = 
                document.getElementById('inputPassword').value;
            const city = 
                document.getElementById('inputCity').value;
            const state = 
                document.getElementById('inputState').value;
 
            if (username.trim() === '' || 
                password.trim() === '' || 
                city.trim() === '' || 
                state === 'Choose...') {
                alert('Please fill in all fields');
                return false;
            }
 
            if (password.length < 8) {
                alert('Password must be at least 8 characters long');
                return false;
            }
 
            return true;
        }
    </script>
</body>
 
</html>

Output:

formGIF

Horizontal Form Layout

In a horizontal form layout, form elements are arranged side by side, with labels aligned to the left of their corresponding input fields. This layout is ideal for forms with longer labels or when horizontal space is abundant.

Example: The below code implements Bootstrap classes to create a Horizontal form.

HTML

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <title>Horizontal Form</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        integrity=
"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
        crossorigin="anonymous">
</head>
 
<body>
    <div class=
        "container-fluid bg-success d-flex 
        justify-content-center align-items-center" 
        style="min-height: 100vh;">
        <div class="container">
            <h2>Horizontal Form</h2>
            <form class="form-horizontal" id="myForm"
                onsubmit="return validateForm()">
                <div class="form-group row  mt-5 mb-3">
                    <label class="col-sm-2 col-form-label fw-bold"
                        for="inputName">
                        Name:
                    </label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control"
                            id="inputName" placeholder="Enter your name">
                    </div>
                </div>
                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label fw-bold"
                        for="inputEmail">
                        Email:
                    </label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control"
                            id="inputEmail" placeholder="Enter your email">
                    </div>
                </div>
                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label fw-bold"
                        for="inputPassword">
                        Password:
                    </label>
                    <div class="col-sm-10">
                        <div class="input-group">
                            <input type="password" class="form-control"
                                id="inputPassword"
                                placeholder="Enter your password">
                            <button class=
                                "btn btn-outline-secondary 
                                bg-primary border-primary text-light" 
                                type="button" id="togglePassword">
                                Show
                            </button>
                        </div>
                    </div>
                </div>
                <div class="form-group row mb-3">
                    <label class="col-sm-2 col-form-label fw-bold"
                        for="inputMessage">
                        Message:
                    </label>
                    <div class="col-sm-10">
                        <textarea class="form-control"
                            id="inputMessage" rows="3"
                            placeholder="Enter your message"></textarea>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-10 offset-sm-2">
                        <button type="submit" class="btn btn-primary">
                            Submit
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous">
    </script>
    <script>
 
        document.getElementById("togglePassword").
            addEventListener("click", function () {
            const passwordInput = 
                document.getElementById("inputPassword");
            if (passwordInput.type === "password") {
                passwordInput.type = "text";
                this.textContent = "Hide";
            } else {
                passwordInput.type = "password";
                this.textContent = "Show";
            }
        });
 
        function validateForm() {
            const name = 
                document.getElementById("inputName").value.trim();
            const email = 
                document.getElementById("inputEmail").value.trim();
            const password = 
                document.getElementById("inputPassword").value.trim();
            const message = 
                document.getElementById("inputMessage").value.trim();
 
            if (name === "" || 
                email === "" || 
                password === "" || 
                message === "") {
                alert("Please fill in all fields.");
                return false;
            }
 
            if (!email.includes("@")) {
                alert("Please enter a valid email address.");
                return false;
            }
 
            if (password.length < 8) {
                alert("Password must be at least 8 characters long.");
                return false;
            }
 
            return true;
        }
    </script>
</body>
 
</html>

Output:

formGIF

Inline Form Layout

In an inline form layout, form elements are displayed horizontally in a single line, with labels and input fields inline. This layout is useful for compact forms or when horizontal space is limited.

Example: The below code creates a inline form using the Bootstrap form classes.

HTML

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Inline Form</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        integrity=
"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
        crossorigin="anonymous">
</head>
 
<body>
    <div class=
        "container-fluid bg-success d-flex 
        justify-content-center align-items-center" 
        style="min-height: 100vh;">
        <form id="inlineForm" class=
            "row row-cols-lg-auto g-3 align-items-center"
            onsubmit="return validateForm()">
            <div class="col-12">
                <label class="visually-hidden"
                    for="inlineFormInputGroupUsername">
                    Username
                </label>
                <div class="input-group">
                    <div class="input-group-text">@</div>
                    <input type="text" class="form-control"
                        id="inlineFormInputGroupUsername"
                        placeholder="Username"
                        required>
                </div>
            </div>
 
            <div class="col-12">
                <label class="visually-hidden"
                    for="inlineFormInputPassword">
                    Password
                </label>
                <div class="input-group">
                    <input type="password" class="form-control"
                        id="inlineFormInputPassword"
                        placeholder="Password"
                        required>
                    <button type="button" class=
                        "btn btn-outline-secondary 
                        bg-primary text-light border-primary"
                        onclick="togglePassword()">
                        Show/Hide
                    </button>
                </div>
            </div>
 
            <div class="col-12">
                <label class="visually-hidden"
                    for="inlineFormSelectPref">
                    Preference
                </label>
                <select class="form-select"
                    id="inlineFormSelectPref" required>
                    <option selected disabled>Choose...</option>
                    <option value="1">Mumbai</option>
                    <option value="2">Delhi</option>
                    <option value="3">Noida</option>
                </select>
            </div>
            <div class="col-12">
                <button type="submit" class="btn btn-primary">
                    Submit
                </button>
            </div>
        </form>
    </div>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous">
    </script>
    <script>
        function validateForm() {
            const username = document.
                getElementById("inlineFormInputGroupUsername").value;
            const password = document.
                getElementById("inlineFormInputPassword").value;
            const preference = document.
                getElementById("inlineFormSelectPref").value;
 
            if (!username || !password || !preference) {
                alert("Please fill in all fields");
                return false;
            }
 
            if (password.length < 8) {
                alert("Password must be at least 8 characters long");
                return false;
            }
 
 
            return true;
        }
 
        function togglePassword() {
            const passwordField = document.
                getElementById("inlineFormInputPassword");
            if (passwordField.type === "password") {
                passwordField.type = "text";
            } else {
                passwordField.type = "password";
            }
        }
    </script>
</body>
 
</html>

Output:

formGIF

Suggest improvement

How to Create a Four-Column Layout with Bootstrap ?

Share your thoughts in the comments

How to Create Form Layouts with Bootstrap ?

Vertical Form Layout

HTML

Horizontal Form Layout

HTML

Inline Form Layout

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?