Bootstrap 3.0: How to have text and input on the same line?

html

responsive-design

form-design

best-practices

byAnton Shumikhin·Dec 9, 2024

To align text and input on the same line using Bootstrap 3.0, apply the form-inline class with corresponding grid classes, as follows:

<form class="form-inline">
  <label class="col-xs-2 control-label" for="input-field">Label</label>
  <div class="col-xs-10">
    <input type="text" class="form-control" id="input-field" placeholder="Input">
  </div>
</form>

By structuring your elements within the col-xs-* grid classes, you create a responsive layout that dynamically adjusts to various screen sizes.

Understanding the Bootstrap architectural blueprint

Understanding the design methodology behind Bootstrap's grid system and form alignment can significantly enhance your mastery over responsive layout designs. So let's dive deeper!

Basics of the grid system

Like any well-planned city grid, Bootstrap uses containers, rows, and columns to arrange and align content. In this urban analogy:

Containers are your city blocks.
Rows outline the streets.
Columns are the individual buildings.

Understanding this alignment pattern is key in efficiently managing Bootstrap’s grid system.

Utilizing inline forms

Bootstrap's form-inline class allows you to render form controls sequentially in a single row. This is particularly effective for compact forms or login forms.

Implementing static form controls

The .form-control-static class is useful when you want to place read-only plain text right by the form controls.

Responsive columns in action

With .col-xs-*, .col-sm-*, .col-md-*, .col-lg-*, classes (* varies from 1 to 12), you can modify the width of your input fields and labels for every viewport size.

Aligning with finesse

The .control-label, .form-group, and .form-horizontal classes allow you to beautifully line up your labels with your inputs, create structured spaces, and achieve a neat horizontal form grouping, respectively.

Offsetting for perfection

Sometimes, achieving the perfect balance requires some shifting. The .col-sm-offset-* and .col-md-offset-* utility classes are just what you need to refine those alignment shifts.

Tailoring the ideal layout

Markup - your foundational structure

A structurally sound HTML layout is your backbone. Here, <form>, <div>, <label>, and <input> are your primary building blocks.

Classification - your categorical umbrella

Each class in Bootstrap has its unique role. But here's a secret, just between us:

.form-control: Transforms inputs into supermodels 🕺
.form-group: Adds that sweet whitespace. 🍭
.control-label: Aligns vertically and turns text bold.

Responsive adaptations - the survival of the fittest

Bootstrap's responsive utility classes allow your form to adapt across multiple scenarios. This is paramount for robust cross-platform compatibility.

Structural tips and custom styles - license to style

Be semantic HTML friendly for SEO and accessibility.
Need something different? Slam dunk with custom CSS.

Accessibility - because inclusivity matters

When designing, remember to:

Attach role="form" to all your form elements. It's like a "Form folks, assemble!" call.
Ensure your <label> and form controls are BFFs with the for and id attributes.