Bootstrap Modal: Unable to align my text beside the boxes - html

Question

I tried to make a modal form using bootstrap (horizontal form) and the field are shown under the labels. Any idea how can I fix it so the input text boxes will be at the right of the labels and not under them?
I've been trying all day to get it aligned with the boxes but to no avail. Pls help.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Update Staff</button>
<div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body form-horizontal">
<form class="form-horizontal" id="step2">
<div class="form-group">
<label for="name" class="col-sm-2 control-label" >Name</label>
<div class="col-sm-10">
<input id="name" class="form-control" type="text" placeholder="Enter Your Full Name" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email-Id</label>
<div class="col-sm-10">
<input id="email" class="form-control" type="email" placeholder="Enter Your Email-Id" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="Submit" class="btn btn-primary">Done</button>
</div>
</form>
</div>
</div>
</div>
</div>

Answer 1

<div class="form-group d-flex align-items-baseline">
you can add them to the form-group class.
Also, label and input have to be inline-block to come together. the form-control class in bootstrap makes the display block of the given element. also you can use this. here I just added the form-group row class :
<div class="form-group row"> // just added the row class
<label for="name" class="col-sm-2 control-label" >Name</label>
<div class="col-sm-10">
<input id="name" class="form-control" type="text" placeholder="Enter Your Full Name" />
</div>
</div>

Answer 2

Try the following code. it will work for you. You haven't inserted the row class in order to get the two fields in the same line and you will need to you col-md classes in order to fit your message box in medium-size screens. You can use flex-box classes in order to center the text as bellow.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Update Staff</button>
<div
class="modal fade bd-example-modal-lg"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body form-horizontal">
<form class="form-horizontal" id="step2">
<div class="form-group row">
<label
for="name"
class="col-sm-2 control-label d-flex align-items-center justify-content-center"
>Name</label
>
<div class="col-sm-10">
<input
id="name"
class="form-control"
type="text"
placeholder="Enter Your Full Name"
/>
</div>
</div>
<div class="form-group row">
<label
for="email"
class="col-sm-2 control-label d-flex align-items-center justify-content-center"
>Email-Id</label
>
<div class="col-sm-10">
<input
id="email"
class="form-control"
type="email"
placeholder="Enter Your Email-Id"
/>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary mr-2"
data-dismiss="modal"
>
Close
</button>
<button type="Submit" class="btn btn-primary">Done</button>
</div>
</form>
</div>
</div>
</div>
</div>