CODEWITHSUNDEEP
htmlcssbootstrap-5
Wilko van der Veen
Wilko van der Veen

Reputation: 456

Cannot make labels show next to input using bootstrap 5.1.3

<form>
  <div class="row mb-3">
    <label for="name" class="col-sm2 col-form-label col-form-label-sm">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control form-control-sm" id="name" required>
    </div>
</form>

It seems very simple to do this but I cannot get it to work to display a label before an input element. The label is shown above the input element. Even when I directly copy the example from bootstrap.com, the label still is being displayed above the input and not next to it.

See: https://getbootstrap.com/docs/5.0/forms/layout/#horizontal-form for the example I have used

Bootstrap version 5.1.3

Upvotes: 0

Views: 655

Answers (1)

seantsang
seantsang

Reputation: 1206

You should add class col-sm-2 instead of col-sm2

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <form>
      <div class="row mb-3">
        <label for="name" class="col-sm-2 col-form-label col-form-label-sm">Name</label>
        <div class="col-sm-10">
          <input type="text" class="form-control form-control-sm" id="name" required />
        </div>
      </div>
    </form>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Upvotes: 1

Related Questions