External StyleSheet for Dash Webapp Failed

Ivy_J

Hi all,

I'm trying to design a dash webapp with the external stylesheet such that I can have multiple columns of different width. I used the code suggested in other posts:

app.config.external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

This worked perfectly before, while all my dashboards failed to have columns this morning.

For example, by using the code below, I supposed to have two columns each spans half of the screen.

import dataiku
import dash 
import pandas as pd
import plotly.express as px
from stuff import things 
from dash.dependencies import Input, Output
from dash import dcc, html
 
app.config.external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
 
app.layout = html.Div(  
    children=[
        html.H1(
            children='Total Sales by Country', 
        ), 
        html.Div([ 
            html.Div([
                html.H4(children='column1'),  
            ],className = 'six columns'),
            
            html.Div([
                html.H4(children='column2'),  
            ],className = 'six columns') 
        ], className = 'row'),
    ]
)

But gives:

Is there anything wrong with my code?

Thank you very much,

Regards

Ivy_J

Solved by using dbc.themes.BOOTSTRAP as external_stylesheets. Not sure if the external link https://codepen.io/chriddyp/pen/bWLwgP.css dead or not.