CODEWITHSUNDEEP
htmlcssbootstrap-4
WitnessTruth
WitnessTruth

Reputation: 579

Bootstrap - Button in the same line of input of form-control

I would like to make the button stay on the same line as the input text that are in the previous forms-control.

<div class="row">
  <div class="form-group col-xs-6 col-md-5 ">
    <label for="">Name</label>
    <input class="form-control " type="text" >
  </div>
  <div class="form-group col-xs-6 col-md-5 ">
    <label for="">E-mail</label>
    <input class="form-control " type="text" ">
  </div>
  <div class="form-group col-xs-6 col-md-2">
    <button class="btn btn-primary">Save</button>
  </div>
</div>

Check this fiddle to see how it is: Fiddle

I tried to put a "label" above the button tag. But I don't think that this is the better and the right way to do this.

Upvotes: 1

Views: 5879

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362470

Use align-items-end on the flexbox row for the button to align at the bottom along with the inputs...

<div class="container">
  <div class="row align-items-end">
    <div class="form-group col-5 col-md-5 ">
      <label for="">Name</label>
      <input class="form-control " type="text" id="inputHrDiariamaxima">
    </div>
    <div class="form-group col-5 col-md-5 ">
      <label for="">E-mail:</label>
      <input class="form-control " type="text" id="inputKmDiariamaxima">
    </div>
    <div class="form-group col-6 col-md-2">
      <button class="btn btn-primary">Salvar</button>
    </div>
  </div>
</div>

Also, note -xs no longer exists in Bootstrap 4.

Demo: https://jsfiddle.net/xLc28pg5/

Upvotes: 6

Simranjit Singh
Simranjit Singh

Reputation: 404

Make your last column a flexbox and align items to end. Using bootstrap add d-flex align-items-end classes to your button containing column.

Upvotes: 1

Related Questions