✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Dash Bootstrap Components Grid System not working

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

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.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__':


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).


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:

external_stylesheets = [dbc.themes.BOOTSTRAP]
1 Like

Ouch, thank you! It’s working.


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

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

navbar = dbc.Navbar(
# Use row and col to control vertical alignment of logo / brand
dbc.Col(html.Img(src=PLOTLY_LOGO, height=“50px”)),
dbc.Col(dbc.NavbarBrand(“Navbar”, className=“ml-2”)),


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