Cannot put component side by side when use dbc.container

Dash Python
1

Hi all, i got an issue when try to put two component side by side with dbc.Container, the result always display two row. This is my code :

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input
import dash_bootstrap_components as dbc
import plotly.express as px

df = px.data.gapminder()
df1 = df[df[‘country’].isin ([‘Brazil’, ‘Germany’])]
line_graph = px.line( data_frame= df1, x = ‘year’, y = ‘gdpPercap’, color=‘country’, markers= ‘o’)
pie_graph = px.pie( data_frame= df1, values=‘pop’, names=‘country’ )

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
app = dash.Dash(name, external_stylesheets=external_stylesheets)

chart1 = dcc.Graph(figure=line_graph)
chart2 = dcc.Graph(figure=pie_graph)

Build layout

app.layout = dbc.Container([
dbc.Row([
dbc.Col([chart1], width = 6),
dbc.Col([chart2], width = 6)
])
])

run app

if name == ‘main’:
app.run_server(debug=True, port = 8001)

the current result:

Screenshot 2022-11-05 000552
Screenshot 2022-11-05 000552851×639 21.1 KB

2

Hi @bojack and welcome to the Dash community :slight_smile:

Try running this example:
Note that you need to link to a Bootstrap styesheet. It also uptates the import statements for Dash>=2.0.0


from dash import Dash, dcc, html, Input, Output
import dash_bootstrap_components as dbc
import plotly.express as px

df = px.data.gapminder()
df1 = df[df['country'].isin (['Brazil', 'Germany'])]
line_graph = px.line( data_frame= df1, x = 'year', y = 'gdpPercap', color='country', markers= 'o')
pie_graph = px.pie( data_frame= df1, values='pop', names='country' )


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


chart1 = dcc.Graph(figure=line_graph)
chart2 = dcc.Graph(figure=pie_graph)


# Build layout
app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([chart1], width = 6),
        dbc.Col([chart2], width = 6)
    ])
])

# run app
if __name__ == '__main__':
    app.run_server(debug=True, port = 8001)
1 Like
3

Thanks for helping. You make my day. I copy code and every thing ok as i want. So the problem was: Im not link with Bootstrap styesheet? And from now on , when use dbc library, I must run Bootstrap styesheet. Right?

4

Yes, the issue was linking to a Bootstsrap stylesheet. Note that you can use other themes too. You can find out more in the dash-bootstsrap-components docs here:

https://dash-bootstrap-components.opensource.faculty.ai/docs/

You might also find this site helpful.

1 Like
5

Thanks sir!