# Checklist in dash core or bootstrap components

**URL:** <https://community.plotly.com/t/checklist-in-dash-core-or-bootstrap-components/46356>\
**Category:** Dash Python\
**Created:** [October 22, 2020, 11:33am UTC](https://community.plotly.com/t/checklist-in-dash-core-or-bootstrap-components/46356 "2020-10-22T11:33:36Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Varlor](https://avatars.discourse-cdn.com/v4/letter/v/d2c977/32.png) [@Varlor](https://community.plotly.com/u/Varlor)\
**Post date:** [October 22, 2020, 11:33am UTC](https://community.plotly.com/t/checklist-in-dash-core-or-bootstrap-components/46356/1 "2020-10-22T11:33:36Z")

</div>

Hello, I would like to know if there is a possibility to have the checkboxes of a checklist on the right site ( or the labels on the left site of the checkboxes, its the same at the end). I use dash bootstrap components at the moment and for labelStyle “block”. Thanks in advance and best regards! Example code snippet:

```auto
                                    dbc.Col(dbc.Checklist(
                                        id='testChecklist',
                                        value=[],
                                        labelStyle={'display': 'block', 'color': 'black'},
                                    )
                                        , width=5)

```

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [October 22, 2020, 4:14pm UTC](https://community.plotly.com/t/checklist-in-dash-core-or-bootstrap-components/46356/2 "2020-10-22T16:14:34Z")

</div>

You could try adding the following CSS to a file in your `assets/` folder

```css
.custom-control {
  padding-left: 0;
}

.custom-control-label::before,
.custom-control-label::after {
  left: unset;
  right: 0;
}

```

Tested with this app

```python
import dash
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    dbc.Checklist(
        options=[{"label": f"Item {i}", "value": i} for i in range(10)],
        id="checklist",
        labelStyle={"display": "block"},
    ),
    className="p-5",
)

if __name__ == " __main__":
    app.run_server(debug=True)

```

I see this

![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/8/8f777ef99dc01245d64085d91a43f12438a0a459.png)

Note that the checkboxes are to the right of the container because you set `display: block` in `labelStyle`. If you don’t set that, try this CSS instead

```css
.custom-control {
  padding-left: 0;
  padding-right: 1.5rem;
}

.custom-control-label::before,
.custom-control-label::after {
  left: unset;
  right: -1.5rem;
}

```