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

Bootstrap 5 in line checkbox label – Html

Why is the checkbox not in line with the label?

What I get

<div class="row g-1 border-bottom p-3">
  <div class="col border-end justify-content-center d-flex align-items-center">
    <div class="h6 text-sm-center h-25">
      osiągniecia
    </div>
  </div>
  <div class="col ps-3">

    <div class="form-check">
      <input type="checkbox" name="wyroznienie" id="wyroznienie">
      <label for="wyroznienie">
        Świadectwo ukończenia szkoły podstawowej z wyróżnieniem
      </label>
    </div>

    <div class="form-check">
      <input type="checkbox" name="wyroznienie2" id="wyroznienie2">
      <label for="wyroznienienie2">
        Osiągnięcia w zakresie aktywności społecznej, w tym na rzecz środowiska szkolnego, w szczególności w formie wolontariatu
      </label>
    </div>
  </div>
</div>

I need the checkbox to be in line with its label.

Tags:

2

Answers


  1. 0

    Use display: flex in .form-check.add some margin to the input and padding to the label

    Demo 

    .form-check {
  display: flex !important;
  align-items: flex-start;
}

.form-check>input {
  margin-top: 7px;
}

.form-check>label {
  padding-left: 7px;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="row g-1 border-bottom p-3">
  <div class="col border-end justify-content-center d-flex align-items-center">
    <div class="h6 text-sm-center h-25">
      osiągniecia
    </div>
  </div>
  <div class="col ps-3">


    <div class="form-check">
      <input type="checkbox" name="wyroznienie" id="wyroznienie">
      <label for="wyroznienie">
              Świadectwo ukończenia szkoły podstawowej z wyróżnieniem
            </label>
    </div>

    <div class="form-check">
      <input type="checkbox" name="wyroznienie2" id="wyroznienie2">
      <label for="wyroznienienie2">
              Osiągnięcia w zakresie aktywności społecznej, w tym na rzecz środowiska szkolnego, w szczególności w formie wolontariatu
            </label>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Use the appropriate checkbox classes: form-check-input and form-check-label.

    See the documentation.

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row g-1 border-bottom p-3">
  <div class="col border-end justify-content-center d-flex align-items-center">
    <div class="h6 text-sm-center h-25">
      osiągniecia
    </div>
  </div>
  <div class="col ps-3">


    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="wyroznienie" id="wyroznienie">
      <label class="form-check-label" for="wyroznienie">
        Świadectwo ukończenia szkoły podstawowej z wyróżnieniem
      </label>
    </div>

    <div class="form-check">

      <input class="form-check-input" type="checkbox" name="wyroznienie2" id="wyroznienie2">
      <label class="form-check-label" for="wyroznienienie2">
          Osiągnięcia w zakresie aktywności społecznej, w tym na rzecz środowiska szkolnego, w szczególności w formie wolontariatu
      </label>

    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search