# Help with the Html and CSS part of plotly dash

**URL:** <https://community.plotly.com/t/help-with-the-html-and-css-part-of-plotly-dash/39849>\
**Category:** Dash Python\
**Created:** [May 21, 2020, 7:57am UTC](https://community.plotly.com/t/help-with-the-html-and-css-part-of-plotly-dash/39849 "2020-05-21T07:57:00Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jogafirmino](https://avatars.discourse-cdn.com/v4/letter/j/e8c25b/32.png) [@jogafirmino](https://community.plotly.com/u/jogafirmino)\
**Post date:** [May 21, 2020, 7:57am UTC](https://community.plotly.com/t/help-with-the-html-and-css-part-of-plotly-dash/39849/1 "2020-05-21T07:57:00Z")

</div>

I’m really struggling with the html and css of Dash. I have a good sense of how Dash works overall and I can make interactive charts with plenty of callbacks.

What’s really giving me trouble is dealing with styling and structuring the divs. I struggled to figure out how to put two different charts side by side. Items from dropdown menus are messing up the layout of the whole dashboard.

In my research I can’t seem to find any good tutorials on how to properly utilizes the html/css capabilities in order to create beautiful and ergonomically designed dashboards. Plotly’s own docs barely address this.

Do I have to go and learn HTML and css?

Any help will be appreciated.

---

<div class="post-metadata">

**Author:** ![sislvacl](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sislvacl](https://community.plotly.com/u/sislvacl)\
**Post date:** [May 21, 2020, 12:00pm UTC](https://community.plotly.com/t/help-with-the-html-and-css-part-of-plotly-dash/39849/2 "2020-05-21T12:00:47Z")

</div>

For setting up layout, I recommend using [dash bootstrap components](https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/)

---

<div class="post-metadata">

**Author:** ![jogafirmino](https://avatars.discourse-cdn.com/v4/letter/j/e8c25b/32.png) [@jogafirmino](https://community.plotly.com/u/jogafirmino)\
**Post date:** [May 21, 2020, 4:33pm UTC](https://community.plotly.com/t/help-with-the-html-and-css-part-of-plotly-dash/39849/3 "2020-05-21T16:33:18Z")

</div>

So I don’t even need to bother with any of that html stuff, I can just dbc for pretty much everything?

---

<div class="post-metadata">

**Author:** ![Emil](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emil/32/31734_2.png) [@Emil](https://community.plotly.com/u/Emil)\
**Post date:** [May 21, 2020, 4:37pm UTC](https://community.plotly.com/t/help-with-the-html-and-css-part-of-plotly-dash/39849/4 "2020-05-21T16:37:01Z")

</div>

For the most common things, you can use dbc, yes. However, while dbc is great, you might encounter specific use cases where custom css is needed.

---

<div class="post-metadata">

**Author:** ![sislvacl](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sislvacl](https://community.plotly.com/u/sislvacl)\
**Post date:** [May 21, 2020, 6:20pm UTC](https://community.plotly.com/t/help-with-the-html-and-css-part-of-plotly-dash/39849/5 "2020-05-21T18:20:01Z")

</div>

@Emil is right. I use bootstrap layout (`dbc.Col, dbc.Row`) all the time because I think it’s the best way to make layouts. However, I have run into hard-to-debug troubles numerous times - mainly when using `dash_table`.

If I use dash\_table in combination with bootstrap layout, I always include a [custom css](https://dash.plotly.com/external-resources) with

```auto
.dash-table-container .row {
  display: block;
  margin: 0;
}

```

I don’t know about other gotchas. Perhaps someone else will elaborate further.

---

<div class="post-metadata">

**Author:** ![opophehu](https://avatars.discourse-cdn.com/v4/letter/o/bc8723/32.png) [@opophehu](https://community.plotly.com/u/opophehu)\
**Post date:** [May 22, 2020, 12:20am UTC](https://community.plotly.com/t/help-with-the-html-and-css-part-of-plotly-dash/39849/6 "2020-05-22T00:20:44Z")

</div>

I had some trouble earlier with the same problem.

Then I found [https://grid.layoutit.com/](https://grid.layoutit.com/) . which is extremely useful for visually laying out your app.  
Once you are done you can just copy the css code on the right.  
However depending on how you construct your project, you do have to translate the html code into dash friendly html.(tag) format.

Hope this helps.

---

<div class="post-metadata">

**Author:** ![bgivens33](https://avatars.discourse-cdn.com/v4/letter/b/e68b1a/32.png) [@bgivens33](https://community.plotly.com/u/bgivens33)\
**Post date:** [May 22, 2020, 5:28am UTC](https://community.plotly.com/t/help-with-the-html-and-css-part-of-plotly-dash/39849/7 "2020-05-22T05:28:27Z")

</div>

I found the hardest part about getting started with Dash was the layout. Took a day and really understood how to manage the layout with CSS (grid and flex) and it has become much much easier… specifically grid.

---

<div class="post-metadata">

**Author:** ![sislvacl](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sislvacl](https://community.plotly.com/u/sislvacl)\
**Post date:** [May 22, 2020, 7:43am UTC](https://community.plotly.com/t/help-with-the-html-and-css-part-of-plotly-dash/39849/8 "2020-05-22T07:43:18Z")

</div>

@bgivens33 Do you know about a good comprehensive resource you could recommend?
