CODEWITHSUNDEEP
layoutgridthemesplotly-dashdash-bootstrap-components
rubyOnSails
rubyOnSails

Reputation: 33

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

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 !

Upvotes: 3

Views: 1549

Answers (1)

bas
bas

Reputation: 15722

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.

Upvotes: 2

Related Questions