CODEWITHSUNDEEP
cssbootstrap-5
user2913891
user2913891

Reputation: 37

Bootstrap CSS d-flex shrinks form input

Using bootstrap-5. I'm am stuggling to figure out why when I apply the d-flex class to a container, my form inputs and labels shrink. From the div class=container, if I remove d-flex, justify-center, and align-items-center, the form is no longer in the center of the page. When I add it in, I can center the content however the form inputs shrink. Thank you

<div class="container d-flex justify-content-center align-items-center min-vh-100"></div>
    <form method="POST" action="#">
        <div class="row">
            <div class="col-6 mb-3">
                <label class="form-label" for="item">Enter Item</label>

                <input class="form-control" id="item" name="item" required type="text" value="">

            </div>
        </div>
        <div class="row">
            <div class="col-6 mb-3">
                <label class="form-label" for="category">Category</label>

                <input class="form-control" id="category" name="category" required type="text" value="">

            </div>
        </div>
        <div class="row">
            <div class="col-6 mb-3">
                <label class="form-label" for="price">Price</label>

                <input class="form-control" id="price" name="price" required type="text" value="">

            </div>
        </div>
        <div class="row">
            <div class="col-6 mb-3">
                <label class="form-label" for="location">Purchase Location</label>

                <input class="form-control" id="location" name="location" required type="text" value="">

            </div>
        </div>
        <div class="row">
            <div class="mb-3 justify-content-around">
                <input class="btn btn-outline-success" id="submit" name="submit" type="submit" value="Enter Data">
            </div>
        </div>
    </form>
</div>

No flex: enter image description here

Flex enter image description here

Upvotes: 0

Views: 1537

Answers (1)

Sameer
Sameer

Reputation: 5188

Change your HTML to something like this, change col-6 classes accordingly for more width.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container d-flex justify-content-center align-items-center min-vh-100">
  <form method="POST" action="#" class="w-100">
    <div class="align-items-center flex-column row">
      <div class="col-6 mb-3">
        <label class="form-label" for="item">Enter Item</label>

        <input class="form-control" id="item" name="item" required type="text" value="">

      </div>
      <div class="col-6 mb-3">
        <label class="form-label" for="category">Category</label>

        <input class="form-control" id="category" name="category" required type="text" value="">

      </div>
      <div class="col-6 mb-3">
        <label class="form-label" for="price">Price</label>

        <input class="form-control" id="price" name="price" required type="text" value="">

      </div>
      <div class="col-6 mb-3">
        <label class="form-label" for="location">Purchase Location</label>

        <input class="form-control" id="location" name="location" required type="text" value="">

      </div>
      <div class="col-6 d-flex justify-content-center mb-3">
        <input class="btn btn-outline-success" id="submit" name="submit" type="submit" value="Enter Data">
      </div>
    </div>
  </form>
</div>

Upvotes: 0

Related Questions