I am facing an issue with screen resizing. The code below appears fine on a full screen, but as soon as I resize the window even a tiny bit, it starts to look distorted and unattractive. I have gone through the Bootstrap 4 grid layout tutorial, but it is not helping me resolve this problem.
Currently, it only looks like this on a full screen: From: [ 01/01/2010 ] To: [ 12/18/2018]
The moment the screen is resized, it changes to this:
From: [ 01/01/2010 ] To:
[ 12/18/2018]
If the screen is resized to anything less than full screen, it should look like this and remain that way until the smallest screen size:
From: [ 01/01/2010 ]
To: [ 12/18/2018]
I understand that the grid system is based on large, medium, small, and extra small. However, to me, anything less than a full screen is considered medium or smaller.
<div class="row">
<div class="col">
<label for="fromUploadDate text-muted">From:</label>
</div>
<div class="col">
<kendo-datepicker></kendo-datepicker>
</div>
<div class="col">
<label for="toUploadDate text-muted">To:</label>
</div>
<div class="col">
<kendo-datepicker></kendo-datepicker>
</div>
</div>