Bootstrap 5 Learning Kit

   Copy to clipboard

   Open in CodePen

<form>
  <fieldset>
    <div>
      <label>Email input label</label>
      <input id="inputEmail">
    </div>
    <div>
      <label>Password input label</label>
      <input id="inputPassword">
    </div>
    <button>Submit</button>
  </fieldset>
</form>

   Copy to clipboard

   Open in CodePen

<form>
  <fieldset>
    <legend>Legend</legend>
    <div>
      <label>Email input label</label>
      <input id="inputEmail">
    </div>
    <div>
      <label>Password input label</label>
      <input id="inputPassword">
    </div>
    <button>Submit</button>
  </fieldset>
</form>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Stacked</h4>
<label>Text input label</label>
<input>
<p id="inputTextStackedHelp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum.</p>
<h4 class="h5 text-muted mt-3">Inline</h4>
<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label>Text input label</label>
  </div>
  <div class="col-auto">
    <input>
  </div>
  <div class="col-auto">
    <span id="inputTextInlineHelp">Lorem ipsum dolor sit amet.</span>
  </div>
</div>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Input</h4>
<label>Text input label</label>
<input>
<h4 class="h5 text-muted mt-3">Fieldset</h4>
<form>
  <fieldset>
    <div>
      <label>Email input label</label>
      <input id="inputEmailDisabled">
    </div>
    <div>
      <label>Password input label</label>
      <input id="inputPasswordDisabled">
    </div>
    <button>Submit</button>
  </fieldset>
</form>