Search code examples
htmlcsscss-positionbootstrap-5

How to align text on both sides of a Bootstrap switch

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:

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/bootstrap@5.1.3/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/bootstrap@5.1.3/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.

Solution

  • 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/bootstrap@5.1.3/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/bootstrap@5.1.3/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/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>

</html>