How to align a input form? - html

Question

I'm not strong in frontend development :) I'm using bootstrap for created a form. But it isn't look fine. How could I align my input form in one column?
<form>
<div class="form-group form-inline">
<label for="exampleInputPrice" class="personal-form-labels">Purchase Price</label>
<input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
</div>
<div class="form-group form-inline">
<label for="exampleInputLoan" class="personal-form-labels">Loan Amont</label>
<input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
</div>
<div class="col-md-12 text-center block-buttons">
<button type="submit" class="btn btn-primary btn-lg">Continue</button>
</div>
</form>
enter image description here

Answer 1

Use of display:table-*
table {
border-collapse: separate;
}
.form-inline {
display: table-row;
}
.form-inline label, .form-inline input {
display: table-cell;
margin: 0 0 5px 10px;
}
<form>
<div class="form-group form-inline">
<label for="exampleInputPrice" class="personal-form-labels">Purchase Price</label>
<input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
</div>
<div class="form-group form-inline">
<label for="exampleInputLoan" class="personal-form-labels">Loan Amont</label>
<input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
</div>
<div class="col-md-12 text-center block-buttons">
<button type="submit" class="btn btn-primary btn-lg">Continue</button>
</div>
</form>

Answer 2

Try like this , bootstrap Horizontal form not support in bootstrap -4
Not supported ,use bootstrap 3
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="Purchase Price">Purchase Price</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="exampleInputPrice" placeholder="$$$">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="Loan Amont">Loan Amont</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Continue</button>
</div>
</div>
</form>
bootsrap-3 doc https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_horizontal&stacked=h

Answer 3

If you are using bootstrap 4 Try This :
<form>
<div class="form-group row">
<label for="exampleInputPrice" class="col-sm-2 col-form-label">Purchase Price</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
</div>
</div>
<div class="form-group row">
<label for="exampleInputLoan" class="col-sm-2 col-form-label">Loan Amont</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
</div>
</div>
<div class="form-group form-inline">
<button type="submit" class="btn btn-primary btn-lg">Continue</button>
</div>
</form>
https://jsfiddle.net/sv2j08dd/3/

Answer 4

Modulation:
Glass thickness:
css:
.inputs span{ display: inline-block; width: 60%; padding: 0 0 15px 0; }
.inputs span input{ width: 30%; float: left; height:25px;padding: 0 5px;}
.inputs{width: 100%;float: left;padding: 0 25px; box-sizing: border-box;}
.inputs label{width: 20%;float: left;}