Html Question posted in
Some basic documentation can be found here.

Html – Bootstrap check box with a very long label

This CSS

input[type='checkbox'] {
    transform: scale( 2 );
    margin-right: 1.5em;
    border: 1.5px solid black;
}

The HTML

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="mChkCustomer">
    <label class="form-check-label" for="mChkCustomer">
        This is just a test for a very llllllooooonnnnngggggg label ..................
    </label>
</div>

The result looks good on a wide screen

enter image description here

But when the screen is narrow, this is what happen

enter image description here

Question: How can I align the checkbox and label properly?

Tags:

3

Answers


  1. 0

    Try move label instead checkbox

    The CSS

    input[type='checkbox'] {
    transform: scale( 2 );
    /*margin-right: 1.5em;*/
    border: 1.5px solid black;
}

.form-check-label {
  margin-left: 1.5em;
}
    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Checkbox Alignment</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .form-check {
      display: flex;
      align-items: flex-start;
      /* Aligns checkbox to the top of the first line of text */
    }
    
    .form-check-input {
      transform: scale(2);
      margin-right: 1.5em;
      /* Space between the checkbox and the label */
      flex-shrink: 0;
      /* Prevents the checkbox from shrinking */
    }
    
    .form-check-label {
      flex-grow: 1;
      /* Allows the label to fill available horizontal space */
      flex-basis: 0;
      /* Resets the starting width, allowing it to grow as needed */
      white-space: normal;
      /* Allows the text to wrap */
    }
  </style>
</head>

<body>
  <div class="container-fluid mt-3">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="mChkCustomer">
      <label class="form-check-label" for="mChkCustomer">
            This is just a test for a very llllllooooonnnnngggggg label .........................
        </label>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>
    Login or Signup to reply.
  3. 0

    You could use flex utility classes and add display: flex to parent container, with centered items:

    <div class="form-check d-flex align-items-center">

    demo

    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    input[type='checkbox'] {
      transform: scale( 2);
      margin-right: 1.5em;
      border: 1.5px solid black;
    }
  </style>
</head>

<body class="p-3 m-0 border-0 bd-example m-0 border-0">

  
  <form>


    <div class="form-check d-flex align-items-center">
      <input class="form-check-input" type="checkbox" value="" id="mChkCustomer">
      <label class="form-check-label" for="mChkCustomer">
        This is just a test for a very llllllooooonnnnngggggg label ..................
    </label>
    </div>


    
  </form>



</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search