CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
mellis481
mellis481

Reputation: 4148

Properly aligning neighboring button in Bootstrap form

I have a search form in my app which uses Bootstrap. It is a vertical form meaning the labels are above the input controls. In my example, I have two inputs and then a "Search" button. The goal is to have the button align vertically with the inputs.

Here is some markup to start (with Plunker - make sure you widen the demo pane enough):

  <div class="row">
    <div class="col-sm-4">
      <div class="form-group">
        <label for="firstName">First Name</label>
        <input type="text" class="form-control" id="firstName">
      </div>
    </div>
    <div class="col-sm-4">
      <div class="form-group">
        <label for="lastName">Last Name</label>
        <input type="text" class="form-control" id="lastName">
      </div>
    </div>
    <div class="col-sm-4">
      <button type="submit" class="btn btn-primary">Search</button>
    </div>
  </div>

As expected, since the contents of the third column which contains the button does not include a <label> (or .form-group element for that matter), the button will be aligned with the labels in the first two columns at the top.

One obvious solution would be to make the markup for the button column match the other two, like this:

    <div class="col-sm-4">
      <div class="form-group">
        <label>&nbsp;</label>
        <div>
          <button type="submit" class="btn btn-primary">Search</button>
        </div>
      </div>
    </div>

Requiring all this additional markup is nasty, though.

Is there a better way to accomplish this goal?

Upvotes: 1

Views: 38

Answers (3)

Shidersz
Shidersz

Reputation: 17190

The best approach I have found for your goals is using class align-items-end in conjuntion with d-flex on the column that wraps the button. Also, you will need to put the button inside the form-group div, because it adds some margins, in summary, this will be the structure that wraps the button:

<div class="col-sm-4 d-flex align-items-end">
  <div class="form-group">
    <button type="submit" class="btn btn-primary">Search</button>
  </div>
</div>

FULL EXAMPLE:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="container-fluid">
<div class="row">

  <div class="col-sm-4">
    <div class="form-group">
      <label for="firstName">First Name</label>
      <input type="text" class="form-control" id="firstName">
    </div>
  </div>

  <div class="col-sm-4">
    <div class="form-group">
      <label for="lastName">Last Name</label>
      <input type="text" class="form-control" id="lastName">
    </div>
  </div>
  
  <div class="col-sm-4 d-flex align-items-end">
    <div class="form-group">
      <button type="submit" class="btn btn-primary">Search</button>
    </div>
  </div>

</div>
</div>

Upvotes: 1

Carl Binalla
Carl Binalla

Reputation: 5401

You can do it by putting align-items-end (which is the equivalent of align-items: flex-end) in the .row class, and also remove the form-groups to remove the margin so that all will start at the end

One more thing, you need to put align-items-end in the row because row has a style of display: flex, that is why it will work.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container" style="margin-top: 20px">
    <form>
      <div class="row align-items-end mb-2">
        <div class="col-sm-4">
          <div class="">
            <label for="firstName">First Name</label>
            <input type="text" class="form-control" id="firstName">
          </div>
        </div>
        <div class="col-sm-4">
          <div class="">
            <label for="lastName">Last Name</label>
            <input type="text" class="form-control" id="lastName">
          </div>
        </div>
        <div class="col-sm-4">
          <button type="submit" class="btn btn-primary">Search</button>
        </div>
      </div>
    </form>
  </div>
</body>

Upvotes: 2

Arun AK
Arun AK

Reputation: 4370

You can set a class for that button div and add CSS to it like this

.button-class{
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-end;
}
<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</script>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="container" style="margin-top: 20px">
    <form>
      <div class="row">
        <div class="col-sm-4">
          <div class="form-group">
            <label for="firstName">First Name</label>
            <input type="text" class="form-control" id="firstName">
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group">
            <label for="lastName">Last Name</label>
            <input type="text" class="form-control" id="lastName">
          </div>
        </div>
        <div class="col-sm-4 button-class">
          <button type="submit" class="btn btn-primary">Search</button>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="form-group">
            <label for="firstName">First Name</label>
            <input type="text" class="form-control" id="firstName">
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group">
            <label for="lastName">Last Name</label>
            <input type="text" class="form-control" id="lastName">
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group">
            <label>&nbsp;</label><div>
            <button type="submit" class="btn btn-primary">Search</button>
          </div></div>
        </div>
      </div>
    </form>
  </div>
</body>

</html>

Here is the live demo

Hope it helps :)

Upvotes: 1

Related Questions