External StyleSheet for Dash Webapp Failed

Ivy_J
Level 1
External StyleSheet for Dash Webapp Failed

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:

Screenshot 2023-11-02 at 10.59.15 AM.png

 

 

 

 

Is there anything wrong with my code?

Thank you very much,

Regards

0 Kudos
1 Reply
Ivy_J
Level 1
Author

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.

0 Kudos