Bootstrap 5 Learning Kit

   Copy to clipboard

   Open in CodePen

<form>
  <fieldset>
    <div class="mb-3">
      <label for="inputEmail" class="form-label">Email input label</label>
      <input type="email" class="form-control" placeholder="Email input placeholder" id="inputEmail">
    </div>
    <div class="mb-3">
      <label for="inputPassword" class="form-label">Password input label</label>
      <input type="password" class="form-control" placeholder="Password input placeholder" id="inputPassword">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

   Copy to clipboard

   Open in CodePen

<form>
  <fieldset>
    <legend>Legend</legend>
    <div class="mb-3">
      <label for="inputEmail" class="form-label">Email input label</label>
      <input type="email" class="form-control" placeholder="Email input placeholder" id="inputEmail">
    </div>
    <div class="mb-3">
      <label for="inputPassword" class="form-label">Password input label</label>
      <input type="password" class="form-control" placeholder="Password input placeholder" id="inputPassword">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Stacked</h4>
<label for="inputTextStacked" class="form-label">Text input label</label>
<input type="text" class="form-control" placeholder="Text input placeholder" id="inputTextStacked" aria-describedby="inputTextStackedHelp">
<p id="inputTextStackedHelp" class="form-text">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 for="inputTextInline" class="col-form-label">Text input label</label>
  </div>
  <div class="col-auto">
    <input type="text" class="form-control" placeholder="Text input placeholder" id="inputTextInline" aria-describedby="inputTextInlineHelp">
  </div>
  <div class="col-auto">
    <span id="inputTextInlineHelp" class="form-text">Lorem ipsum dolor sit amet.</span>
  </div>
</div>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Input</h4>
<label for="inputTextDisabled" class="form-label">Text input label</label>
<input type="text" class="form-control" placeholder="Text input placeholder" id="inputTextDisabled" disabled="">
<h4 class="h5 text-muted mt-3">Fieldset</h4>
<form>
  <fieldset disabled="">
    <div class="mb-3">
      <label for="inputEmailDisabled" class="form-label">Email input label</label>
      <input type="email" class="form-control" placeholder="Email input placeholder" id="inputEmailDisabled">
    </div>
    <div class="mb-3">
      <label for="inputPasswordDisabled" class="form-label">Password input label</label>
      <input type="password" class="form-control" placeholder="Password input placeholder" id="inputPasswordDisabled">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>