Menu
I'm trying to make a form using Bootstrap, and so far I'm doing great, except one thing. I'd like to add a switch type checkbox to the form, with a label on top, and text on both sides of it. I've tried many ways to accomplish this, but I can't seem to put the two texts and the checkbox in a single line.
It currently looks like this:
Here is a complete working example:
<!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/[email protected]/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/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>This is the admin panel part of my project, and I don't plan to use that on mobile, only in a PC browser, hence I'm using col/row.
351
You need to make them in same line using a container with flex, float them to one side or made them all inline. I chose the first.
All that is left is to nudge a bit the pieces.
.my-switch {
background: lightyellow;
padding-top: 6px;
}
.my-switch .form-switch {
margin: 3px 0px 0 15px;
}<!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/[email protected]/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 col-revenue">
<label for="revenue">Revenue</label>
<div class="d-flex my-switch">
<div class="form-text text-1">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 text-2">Percent</div>
</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/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>Update: this is same version with single label that changes text.
var chk = document.querySelector("#revenue");
var lbl = document.querySelector(".text-2");
var foo_check = function(ev) {
if (this.checked) {
lbl.innerText = "ON"
} else {
lbl.innerText = "OFF"
}
}
foo_check.call(chk);
chk.addEventListener('click', foo_check).my-switch {
background: lightyellow;
padding-top: 6px;
}
.my-switch .form-switch {
margin: 3px 0px 0 15px;
}<!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/[email protected]/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 col-revenue">
<label for="revenue">Revenue</label>
<div class="d-flex my-switch">
<div class="form-text text-1">State</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 text-2">ON or OFF</div>
</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/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
answered Nov 03 '25 07:11
Similar answer as IT goldman, but without any extra styling.
Using bootstrap 5, add a "d-flex" class at the most outer layer and a "float-end" on your button/switch
<div class="d-flex">
<p>
My first sentence
</p>
<div class="form-check form-switch form-check-inline">
<input class="form-check-input float-end"
type="checkbox"
role="switch"
[title]="'Example button'"
[id]="'example'">
</div>
<p>
My second sentence
</p>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With