Bootstrap class: .form-group

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Preview

Use Shuffle AI to build your own Bootstrap templates

Quickly design stunning Bootstrap templates with the power of Shuffle AI — no coding required.

Check .form-group in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _forms.scss:175 */
.form-group {
  margin-bottom: $form-group-margin-bottom;
}

/* _forms.scss:284 */
.form-group {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row wrap;
  align-items: center;
  margin-bottom: 0;
}

Uses variables

/* _forms.scss:175 */
$form-group-margin-bottom

/* _forms.scss:284 */