1

How is it possible to restrict the width of the .form-text based on the width of the above input?

I'd like to layout an <input> in a Bootstrap application with a .form-text for some additional information. The <input> and .form-text are part of a grid layout (spanning multiple columns). The text that is shown inside the .form-text-styled <div> is dynamically changing which can, depending on its size, extend the grid's column.

Following this example (https://getbootstrap.com/docs/5.3/forms/overview/#overview)

<form class='ref-table'>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else. We'll never share your email with anyone else. We'll never share your email with anyone else.</div>
  </div>
</form>

I noticed that the .form-text and the <input> are both kept at the same width. When I add style='width: auto' to the <input>, the form-text spans beyond the input, but ideally, the text should wrap under the input (using the input's width as its width).

1 Answer 1

Reset to default
0

this is how i do it

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Layout</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* Custom CSS */
    .custom-form-text {
      width: calc(100% - 210px); /* Adjust as needed */
      float: left;
      margin-top: 8px; /* Adjust as needed */
    }
  </style>
</head>
<body>
  <form class="ref-table">
    <div class="row mb-3">
      <div class="col-auto">
        <label for="exampleInputEmail1" class="form-label">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
      </div>
      <div class="col">
        <div class="form-text custom-form-text">We'll never share your email with anyone else. We'll never share your email with anyone else. We'll never share your email with anyone else.</div>
      </div>
    </div>
  </form>
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.