How to get achieve form style in bootstrap? - html

Question

I am Trying to achieve below style using bootstrap framework. I was able to achieve some what similar to this, but the problem is the save button is not getting aligned to right(not taking available width). There is a gap between save button and red border wrapper. Is there any way to to get the button take available width? or is it possible using inline-form or something? please help.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div style="border:1px solid red;" class="container mb-4">
<div class="row mt-4">
<div class="col-5">
<div class="form-group row">
<label for="sel-city" class="col-form-label col-md-2">Label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-city" name="city"></select>
</div>
</div>
</div>
<div class="col">
<div class="form-group row">
<label for="sel-zone" class="col-form-label col-md-2">Label</label>
<div class="col-md-7">
<select class="form-control custom-select" id="sel-zone" name="workzone"></select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-5">
<div class="form-group row">
<label for="sel-stage" class="col-form-label col-md-2">label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-stage" name="stage">
</select>
</div>
</div>
</div>
<div class="col">
<div class="form-group row">
<label for="sel-status" class="col-form-label col-md-2">Label</label>
<div class="col-md-7">
<select class="form-control custom-select" id="sel-status" name="status"></select>
</div>
<button id="btn-status-save" class="btn btn-primary float-right" onclick="saveStatus()">Save</button>
</div>
</div>
</div>
</div>

Answer 1

So I restructured your html a bit so it flows automatically (see example)
Key things to note directly related to your question:
For the button (classes)
btn-block: This will make the button expand the entire available width of the container div.
For the column (classes):
align-self-end : will put item at the very bottom right of div; would need to add mb-3 to add bottom margin so it aligns with your other element.
noPadding: custom css class. By default, cols will have padding on the left and right side. You will want to override this with a css class if you want to kill that off.
.noPadding {
padding-right: 0px !important;
padding-left: 0px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div style="border:1px solid red;" class="container mb-4">
<div class="row mt-4">
<div class="col-5">
<div class="form-group">
<label for="sel-city" class="col-form-label col-md-2">Label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-city" name="city"></select>
</div>
</div>
<div class="form-group">
<label for="sel-zone" class="col-form-label col-md-2">Label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-zone" name="workzone"></select>
</div>
</div>
</div>
<div class="col-5">
<div class="form-group">
<label for="sel-stage" class="col-form-label col-md-2">label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-stage" name="stage">
</select>
</div>
</div>
<div class="form-group">
<label for="sel-status" class="col-form-label col-md-2">Label</label>
<div class="col-md-10">
<select class="form-control custom-select" id="sel-status" name="status"></select>
</div>
</div>
</div>
<div class="col align-self-end mb-3 noPadding">
<button id="btn-status-save" class="btn btn-primary btn-block" onclick="saveStatus()">Save</button>
</div>
</div>
</div>