# Bricks Form: how to align checkbox label?

**URL:** <https://forum.bricksbuilder.io/t/bricks-form-how-to-align-checkbox-label/24818>\
**Category:** How To\
**Created:** [July 25, 2024, 3:53pm UTC](https://forum.bricksbuilder.io/t/bricks-form-how-to-align-checkbox-label/24818 "2024-07-25T15:53:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pope2108](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/p/ba8739/32.png) [@Pope2108](https://forum.bricksbuilder.io/u/Pope2108)\
**Post date:** [July 25, 2024, 3:53pm UTC](https://forum.bricksbuilder.io/t/bricks-form-how-to-align-checkbox-label/24818/1 "2024-07-25T15:53:57Z")

</div>

How can I align the label to be inline with the checkbox? Also, how can I style the checkbox? Thanks.

 ![Screenshot 2024-07-25 at 18.50.37](https://forum.bricksbuilder.io/uploads/default/original/3X/6/b/6b26d44df5c627ece4d4289727320c6c60898748.jpeg)

---

<div class="post-metadata">

**Author:** ![Pope2108](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/p/ba8739/32.png) [@Pope2108](https://forum.bricksbuilder.io/u/Pope2108)\
**Post date:** [July 26, 2024, 12:35pm UTC](https://forum.bricksbuilder.io/t/bricks-form-how-to-align-checkbox-label/24818/2 "2024-07-26T12:35:15Z")

</div>

It happens by default when the text is too long: [Sample Page – Try Bricks – t82f9596](https://try.bricksbuilder.io/t82f9596/sample-page/)

---

<div class="post-metadata">

**Author:** ![Soluna](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/s/e47774/32.png) [@Soluna](https://forum.bricksbuilder.io/u/Soluna)\
**Post date:** [July 26, 2024, 12:47pm UTC](https://forum.bricksbuilder.io/t/bricks-form-how-to-align-checkbox-label/24818/3 "2024-07-26T12:47:28Z")

</div>

This isn´t really a question about Bricks but instead very basic CSS.

There are multiple ways to do this but just to name one:

The checkbox-Field in the form seems to have a class called “options-wrapper”. The options wrapper itself is a `<ul>`. Inside the `<ul>` there´s one `<li>` which holds the `<input>` and the `<label>`.  
In the custom CSS of the form, go to the CSS → Custom CSS and type something like

```auto
%root% ul.options-wrapper li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

%root% ul.options-wrapper input{
  margin-top: 6px;
}

```

That works for me. I guess the classes are identical across Bricks installations, so this should work for you, too. 🙂

---

<div class="post-metadata">

**Author:** ![Pope2108](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/p/ba8739/32.png) [@Pope2108](https://forum.bricksbuilder.io/u/Pope2108)\
**Post date:** [July 26, 2024, 12:58pm UTC](https://forum.bricksbuilder.io/t/bricks-form-how-to-align-checkbox-label/24818/4 "2024-07-26T12:58:53Z")

</div>

Brilliant, that worked perfectly and thank you for the explanation. As a beginner, I would still expect it to display like that even when the text is longer. Bricks calls itself a visual builder after all. Thanks again 🙏

---

<div class="post-metadata">

**Author:** ![Soluna](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/s/e47774/32.png) [@Soluna](https://forum.bricksbuilder.io/u/Soluna)\
**Post date:** [July 26, 2024, 3:34pm UTC](https://forum.bricksbuilder.io/t/bricks-form-how-to-align-checkbox-label/24818/5 "2024-07-26T15:34:27Z")

</div>

You´re welcome! 🙂 I´m always happy to help!

And yea, you´re probably right about Bricks calling itself a visual builder. Coming from Elementor I can say that Elementor was much easier for me when I started building websites but also much more limited in terms of what you could actually do with it out of the box which is why I´m very happy I switched to Bricks some time ago 🙂