Need help on CSS inline alignment in Servicenow - html

Question

I am new and learning front end.
I created a simple form contains 4 fields. how to align all these in line equally divided?
below is my code written on HTML along with the output what i see:
<div>
<form>
<div class="form-inline">
<div class="col-sm-6">
<label>Name: </label>
<input type="text" class="form-control" >
</div>
<div class="col-sm-6">
<label>Email: </label>
<input type="text" class="form-control" >
</div>
<br>
<br>
<div class="col-sm-6">
<label>Phone #: </label>
<input type="text" class="form-control" >
</div>
<div class="col-sm-6">
<label>Education Qualificiation: </label>
<input type="text" class="form-control" >
</div>
</div>
</form>
</div>
Output above code

Answer 1

You can do something like this:
fiddle to validate
.lblClass {
width: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div>
<form>
<div class="form-inline d-flex">
<div class="col-sm-6 d-flex">
<label class="lblClass">Name: </label>
<input type="text" class="form-control">
</div>
<div class="col-sm-6 d-flex">
<label class="lblClass">Email: </label>
<input type="text" class="form-control">
</div>
<br>
<br>
<div class="col-sm-6 d-flex">
<label class="lblClass">Phone #: </label>
<input type="text" class="form-control">
</div>
<div class="col-sm-6 d-flex">
<label class="lblClass">Education Qualificiation: </label>
<input type="text" class="form-control">
</div>
</div>
</form>
</div>

Answer 2

There are lots of ways to align element. But here you are uses bootstrap and bootstrap have predefined classes for align element. You want to align elements in the form so bootstrap have Form-group, form control class for your all. Problems
Visit this link for more info
https://getbootstrap.com/docs/4.3/components/forms/