# Dash layout bootstrap question

**URL:** <https://community.plotly.com/t/dash-layout-bootstrap-question/70753>\
**Category:** Dash Python\
**Created:** [December 11, 2022, 7:10pm UTC](https://community.plotly.com/t/dash-layout-bootstrap-question/70753 "2022-12-11T19:10:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![marvy](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@marvy](https://community.plotly.com/u/marvy)\
**Post date:** [December 11, 2022, 7:10pm UTC](https://community.plotly.com/t/dash-layout-bootstrap-question/70753/1 "2022-12-11T19:10:28Z")

</div>

Hello, i try to change an existing layout.

```auto
                html.Div([ 
                    html.Div([# Title
                        html.H2('This is a title test'),                      
                    ], style={}, className='col-9 bg-success')
                    ,
                    html.Div([ # Home knop
                        dcc.Link('Home', href='/', className='btn btn-primary'),
                    ], style={}, className='col-3 text-right bg-warning' )
                 ], style={}, className='row')

```

This results in:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/9/a/9a1745adb90032b2991022c17b2d289b64c8f5d3.png)

why are the colunns not 9/12 and 3/12 of the row ?

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [December 11, 2022, 7:46pm UTC](https://community.plotly.com/t/dash-layout-bootstrap-question/70753/2 "2022-12-11T19:46:33Z")

</div>

Normally, it’s dbc.Row and dbc.Col.

But, have you imported the dbc.theme into your external stylesheets?

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [December 11, 2022, 7:53pm UTC](https://community.plotly.com/t/dash-layout-bootstrap-question/70753/3 "2022-12-11T19:53:38Z")

</div>

I think @jinnyzor is right, this looks OK:

```python
import dash
from dash import html, dcc
import dash_bootstrap_components as dbc

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

app.layout = html.Div(
    [
        html.Div(
            [ # Title
                html.H2('This is a title test'),
            ],
            style={},
            className='col-9 bg-success'
        ),
        html.Div(
            [ # Home knop
                dcc.Link('Home', href='/', className='btn btn-primary'),
            ],
            style={},
            className='col-3 text-right bg-warning')
    ],
    style={},
    className='row'
)

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

```

May I ask why you use `html.Div()` instead of `dbc.Col()` and `dbc.Row()`?

---

<div class="post-metadata">

**Author:** ![marvy](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@marvy](https://community.plotly.com/u/marvy)\
**Post date:** [December 11, 2022, 8:26pm UTC](https://community.plotly.com/t/dash-layout-bootstrap-question/70753/4 "2022-12-11T20:26:44Z")

</div>

It is an existing project.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [December 11, 2022, 8:44pm UTC](https://community.plotly.com/t/dash-layout-bootstrap-question/70753/5 "2022-12-11T20:44:51Z")

</div>

Make sure you are importing the bootstrap theme to the external stylesheets.