Open In App

Bootstrap 5 Layout Inline forms

Last Updated : 05 Feb, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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=
        rel="stylesheet">
    <script src=
    </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

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

Bootstrap5 Layout Inline forms

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



Previous Article
Next Article

Similar Reads

Bootstrap 5 Layout Forms
Bootstrap 5 Layout forms provide control of the input field and custom positioning. All the fields should be placed inside the &lt;form&gt; tag. By default the form is aligned vertically as the default value for display is block and is set to 100%. We can use additional classes to change this default placement Bootstrap 5 Layout Forms Classes: Ther
2 min read
Bootstrap 5 Forms Layout
Bootstrap is one of the most popular frameworks for web developers. Developers utilize it to improve the front-end's responsiveness. If we follow the bootstrap documentation, we will see numerous possibilities for incorporating layout into a website. Bootstrap LayoutBootstrap 5 layout contains various subtopics, which we have discussed one by one h
8 min read
What is the difference between display: inline and display: inline-block in CSS?
The display property in CSS is a very useful and commonly used property that contains many values. The display property defines how an HTML element should be displayed on the webpage. The property also specifies the type of box used for an HTML element and how it should be laid out on the page. If we need to display the elements that are laid out a
4 min read
What is the difference between inline-flex and inline-block in CSS?
The display property specifies how an element should be displayed on a webpage. There can be many values, related to this property in CSS. Inline-block and inline-flex are two such properties. Although there are several values that this property can have, to understand the aforementioned, let us first look into three other values: inline, block, an
3 min read
How display: inline is different from display: inline-block in CSS ?
In this article, we will know about the display property in CSS, along with understanding the 2 different property values for display property, i.e., display: inline &amp; display: inline-block properties, &amp; will understand their basic differences &amp; implementation through the examples. The display property facilitates setting the element by
3 min read
Foundation CSS Forms Inline Labels and Buttons
Foundation CSS is an open-source &amp; responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing &amp; can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is
3 min read
Spectre Forms Inline Form
The Spectre Forms provide the most common control component used in a regular form. In this article, we will discuss the form inline forms. The form inline forms is an important component that can make any input field in a single line. Like In the previous articles we used radio, checkbox, etc they can be placed in a single line. Forms Form Inline
1 min read
Spectre Forms Horizontal forms
Spectre Forms Horizontal forms are horizontal forms if you want to create a horizontal form then you have to use the form-horizontal class in form element. For each fields in the form you can use col-* and col-xs/sm/lg/xl-* class to the child elements for responsive form row layout. Here the * can be replaceable by 1 to 12 any number you want based
2 min read
Styling Django Forms with django-crispy-forms
Django by default doesn't provide any Django form styling method due to which it takes a lot of effort and precious time to beautifully style a form. django-crispy-forms solves this problem for us. It will let you control the rendering behavior of your Django forms in a very elegant and DRY way. Modules required:django : django installdjango-crispy
1 min read
Reactive Forms vs Template Driven Forms
Angular provides two main approaches for handling forms: Reactive Forms and Template-Driven Forms. In this article, we'll learn more about Reactive Forms and Template-Driven Forms in detail. Table of Content Reactive FormsTemplate Driven FormsDifference between Reactive Forms and Template Driven FormsConclusionReactive FormsReactive Forms is a way
6 min read