Try to make horizontal bootstrap form with three column - html

Question

I am trying to make horizontal form with three field but I am facing space issue between label and input type.
I want to reduce space between label and input.
HTML code:
<div class="container-fluid">
<form class="row">
<div class="col-md-12">
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">Last Name</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-2 control-label">First Name</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
<label for="inputValue" class="col-md-2 control-label">First Name</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">State</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputSt" placeholder="ST">
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="inputZip" placeholder="Zip">
</div>
<label for="inputValue" class="col-md-2 control-label">Other</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</form>
</div>
</div>

Answer 1

You just need to remove the col-sm-2 in your label. You can also check the my code below, it could save more space.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<form class="row">
<div class="col-md-12">
<div class="form-group row">
<div class="col-md-4">
<label for="inputKey" class=" control-label">Last Name</label>
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<div class="col-md-4">
<label for="inputValue" class="control-label">First Name</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
<div class="col-md-4">
<label for="inputValue" class="control-label">First Name</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
<div class="form-group row">
<div class="col-md-2">
<label for="inputKey" class=" control-label">State</label>
<input type="text" class="form-control" id="inputSt" placeholder="ST">
</div>
<div class="col-md-2">
<label for="inputKey" class="control-label">zip</label>
<input type="text" class="form-control" id="inputZip" placeholder="Zip">
</div>
<div class="col-md-4">
<label for="inputValue" class=" control-label">Other</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</form>
</div>
</div>
<hr>
<h3>Or remove the col-sm for labels.</h3>
<div class="container-fluid">
<form >
<div class="col-md-12">
<div class="form-group row">
<label for="inputPassword" class="col-form-label">Last Name</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<label for="inputPassword" class="col-form-label">Last Name</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<label for="inputPassword" class="col-form-label">Last Name</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</div>
</form>
</div>
</div>
Open the snippet in full page.

Answer 2

Just put label and input in same column that is in my case col-md-4 and give it a class like columns. and
.columns {
display: flex;
flex-direction: row;
}
label {
width: 6rem;
margin-right: 2rem;
}
<div class="container-fluid">
<form class="row">
<div class="col-md-12">
<div class="form-group row">
<div class="col-md-4 columns">
<label for="inputKey" class="control-label">Last Name</label>
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<div class="col-md-4 columns">
<label for="inputValue" class="control-label">First Name</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
<div class="col-md-4 columns">
<label for="inputValue" class="control-label">First Name</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</form>
</div>