After developing a form using Bootstrap, I encountered an issue with the responsiveness on different devices. Specifically, when viewing the form on narrow screens, the labels for the inputs break into two lines due to lack of space. While this is expected behavior, I need a solution to prevent it from happening. It would be acceptable if the label/icon gets cropped, but splitting over multiple lines is not desired in any case. The form itself is dynamically generated via PHP, so the length of the labels can vary.
The desired outcome should resemble the image below (with icons next to the labels):
https://i.sstatic.net/vEkMh.png
However, when the screen width is too narrow, it currently looks like this:
https://i.sstatic.net/WpUKa.png
To address this issue, I would prefer the icon to be hidden rather than wrapped onto a new line if there isn't enough space for it.
In the provided sample code snippet, the issue becomes evident when setting the width to 350px. Increasing it to 400px or more resolves the problem:
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div class="container" style="max-width:350px">
<form>
<div class="form-row">
<div class="col-4">
<div class="form-group">
<label for="input-1">First label <span class='fas fa-info-circle'></span>
</label>
<input id="input-1" class="form-control" name="input1" type="text">
</div>
</div>
<div class="col-4">
<div class="form-group">
<label for="input-1">Second label <span class='fas fa-info-circle'></span></label>
<input id="input-1" class="form-control" name="input2" type="text">
</div>
</div>
<div class="col-4">
<div class="form-group">
<label for="input-1">Third label <span class='fas fa-info-circle'></span></label>
<input id="input-1" class="form-control" name="input3" type="text">
</div>
</div>
</div>
</form>
</div>
</body>
</html>