Positioning checkboxes (Bootstrap)

HTML-CSS
1

I’m making a website with a form to practice some aspects of Bootstrap 4. I got this so little but so annoying problem with the position of checkboxes and radio buttons. For some reason checkboxes want to pop outside of their container element whereas radio buttons stay perfectly inside lines. Here’s a picture of that (added borders to parent divs to show the problem better):

examplepic
examplepic895×314 43.8 KB

So if anyone has time, I would appreaciate some help on figuring out why this happens and how I’m going to get the checkboxes in the same line with radio buttons.

Here’s the code for that part:

<fieldset class="form-group">
   <div class="form-row text-left">
      <legend class="col-5">Choose the type of pastry:</legend>
      <div class="col-7 borders">
         <div class="form-check">
            <input class="form-check-input" type="radio" name="pastry" id="pastry-1" value="basic">
            <label class="form-check-label" for="pastry-1">Basic but delicous</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="pastry" id="pastry-2" value="chocolate">
            <label class="form-check-label" for="pastry-2">Luscious chocolate</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="pastry" id="pastry-3" value="tiger">
            <label class="form-check-label" for="pastry-4">Tiger (whirly mix of vanilla and chocolate)</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="pastry" id="pastry-4" value="chocolate-chip">
            <label class="form-check-label" for="pastry-4">Chocolate chips</label>
         </div>
      </div>
   </div>
</fieldset>

<fieldset class="form-group">
   <div class="form-row text-left">
      <legend class="col-5">Choose frosting:<br><small>(PS. you can totally combine two or even three of them <i class="fa fa-heart"></i>)</small></legend>
      <div class="col-7 borders">
         <div class="form-ceck">
            <input class="form-check-input" type="checkbox" name="frosting" id="frosting-1" value="vanilla">
            <label class="form-check-label" for="frosting-1">Vanilla</label>
         </div>
         <div class="form-ceck">
            <input class="form-check-input" type="checkbox" name="frosting" id="frosting-2" value="chocolate">
            <label class="form-check-label" for="frosting-2">Chocolate</label>
         </div>
         <div class="form-ceck">
            <input class="form-check-input" type="checkbox" name="frosting" id="frosting-3" value="lemon">
            <label class="form-check-label" for="frosting-3">Lemon</label>
         </div>
         <div class="form-ceck">
            <input class="form-check-input" type="checkbox" name="frosting" id="frosting-4" value="Strawberry">
            <label class="form-check-label" for="frosting-4">Strawberry</label>
         </div>
         <div class="form-ceck">
            <input class="form-check-input" type="checkbox" name="frosting" id="frosting-5" value="white-choco">
            <label class="form-check-label"  for="frosting-5">White chocolate</label>
         </div>
      </div>
   </div>
</fieldset>
2

For me it works.

image
image1352×513 35.8 KB

3

You have a typo on the .form-check class for the checkboxes, you have form-ceck should be form-check.

2 Likes
4

I’ve been staring that for quite a while and didn’t notice that! Thank you so much, now I got to go and bang my head to the wall :sweat_smile: