# Dash Bootstrap Components and Flexbox?

**URL:** <https://community.plotly.com/t/dash-bootstrap-components-and-flexbox/40816>\
**Category:** Dash Python\
**Created:** [June 9, 2020, 6:09pm UTC](https://community.plotly.com/t/dash-bootstrap-components-and-flexbox/40816 "2020-06-09T18:09:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![marketemp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/marketemp/32/11523_2.png) [@marketemp](https://community.plotly.com/u/marketemp)\
**Post date:** [June 9, 2020, 6:09pm UTC](https://community.plotly.com/t/dash-bootstrap-components-and-flexbox/40816/1 "2020-06-09T18:09:54Z")

</div>

[Layout - dbc docs](https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/) shows seven examples of how to horizontally align columns within individual rows (CSS Grid). However there are no examples of how a single cell can vertically span multiple rows (Flexbox). Is there any examples of how to achieve a layout of this nature?

 ![Screen Shot 2020-06-09 at 10.54.20 AM](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/4/479124f50c8e139d7c75e046ba9db552b38ed2e9.png)

---

<div class="post-metadata">

**Author:** ![marketemp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/marketemp/32/11523_2.png) [@marketemp](https://community.plotly.com/u/marketemp)\
**Post date:** [June 9, 2020, 11:30pm UTC](https://community.plotly.com/t/dash-bootstrap-components-and-flexbox/40816/2 "2020-06-09T23:30:03Z")

</div>

Fifth or sixth time I figured my question out myself before getting a comment. I was able to do it embedding rows and columns inside rows and columns. It was a lot of work and something I wouldn’t recommend:

```auto
dbc.Row([dbc.Col(html.Div(html.B('1'), style={'height': '190px'},
                className='bg-danger'), width=4),
    dbc.Col(html.Div([
        dbc.Row([dbc.Col(html.Div(html.B('2'), className='bg-success'))]),
        dbc.Row([dbc.Col(html.Div(html.B('3'), style={'height': '120px'},
                className='bg-info'), width=6),
            dbc.Col(html.Div([
                dbc.Row([dbc.Col(html.Div(html.B('4'), className='bg-dark badge-dark'))]),
                dbc.Row([dbc.Col(html.Div(html.B('5'), className='bg-warning'))],
                className="row mt-3")]), width=6)
        ], className="row mt-3")]), width=8)
])

```

the code is poorly formatted to most efficiently fit in this little block.

 ![Screen Shot 2020-06-09 at 4.26.56 PM](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/d/d76f16ca2c3e427bc84815e853c465fe2800eafa.png)

Now let’s see if I can create a Holy Grail Layout before the sun goes down :o?

---

<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:** [June 10, 2020, 6:41am UTC](https://community.plotly.com/t/dash-bootstrap-components-and-flexbox/40816/3 "2020-06-10T06:41:50Z")

</div>

Hey @marketemp,

The solution you found is correct. I just wanted to comment to point out that the Bootstrap grid system is actually built with flexbox, and so in principle you should be able to do anything with it that you can do with flexbox. Bootstrap also has a bunch of utility classes such as `d-flex` to give you finer control of your elements without writing your own CSS or adding a tonne of inline style arguments. You can read about those [here](https://getbootstrap.com/docs/4.5/utilities/flex/)

---

<div class="post-metadata">

**Author:** ![marketemp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/marketemp/32/11523_2.png) [@marketemp](https://community.plotly.com/u/marketemp)\
**Post date:** [June 10, 2020, 2:33pm UTC](https://community.plotly.com/t/dash-bootstrap-components-and-flexbox/40816/4 "2020-06-10T14:33:36Z")

</div>

Thanks Tom, this is really good information as all of my searches lead with Plotly Dash Bootstrap and this wouldn’t have come up with that. You can see by my use of the color classes that I’m learning to use a bit of Bootstrap without Dash (CSS rookie), but have a long way to go.

If you or anyone on your team can shed some light on my Holy Grail layout thread, that would mean a world to me. I am about to take a second step at it using the principles from this instead of the Sidebar Example on GitHub.