Bootstrap heigth issue

user_17843250 0
Viewed 27

I'm new to bootstrap and search a lot on this forum but couldn't find an answer to my question I have the following code for 2 forms on my page

  <div class="row justify-content-md-center">
    <div class="col-sm-6">
      <form method="POST">
        <h3 align="center">Join a group</h3>
        <div class="form-group">
          <input
            type="input"
            class="form-control"
            id="groupCode"
            name="groupCode"
            placeholder="Fill in the group code"
          />
        </div>
        <button
          type="submit"
          id="form-submit-join"
          name="form-submit-join"
          class="btn btn-primary"
        >
          Join
        </button>
      </form>
    </div>
    <div class="col-sm-6">
      <form method="POST">
        <h3 align="center">Create a new group long text</h3>
        <div class="form-group">
          <input
            type="input"
            class="form-control"
            id="groupName"
            name="groupName"
            placeholder="Fill in the groupname"
          />
        </div>
        <button
          type="submit"
          id="form-submit-create-family"
          name="form-submit-create-family"
          class="btn btn-primary"
        >
          Create
        </button>
      </form>
    </div>
  </div>
</div>

This looks like this 2 columns that looks the same

when I make the window smaller so that the long text of the second column becomes 2 lines, the layout is wrong.

wrong layout

I would like it to be the same, so the input box of the first one should be on the same height as the second one

css html
1 Answers

You can use flex for that!

I've added the flex classes to the form and an extra div as wrapper around everything but the headline to let 'justify-content-between' do its magic and push the headline and the div apart.

<form method="POST" class="h-100 d-flex flex-column justify-content-between">
    <h3 align="center">Join a group</h3>
    <div>
        <div class="form-group mt-auto">
        <input
          type="input"
          class="form-control"
          id="groupCode"
          name="groupCode"
          placeholder="Fill in the group code"
        />
        </div>
        <button
          type="submit"
          id="form-submit-join"
          name="form-submit-join"
          class="btn btn-primary"
        >
          Join
        </button>
    </div>
</form>

https://jsfiddle.net/1jzgohs4/

user_104956830
Related