Columns don't seem to work after v1.0.0

I have three HTML DIVs that I want to display next to each other so I use classname="four columns" on each of them. When I upgrade Dash from 0.43.0 to 1.0.0 or later (I tried 1.6.0 as well) all three DIVs take up the whole width and are thus displayed beneath each other.

I couldn’t find any info on a 1.0.0 breaking change regarding this, but did the syntax change anyway? Or was my code wrong before and did it accidentally work in 0.43.0? You can see my code here.

Does anyone have an idea if the syntax has changed to create 3 columns? To be more clear, here is the code where I use className="four columns":

    html.Div(
        dcc.Graph(
            id='un',
            config={
                'modeBarButtonsToRemove': [
                    'select2d', 'lasso2d', 'autoScale2d'
                ]
            },
        ),
        className="four columns"
    ),
    html.Div(
        dcc.Graph(
            id='nato',
            config={
                'modeBarButtonsToRemove': [
                    'select2d', 'lasso2d', 'autoScale2d'
                ]
            },
        ),
        className="four columns"
    ),
    html.Div(
        dcc.Graph(
            id='world_bank',
            config={
                'modeBarButtonsToRemove': [
                    'select2d', 'lasso2d', 'autoScale2d'
                ]
            },
        ),
        className="four columns"
    ),

Are you sure the css file defining this class is read correctly? See https://dash.plot.ly/external-resources. The css file defining these different column styles is https://codepen.io/chriddyp/pen/bWLwgP.css, you have to add

xternal_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

to your code (or save a local copy in the assets directory).

three reasons why you should buy plotly pro: support open source, get great support, host your plots and dashboards online