Bootstrap 5 Layout Inline forms

Last Updated : 05 Feb, 2023

Bootstrap 5 Layout Inline forms consist of a responsive horizontal layout. All of the elements are inline and left-aligned, and labels are alongside, and only apply to forms within viewports.

Bootstrap 5 Layout Inline forms used classes:

row-cols-lg-auto: This class is used to create horizontal layouts.
input-group: This class is used to enhance an input by adding text in front or behind the input field.
form-control: This class is used for input elements to provide bootstrap 5 input styling.
form-select: This class is used to select options from multiple options from the menu.

Syntax:

<form class="row-cols-lg-auto g-* align-items-center">
    <div class="col-*">
        <label class="visually-hidden">
            ...
        </label>
        <div class="input-group">
            <input type="text" class="form-control" 
                   placeholder="...">
        </div>
    </div>
</form>

Note: * can take values 1, 2, 3, and so on.

Example 1: In this example, we set the layout inline forms at the level of viewports on the small screen sizes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge"> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1.0"> 
    <title>Bootstrap 5-GeeksforGeeks </title> 
  
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> 
    </script> 
</head> 
  
<body class="m-3"> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
              GeeksforGeeks 
          </h1> 
        <h5>Bootstrap5 Layout Inline forms</h5> 
    </div> 
    <form class="row p-4 row-cols-sm-auto g-2 border  
                 bg-light mt-4 align-items-center"> 
        <div class="col-1"> 
            <label class="visually-hidden" for="Display name"> 
                Display name</label> 
            <div class="input-group"> 
                <input type="text" class="form-control" 
                    placeholder="Display name "> 
            </div> 
        </div> 
        <div class="col-2"> 
            <label class="visually-hidden" for="Mobile Number"> 
                Mobile Number</label> 
            <div class="input-group"> 
                <input type="text" class="form-control" 
                    placeholder="Mobile number"> 
            </div> 
        </div> 
        <div class="col-3"> 
            <label class="visually-hidden" for="confirmation"> 
                confirmation</label> 
            <div class="input-group"> 
                <input type="text" class="form-control" 
                    placeholder="Password"> 
            </div> 
        </div> 
  
        <div class="col-4"> 
            <div class="input-group"> 
                <label class="visually-hidden" for="Security"> 
                    Security pin</label> 
                <input type="text" class="form-control" 
                    placeholder="Security pin"> 
            </div> 
        </div> 
        </div> 
        <div class="col-5"> 
            <button type="submit" class="btn btn-success"> 
                Sign in</button> 
        </div> 
    </form> 
</body> 
</html>

Output:

Bootstrap5 Layout Inline forms

Example 2: In this example, we set the layout of inline forms at the level of viewports screen sizes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>Bootstrap 5-GeeksforGeeks </title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
</head> 
  
<body> 
    <div class="container text-center "> 
        <h1 class="text-success"> 
              GeeksforGeeks 
          </h1> 
        <h5>Bootstrap5 Layout Inline forms</h5> 
    </div> 
    <form class="row p-5 row-cols-sm-auto g-3  
                 border text-bg-success mt-4  
                 align-items-center"> 
        <div class="col-1"> 
            <div class="input-group"> 
                <input type="text" 
                       class="form-control" 
                       placeholder="Email address"> 
            </div> 
        </div> 
        <div class="col-2"> 
            <div class="input-group"> 
                <input type="text" class="form-control"
                       placeholder="Recovery contact number"> 
            </div> 
        </div> 
        <div class="col-3 "> 
            <div class="form-check text-bg-primary"> 
                <input class="form-check-input" 
                       type="checkbox" id="Check"> 
                <label class="form-check-label" 
                       for="FormCheck1"> 
                    Correct 
                </label> 
            </div> 
        </div> 
        <div class="col-4"> 
            <div class="input-group"> 
                <input type="text" class="form-control"
                       placeholder="Captcha"> 
            </div> 
        </div> 
    </form> 
</body> 
</html>

Output:

Bootstrap5 Layout Inline forms

Reference: https://getbootstrap.com/docs/5.0/forms/layout/#inline-forms

Suggest improvement

Bootstrap 5 Layout Auto-sizing

Bootstrap 5 Validation

Share your thoughts in the comments

Layout

Content

Forms

Forms Layout

Components

Navbar

Helpers

Extend

Utilities

References

Bootstrap 5 Layout Inline forms

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?