My approach to making the bootstrap grid layout more accessible while creating Dash html component trees has been to define my own pseudo components (actually just functions masquerading as Dash components) that mean you don’t have to keep writing things like className='row' and className='col'.
For example, I create functions Row and Col which automatically add the desired className keyword argument required to an html.Div which is returned and also pass through the other params to this so that to the person using the pseudo component, they appear to function as regular components.
This makes Dash layouts with Bootstrap both easier to write and read:
Row([
Col(dcc.Graph(id='graph1'), size=4),
Col(dcc.Graph(id='graph2'), size=8),
])
This is what I’ve done in this project. You can see the psuedo components defined in components.py, which make use of a decorator that tries to smooth over some of the passing through and merging of keyword arguments. There’s an example of them being used in layouts.py.