Convert raw HTML with bootstrap classes, to dash-html components with bootstrap classes

Dash Python
1

Greetings

Below, is an excerpt of HTML code with bootstrap classes. The full layout for this HTML template can be found at this link for reference.

<div class="container-fluid" style="background-color: #25274D;">
        <div class="row">
            <div class="col-sm-auto bg-light sticky-top">
                <div class="d-flex flex-sm-column flex-row flex-nowrap bg-light align-items-center sticky-top">
                    <a href="/" class=  title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Icon-only">
                        <i class="bi-bootstrap fs-1"></i>
                    </a>
                 </div>
           </div>
       </div>
</div>

I have tried converting this to dash.html (or just html components in dash) components, this code can be seen below.

from dash.dependencies import Input, Output
from dash import dcc, html, Dash,dash_table
import dash
import dash_bootstrap_components as dbc
external_stylesheets = [dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP]
app = Dash(__name__)

app.layout = html.Div(
    className = "container-fluid",
    style = {'backgroundColor': '#25271D'},
    children = [
            html.Div(
                className= "row",
                children = [
                    html.Div(
                        className="col-sm-auto bg-light sticky-top",
                        children = [
                            html.Div(
                                className="d-flex flex-sm-column flex-row flex-nowrap bg-light align-items-center sticky-top",
                                children=[
                                    html.A(
                                      className="d-block p-3 link-dark text-decoration-none",
                                      children = [
                                         html.I(
                                            className = "bi-bootstrap fs-1"
                            )
                        ])
                    ])
                ])
            ])
        ])

In seeing this, I have 2 issues:

  1. I have tried running this code and all I get is a black screen.
  2. I am not sure how to access attributes of the <a> tag such as data-bs-toggle, as these are for purposes of tooltips from bootstrap.

Any help to clarify this would be appreciated.

Thank you

2

It looks like you forgot to pass the style sheets to the app?

3

That was absent-minded of me, thank you Emil. The app now displays what I expect, solving that issue.