I used the code below to display the interface seen here.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12">
<div class="card m-b-30">
<div class="card-header container-fluid">
<div class="row">
<h2 class="card-title">Customer Profile Types</h2>
<div class="col-md-4 float-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
</div>
<br>
<div class="CustomerProfileTypes-body">
<form>
<div class="form-group row text-center">
<label for="Name" class="col-sm-2 col-form-label text-center">Name</label>
<div class="col-sm-5 d-flex justify-content-around align-items-center">
<input type="text" class="form-control" id="inputText">
<input class="form-check-input mt-2" type="checkbox" id="gridCheck">
<label id="gridCheck" class="mt-2"> Active</label>
</div>
</div>
</form>
</div>
</div>
</div>https://i.sstatic.net/hSTI9.jpg
However, I am aiming to achieve this output and properly align all elements on my interface.
The name field should be centered along with the textbox, and the checkbox alignment needs to be adjusted as well.
I am a beginner and would greatly appreciate any assistance.