# Dash Bootstrap Components Grid System not working

**URL:** <https://community.plotly.com/t/dash-bootstrap-components-grid-system-not-working/30957>\
**Category:** Dash Python\
**Created:** [November 6, 2019, 1:42pm UTC](https://community.plotly.com/t/dash-bootstrap-components-grid-system-not-working/30957 "2019-11-06T13:42:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Iwas](https://avatars.discourse-cdn.com/v4/letter/i/d2c977/32.png) [@Iwas](https://community.plotly.com/u/Iwas)\
**Post date:** [November 6, 2019, 1:42pm UTC](https://community.plotly.com/t/dash-bootstrap-components-grid-system-not-working/30957/1 "2019-11-06T13:42:36Z")

</div>

Hello, I am trying to use the Grid Layout from Bootstrap for my apps but the tutorial in the docs is not working for me. When I place something inside a row it is still displayed below each other and not in one row. Am I missing something? would be glad if someone could help me out

```auto
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc

external_stylesheets = ['dbc.themes.BOOTSTRAP']

app = dash.Dash( __name__ , external_stylesheets=external_stylesheets)

app.layout = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(html.Div("Row 0, Column 0"),width=4),
                dbc.Col(html.Div("Row 0, Column 1"),width=4),
                dbc.Col(html.Div("Row 0, Column: 2"),width=4)
            ]
        )

        ])

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

```

![41](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/b/bd2a004fe47a29a551ee7b8df0f528daee9cb53b.png)

Aren’t the colums supposed to be aligned next to each other in one row like that?

I have installed boostrap core components and it is working fine for me in general (e.g. Alerts).

---

<div class="post-metadata">

**Author:** ![dimark](https://avatars.discourse-cdn.com/v4/letter/d/db5fbb/32.png) [@dimark](https://community.plotly.com/u/dimark)\
**Post date:** [November 6, 2019, 1:47pm UTC](https://community.plotly.com/t/dash-bootstrap-components-grid-system-not-working/30957/2 "2019-11-06T13:47:36Z")

</div>

@Iwas

There is a small mistake in your `external_stylesheets` list.

You are passing a string to the list `'dbc.themes.BOOTSTRAP'` but it should be the variable:

```auto
external_stylesheets = [dbc.themes.BOOTSTRAP]

```

---

<div class="post-metadata">

**Author:** ![Iwas](https://avatars.discourse-cdn.com/v4/letter/i/d2c977/32.png) [@Iwas](https://community.plotly.com/u/Iwas)\
**Post date:** [November 6, 2019, 1:49pm UTC](https://community.plotly.com/t/dash-bootstrap-components-grid-system-not-working/30957/3 "2019-11-06T13:49:46Z")

</div>

Ouch, thank you! It’s working.

---

<div class="post-metadata">

**Author:** ![bsridhar85](https://avatars.discourse-cdn.com/v4/letter/b/f08c70/32.png) [@bsridhar85](https://community.plotly.com/u/bsridhar85)\
**Post date:** [March 13, 2020, 10:54am UTC](https://community.plotly.com/t/dash-bootstrap-components-grid-system-not-working/30957/4 "2020-03-13T10:54:45Z")

</div>

Hi,

Same problem for me… but I passed the variable correctly… below is the code

PLOTLY\_LOGO = “[https://images.plot.ly/logo/new-branding/plotly-logomark.png](https://images.plot.ly/logo/new-branding/plotly-logomark.png)”

external\_stylesheets = [dbc.themes.BOOTSTRAP]  
app = dash.Dash(external\_stylesheets=external\_stylesheets)

navbar = dbc.Navbar(  
[  
html.A(  
# Use row and col to control vertical alignment of logo / brand  
dbc.Row(  
[  
dbc.Col(html.Img(src=PLOTLY\_LOGO, height=“50px”)),  
dbc.Col(dbc.NavbarBrand(“Navbar”, className=“ml-2”)),  
],  
align=“center”,  
no\_gutters=True,  
),  
href=“[https://plot.ly](https://plot.ly)”,  
),  
],  
color=“dark”,  
dark=True,  
)

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

The Navbar should be next to logo isn’t? please help…