Currently, I am in the process of creating a form using Bootstrap, and I have been progressing well, except for one issue. I want to integrate a switch type checkbox into the form, with a label on top and text on either side of it. Despite several attempts, I have been unable to align the two texts and the checkbox in a single line.
Here is what it looks like at the moment:
https://i.sstatic.net/Ouoyc.png
Below is a detailed example of the functioning form:
<!DOCTYPE html>
<html>
<head>
<title>TestSite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8e8383989f989e8d9cacd9c2ddc2df">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--link th:rel="stylesheet" th:href="@{/css/styles.css}"/-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body class="bodyClass sb-nav-fixed">
<div class="container">
<div class="card shadow-lg border-0 rounded-lg mt-5">
<div class="card-header">
<h2 class="text-left font-weight-light my-4">Add content</h2>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="col">
<label class="small mb-1" for="price">Price:</label>
<div class="input-group mb-3">
<input id="price" name="price" type="text" class="form-control" placeholder="Price">
<span class="input-group-text">$</span>
</div>
</div>
<div class="col">
<label for="revenue">Revenue</label>
<div class="form-text">Fix</div>
<div class="form-check form-switch form-check-inline">
<input id="revenue" class="form-check-input form-check-inline" type="checkbox">
</div>
<div class="form-text">Percent</div>
</div>
</div>
<div class="btn btn-lg btn-secondary btn-block col-4">Cancel</div>
<button class="btn btn-lg btn-primary btn-block col-4" type="submit">Save</button>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22404d4d56515650435262170c130c11">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>This aspect is part of the administrative panel of my project, and I do not intend to utilize it on mobile devices; it is specifically designed for PC browsers, hence the use of col/row.