BootstrapHow-ToBeginner · 4 min read

How to Create Inline Form in Bootstrap Quickly and Easily

To create an inline form in Bootstrap, use the form-inline class on your <form> element and wrap your inputs and buttons inside it. This arranges the form controls horizontally in a row, making the form compact and easy to use inline.

📐

Syntax

The basic syntax for an inline form in Bootstrap involves adding the form-inline class to the <form> tag. Inside the form, place your input fields and buttons. Bootstrap will automatically arrange these elements side-by-side.

<form class="form-inline">: Starts the inline form container.
Input fields like <input type="text" class="form-control">: Styled input boxes.
Buttons like <button type="submit" class="btn btn-primary">: Styled clickable buttons.

html

<form class="form-inline">
  <input type="text" class="form-control" placeholder="Enter text">
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Output

A horizontal form with a text input box and a blue submit button side by side.

💻

Example

This example shows a simple inline form with a text input and a submit button arranged horizontally. The form is responsive and looks neat on different screen sizes.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Inline Form Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <form class="row row-cols-lg-auto g-3 align-items-center">
      <div class="col-12">
        <label class="visually-hidden" for="inlineFormInput">Name</label>
        <input type="text" class="form-control" id="inlineFormInput" placeholder="Name">
      </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.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A clean horizontal form with a text input labeled 'Name' and a blue 'Submit' button aligned side by side inside a container with spacing.

⚠️

Common Pitfalls

Common mistakes when creating inline forms in Bootstrap include:

Not using the correct Bootstrap classes like form-inline or the recommended grid classes for inline layout.
Forgetting to add spacing classes like g-3 or me-2 to separate inputs and buttons.
Not using visually-hidden labels for accessibility, which helps screen readers.
Using block-level elements inside the form without proper grid or flex classes, causing the form to stack vertically instead of inline.

Example of a common mistake and fix:

html

<!-- Wrong: Missing spacing and inline classes -->
<form>
  <input type="text" class="form-control" placeholder="Name">
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<!-- Right: Using Bootstrap grid and spacing for inline layout -->
<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inputName">Name</label>
    <input type="text" class="form-control" id="inputName" placeholder="Name">
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Output

The first form stacks input and button vertically with no spacing; the second form displays them side by side with proper spacing and alignment.

📊

Quick Reference

Tips for creating inline forms in Bootstrap:

Use row row-cols-lg-auto g-3 align-items-center classes on the form for responsive inline layout.
Wrap inputs and buttons in <div class="col-12"> for proper spacing.
Use visually-hidden labels for accessibility.
Add placeholder text to inputs for user guidance.
Include Bootstrap CSS and JS from CDN for styling and functionality.

✅

Key Takeaways

Use Bootstrap's grid classes like row-cols-lg-auto and g-3 for inline form layout instead of deprecated form-inline class.

Wrap each input and button in a column div for proper spacing and alignment.

Always include visually hidden labels for accessibility even in inline forms.

Add spacing classes to avoid cramped form controls.

Include Bootstrap CSS and JS files to ensure styles and components work correctly.