Dash Bootstrap Components Grid System not working

Dash Python
1

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

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

2

@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:

external_stylesheets = [dbc.themes.BOOTSTRAP]
2 Likes
3

Ouch, thank you! It’s working.

4

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”

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”,
),
],
color=“dark”,
dark=True,
)

image

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