# Survey Project: How to align checkbox with label

**URL:** <https://forum.freecodecamp.org/t/survey-project-how-to-align-checkbox-with-label/296606>\
**Category:** General\
**Created:** [July 19, 2019, 8:39am UTC](https://forum.freecodecamp.org/t/survey-project-how-to-align-checkbox-with-label/296606 "2019-07-19T08:39:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jedxyz](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jedxyz/32/120079_2.png) [@jedxyz](https://forum.freecodecamp.org/u/jedxyz)\
**Post date:** [July 19, 2019, 8:39am UTC](https://forum.freecodecamp.org/t/survey-project-how-to-align-checkbox-with-label/296606/1 "2019-07-19T08:39:29Z")

</div>

Hello,  
I am struggling to make the checkbox labels line up withe the checkbox themselves. The label is offset slightly below.

I have attempted to make this page using bootstrap rows to split the page in half like the demo. Is this what may be causing my problem? I am sure there was a much better way to approach this.

Here is a link to the project: [https://codepen.io/jedxyz/pen/oKgWyb](https://codepen.io/jedxyz/pen/oKgWyb)

---

<div class="post-metadata">

**Author:** ![Rajesh-UIDev](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rajesh-uidev/32/118564_2.png) [@Rajesh-UIDev](https://forum.freecodecamp.org/u/Rajesh-UIDev)\
**Post date:** [July 19, 2019, 9:37am UTC](https://forum.freecodecamp.org/t/survey-project-how-to-align-checkbox-with-label/296606/2 "2019-07-19T09:37:34Z")

</div>

**Try this HTML**

_Add these bootstrap classes to the checkboxes_

```auto
align-middle position-relative

Example: <input class="form-check-input align-middle position-relative" type="checkbox" name="check" id="front-end" value="front-end">

```

And then add this CSS

```auto
input[type=checkbox]{
         top: -3px;
}

```

---

<div class="post-metadata">

**Author:** ![jedxyz](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jedxyz/32/120079_2.png) [@jedxyz](https://forum.freecodecamp.org/u/jedxyz)\
**Post date:** [July 19, 2019, 9:51am UTC](https://forum.freecodecamp.org/t/survey-project-how-to-align-checkbox-with-label/296606/3 "2019-07-19T09:51:50Z")

</div>

Fantastic! That worked like magic.  
Thank you very much.

---

<div class="post-metadata">

**Author:** ![Rajesh-UIDev](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rajesh-uidev/32/118564_2.png) [@Rajesh-UIDev](https://forum.freecodecamp.org/u/Rajesh-UIDev)\
**Post date:** [July 19, 2019, 10:05am UTC](https://forum.freecodecamp.org/t/survey-project-how-to-align-checkbox-with-label/296606/4 "2019-07-19T10:05:02Z")

</div>

Welcome 🙂

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 9:33am UTC](https://forum.freecodecamp.org/t/survey-project-how-to-align-checkbox-with-label/296606/5 "2021-01-17T09:33:32Z")

</div>