Dash-plotly and bootstrap

hi i got information from Dash Documentation & User Guide | Plotly can combine with dash-bootstrap,https://bootswatch.com/
but i am puzzled that bootstrap is html/css,dash-bootstrap is not,how to combine??
example:
bootswatch code is :

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarColor01">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>```

dash-bootstrap code is :

import dash_bootstrap_components as dbc

navbar = dbc.NavbarSimple(
children=[
dbc.NavItem(dbc.NavLink(“Page 1”, href="#")),
dbc.DropdownMenu(
children=[
dbc.DropdownMenuItem(“More pages”, header=True),
dbc.DropdownMenuItem(“Page 2”, href="#"),
dbc.DropdownMenuItem(“Page 3”, href="#"),
],
nav=True,
in_navbar=True,
label=“More”,
),
],
brand=“NavbarSimple”,
brand_href="#",
color=“primary”,
dark=True,
)

please someone can teach me how to do,or tell me the methode...

Hi @yan,

Check out the dash-bootstrap documentation and tutorial:: https://dash-bootstrap-components.opensource.faculty.ai/

Here is a small sample app to get you started:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

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

navbar = dbc.NavbarSimple(
    children=[
        dbc.NavItem(dbc.NavLink("Page 1", href="#")),
        dbc.DropdownMenu(
            children=[
                dbc.DropdownMenuItem("More pages", header=True),
                dbc.DropdownMenuItem("Page 2", href="#"),
                dbc.DropdownMenuItem("Page 3", href="#"),
            ],
            nav=True,
            in_navbar=True,
            label="More",
        ),
    ],
    brand="NavbarSimple",
    brand_href="#",
    color="primary",
    dark=True,
)

app.layout = dbc.Container(
    [
        navbar,
        html.H1("Title"),
        html.Hr(),
        dbc.Row(
            [
                dbc.Col("row 1, column 1 content", md=6),
                dbc.Col("row 1, column 2 content", md=6),
            ],
        ),
    ],
    fluid=True,
)

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

I was confused like you in the beginning too but believe me just follow the documentation everything is nicely explained in it.
Also if you are looking for an tutorial you can follow @adamschroeder tutorials on youtube for getting started with Dash

2 Likes

Thank you!
i will keep learning

Thank you!
it’s useful

1 Like