How to have a customized CSS style for a bootstrap component?

Question

I have the code below that has a bootstrap offcanvas at the left. I wondered how I can change the width of the collapsed sidebar. Bootstrap does not have a style tag to do that. I searched and I saw some people suggested using a customized CSS style to define new styling. Can you please help me with that I am pretty new to styling, and I don’t know where I should start.

from dash import Dash, html, dcc, Input, Output, State
import dash_bootstrap_components as dbc
from dash_iconify import DashIconify

app = Dash(__name__, use_pages=True, external_stylesheets=[dbc.themes.SPACELAB])

sidebar = dbc.Nav([
            dbc.NavLink([
                html.Div(page["name"], className="ms-2"),
            ],  href=page["path"],
                active="exact",
            )

for page in dash.page_registry.values()

],  vertical=True,
    pills=True,
    className="bg-light",
)

download_icon = DashIconify(icon='ic:baseline-menu', width=40, style={})

app.layout = dbc.Container([

    dbc.Row([

        dbc.Col(
            html.Div("Drilling Dashboard",
                style={'fontSize': 40,
                       'textAlign': 'center',
                       'color': 'white'}
            )
        ),

        dbc.Col([
            dbc.Button([download_icon, ''], id="open-offcanvas", n_clicks=0),
        ],  width=1,
            style={'margin-right': 0,
                   'padding': 5}
        ),
    ]),

    html.Hr(
        style={'margin-top': 0}
    ),

    dbc.Row([
        dbc.Offcanvas(
            dbc.Col([sidebar], width=5), id="offcanvas", title="Title", is_open=False, style={'horizontal-width': 10}
        ),
    ]),

    dbc.Row([
        dbc.Col([dash.page_container], xs=8, sm=8, md=10, lg=10, xl=10, xxl=10)
    ])
], fluid=True,
    style={'background-color': 'black'})


@app.callback(
    Output("offcanvas", "is_open"),
    Input("open-offcanvas", "n_clicks"),
    [State("offcanvas", "is_open")],
)
def toggle_offcanvas(n1, is_open):
    if n1:
        return not is_open
    return is_open

if __name__ == "__main__":
    app.run(debug=True)

Asked By: pymn

||

Source

Answer 1

You can change the width of sidebar by the following attribute:

dbc.Offcanvas(
            dbc.Col([sidebar], width=8),
            id="offcanvas", 
           title="Title", 
           is_open=False, 
           style={'width': 100}  #<---- this attribute instead of horizental-width
        )

Output

Answered By: Hamzah

How to have a customized CSS style for a bootstrap component?

Question:

Answers: