CODEWITHSUNDEEP
htmlbootstrap-4
Przemek Sulecki
Przemek Sulecki

Reputation: 168

Vertical align of button

I want to put textboxes with button in grid system horizontally, but button doesn't want to align vertically.(It must be in grid system because I want to stack these group of items in case of mobile devices):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="form-row">

    <div class="col"></div>

    <div class="col-sm-2">
        <label for="inputEmail4">Email</label>
        <input type="text" class="form-control" placeholder="First name">
    </div>

    <div class="col-sm-2">
        <label for="inputEmail4">Email</label>
        <input type="text" class="form-control" placeholder="Last name">
    </div>

    <div class="col-sm-2">
        <label for="inputEmail4">Email</label>
        <input type="text" class="form-control" placeholder="Last name">
    </div>

    <div class="col-sm-2">
        <button type="submit" class="btn btn-primary">Sign in</button>  
    </div>

    <div class="col"></div>

</div>

EDIT: I solved this problem in that way:

<div class="row">
    <div class="col"></div>
    <div class="col-sm-2 py-0 px-1">
        Last name:
        <input type="text" class="form-control form-control-sm mb-2" 
        placeholder="Last name">
    </div>
    <div class="col-sm-2 py-0 px-1">
        First name:
        <input type="text" class="form-control form-control-sm mb-2" 
        placeholder="First name">
    </div>
    <div class="col-sm-2 py-0 px-1">
        Card ID:
        <input type="text" class="form-control form-control-sm mb-2" 
        placeholder="Card ID">
    </div>
    <div class="col-sm-2 py-0 px-1">
        <button type="button" class="btn btn-sm btn-success btn-block mt-4 
        mb-2">Add</button>
    </div>
    <div class="col"></div>
</div>

Upvotes: 1

Views: 68

Answers (2)

Vicky Maharjan
Vicky Maharjan

Reputation: 316

Create a new class "abc" and add it to the div which contains the button:

.abc{
  position:absolute;
  bottom:0;
}

Hope this is what you need:

.abc{
position:absolute;
bottom:0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="form-row">

    <div class="col"></div>

    <div class="col-sm-2">
        <label for="inputEmail4">Email</label>
        <input type="text" class="form-control" placeholder="First name">
    </div>

    <div class="col-sm-2">
        <label for="inputEmail4">Email</label>
        <input type="text" class="form-control" placeholder="Last name">
    </div>

    <div class="col-sm-2">
        <label for="inputEmail4">Email</label>
        <input type="text" class="form-control" placeholder="Last name">
    </div>

    <div class="col-sm-2">

        <button type="submit" class="btn btn-primary abc">Sign in</button>  
    </div>

    <div class="col"></div>

</div>

Upvotes: 1

Naren Murali
Naren Murali

Reputation: 56099

Please use the below css class vcenter, it will both vertically and horizontally align all the child elements of the element with this class.

.vcenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="form-row">

  <div class="col"></div>

  <div class="col-sm-2">
    <label for="inputEmail4">Email</label>
    <input type="text" class="form-control" placeholder="First name">
  </div>

  <div class="col-sm-2">
    <label for="inputEmail4">Email</label>
    <input type="text" class="form-control" placeholder="Last name">
  </div>

  <div class="col-sm-2">
    <label for="inputEmail4">Email</label>
    <input type="text" class="form-control" placeholder="Last name">
  </div>

  <div class="col-sm-2 vcenter">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>

  <div class="col"></div>

</div>

Upvotes: 0

Related Questions