Bootstrap - Avoid small controls wrapping in mobile view - html

Question

Consider the following Angular HTML template section:
<div class="row" [formGroup]="saveForm">
<label for="sections" class="col-md-3 col-form-label">Sections:</label>
<div class="col-md-9">
<a class="add-link" (click)="addSection()">Add Section</a>
<div class="mt-2 mb-2" formArrayName="sections">
<div *ngFor="let section of saveForm.get('sections')['controls']; let i=index" [formGroupName]="i">
<div class="row mb-2">
<div class="col-md-3">
<label for="from">From:</label>
</div>
<div class="col-md-2">
<input class="form-control" type="text" formControlName="from">
</div>
<div class="col-md-2">
<label for="to">To:</label>
</div>
<div class="col-md-2 mb-2">
<input class="form-control" type="text" formControlName="to">
</div>
<div class="col-md-1 custom-icon">
<i class="fas fa-minus-circle fa-lg clickable" (click)="deleteRow(i)"></i>
</div>
</div>
</div>
</div>
</div>
</div>
This renders like so:
Now if I go to the mobile view in the browser it looks like this:
Both inputs will be limited to no more than 4 digits so I do not need them to be that large. Ideally I would like to have the two labels with their inputs on the same line with the delete icon below them (To be honest I'm not sure what to do with it UX wise). If that is not possible at least to have each label with its input on the same line.
I think something like the following would be best:
How can I accomplish this without breaking the full desktop view?
I am using Bootstrap 4.3.1
Thank you.

Answer 1

This is what you need for under the md sized devices:
divide the rows into col-4 for label
divide the rows into col-6 for input (or smaller)
style the icon via position:absolute to be on the right
Working snippet below:
#media screen AND (max-width:768px) {
.custom-icon {
position: absolute;
right: 20px;
top: -10px
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class='container-fluid'>
<div class="row" [formGroup]="saveForm">
<label for="sections" class="col-md-3 col-form-label">Sections:</label>
<div class="col-md-9">
<a class="add-link" (click)="addSection()">Add Section</a>
<div class="mt-2 mb-2" formArrayName="sections">
<div *ngFor="let section of saveForm.get('sections')['controls']; let i=index" [formGroupName]="i">
<div class="row mb-2">
<div class="col-4 col-md-3">
<label for="from">From:</label>
</div>
<div class="col-6 col-md-2">
<input class="form-control" type="text" formControlName="from">
</div>
<div class="col-4 col-md-2">
<label for="to">To:</label>
</div>
<div class="col-6 col-md-2 mb-2">
<input class="form-control" type="text" formControlName="to">
</div>
<div class="col-1 col-md-1 custom-icon">
<i class="fa fa-minus-circle fa-lg clickable" (click)="deleteRow(i)"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

you can achieve this without any custom stylesheet. its all about bootstrap classes.
I just wrapped inputs and labels in separate div and remove icon in separate div.
Please have a look at the below snippet.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<div class="row" [formGroup]="saveForm">
<label for="sections" class="col-md-3 col-form-label">Sections:</label>
<div class="col-md-9">
<a class="add-link" (click)="addSection()">Add Section</a>
<div class="mt-2 mb-2" formArrayName="sections">
<div *ngFor="let section of saveForm.get('sections')['controls']; let i=index" [formGroupName]="i">
<div class="row mb-2 mb-sm-0">
<div class="col-10">
<div class="row">
<div class="col-6 col-sm-3 mb-2 mb-sm-0">
<label for="from">From:</label>
</div>
<div class="col-6 col-sm-3 mb-2 mb-sm-0">
<input class="form-control" type="text" formControlName="from">
</div>
<div class="col-6 col-sm-3">
<label for="to">To:</label>
</div>
<div class="col-6 col-sm-3">
<input class="form-control" type="text" formControlName="to">
</div>
</div>
</div>
<div class="col-2 d-flex align-items-center">
<div class=" custom-icon">
<i class="fas fa-minus-circle fa-lg clickable text-danger" (click)="deleteRow(i)"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>