Plotly dash grid layout using dbc.Col & dbc.Row without the use of the bootstraps themes

Viewed 684

Is it possible to use the dbc.Col and dbc.Row functions to set up the grid layout without using the bootstrap themes ?

When adding for example the codepen.io css stylesheet, even when specifying the rows and columns, it displays everything stacked vertically.

The reason for not using the dbc themes is that I would like to personalise an external stylesheet and use that. If there is no way around it, is it possible to override the dbc themes ? or modify them ?

import dash 
from dash import html
from dash import dcc
import dash_bootstrap_components

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

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(html.H5('row 1, col 1')),
        dbc.Col(html.H5('row 1, col 2'))
    ]),
    dbc.Row([
        dbc.Col(html.H5('row 2, col 1')),
        dbc.Col(html.H5('row 2, col 2'))
    ])
], fluid=True)


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

it displays it as such :

row 1, col 1
row 1, col 2
row 2, col 1
row 2, col 2

Thank you !

1 Answers

dbc.themes.BOOTSTRAP is just a link to a css stylesheet

>>> print(dbc.themes.BOOTSTRAP)
https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css

So instead of passing dbc.themes.BOOTSTRAP you could just pass

"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap-grid.min.css"

to external_stylesheets to only get the grid system and flex utilities.

https://getbootstrap.com/docs/4.1/getting-started/contents/#css-files


You could also go to the non-minified version of the bootstrap grid styles

https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap-grid.css

and copy paste it in a css file in the assets folder which you can then modify as you wish. See the documentation here for more info on that.

Related