Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

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

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

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

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