# Show and Tell - Dash Bootstrap Components

**URL:** <https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614>\
**Category:** Dash Python\
**Tags:** show-and-tell, community-components\
**Created:** [December 7, 2018, 2:34pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614 "2018-12-07T14:34:03Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![ndbcorp](https://avatars.discourse-cdn.com/v4/letter/n/3e96dc/32.png) [@ndbcorp](https://community.plotly.com/u/ndbcorp)\
**Post date:** [December 14, 2018, 3:33am UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/22 "2018-12-14T03:33:29Z")

</div>

Sticking with the documentation example, i changed the css theme to Simplex, and noticed an issue with the components spacing/alignment after the change. Why is that?

```auto
from dash import Dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html

_navbar = dbc.Navbar(
    brand="Demo",
    brand_href="#",
    sticky="top",
    color="primary",
    dark="True",
    children=[
        dbc.DropdownMenu(
            nav=True,
            in_navbar=True,
            label="Menu",
            children=[
                dbc.DropdownMenuItem("Entry 1"),
                dbc.DropdownMenuItem("Entry 2"),
                dbc.DropdownMenuItem(divider=True),
                dbc.DropdownMenuItem("Entry 3"),
            ],
        ),
        dbc.NavItem(dbc.NavLink("Link", href="#")),
    ],
)

_body = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.H2("Heading"),
                        html.P(
                            "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui."
                        ),
                        dbc.Button("View details", color="secondary"),
                    ],
                    md=4,
                ),
                dbc.Col(
                    [
                        html.H2("Graph"),
                        dcc.Graph(
                            id="dash-docs-graph",
                            figure={"data": [{"x": [1, 2, 3], "y": [1, 4, 9]}]},
                        ),
                    ]
                ),
            ]
        )
    ],
    className="docs-content",
)
external_stylesheets = [dbc.themes.SIMPLEX]

app = Dash(
    __name__ ,
    external_stylesheets=external_stylesheets
)

app.layout = html.Div([_navbar, _body])

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

```

 ![09%20PM](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/0/067dea696002211580ad539a6dcb9337fd204b50.png)

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [December 14, 2018, 8:08am UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/23 "2018-12-14T08:08:22Z")

</div>

Good catch @ndbcorp, the top margin is being applied by the `docs-content` class on the `Container` in `_body`, which is defined in our docs stylesheet, and so if you just copy paste the code on the docs homepage (which you definitely ought to be able to do without issue!) you won’t have that defined anywhere. You’ll actually see the same issue with regular bootstrap styling.

I’ve raised [an issue on our repo](https://github.com/ASIDataScience/dash-bootstrap-components/issues/102), and will update the docs. In the mean time just change `className="docs-content"` to `className=mt-4` (the classes `mt-*` are bootstrap classes for applying top margins easily) and things should look better, or if you prefer add a top margin with the `style` argument of `Container`. Note though that using the `mt-*` classes will mean that if you switch to a different theme it should adjust the margin appropriately for that theme, so it’s probably preferable.

EDIT - I’ve updated the example in the docs to use Bootstrap classes. Hopefully if you run that now you should see a margin at the top of the demo app.

---

<div class="post-metadata">

**Author:** ![ndbcorp](https://avatars.discourse-cdn.com/v4/letter/n/3e96dc/32.png) [@ndbcorp](https://community.plotly.com/u/ndbcorp)\
**Post date:** [December 14, 2018, 4:43pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/24 "2018-12-14T16:43:48Z")

</div>

Ok got it fixed on my end, thanks.

I am no css expert, so excuse the following question if its an obvious answer . Is it possible to have 2 style sheets to use in my app. Lets say i want to use the SIMPLEX theme from dbc to style certain components like the navbar, but i also want to use [https://codepen.io/chriddyp/pen/bWLwgP120](https://community.plotly.com/t/https-codepen-io-chriddyp-pen-bwlwgp120/8820) to style other components in my app. Can i use both? Do i need to create my own style sheet combining the desired styling from each? What do you recommend?

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [December 14, 2018, 11:12pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/25 "2018-12-14T23:12:20Z")

</div>

You can definitely use multiple Stylesheets together. Just be aware that if they haven’t been designed to be used together they may clash on some things and give weird behaviour.

---

<div class="post-metadata">

**Author:** ![sriotti](https://avatars.discourse-cdn.com/v4/letter/s/d07c76/32.png) [@sriotti](https://community.plotly.com/u/sriotti)\
**Post date:** [January 4, 2019, 11:06am UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/26 "2019-01-04T11:06:36Z")

</div>

Hi @tcbegley

Any updates on the examples that will be added to the documentation as mentioned above?

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [January 4, 2019, 11:18am UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/27 "2019-01-04T11:18:41Z")

</div>

Hey @sriotti

Thanks for your interest and patience! I don’t have the sidebar example for you yet, but that’s next on my list of things to do.

We’ve most recently been working on a more customisable `Navbar` component as discussed above (check [this pull request if you’re interested](https://github.com/ASIDataScience/dash-bootstrap-components/pull/118)), that will be released pretty soon.

I’ve also started work on cleaning out the [examples directory](https://github.com/ASIDataScience/dash-bootstrap-components/tree/master/examples) of our repo. There’s a few ports of RShiny examples in there at the moment as well as demos of the components. We’ll continue adding examples there, including the multi-page examples.

In the meantime, you could check out @nedned’s [slapdash](https://github.com/ned2/slapdash) repo, which has a sidebar layout that uses `dash-bootstrap-components`.

---

<div class="post-metadata">

**Author:** ![Chris369](https://avatars.discourse-cdn.com/v4/letter/c/82dd89/32.png) [@Chris369](https://community.plotly.com/u/Chris369)\
**Post date:** [January 9, 2019, 7:27pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/28 "2019-01-09T19:27:58Z")

</div>

Really loving dash-bootstraps-components and the ease of implementing themes from Bootstwatch.

What is the best approach to styling tables? I’m using the dcc.DataTable component, but it doesn’t have a className attribute.

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [January 9, 2019, 11:29pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/29 "2019-01-09T23:29:35Z")

</div>

Hey @Chris369,

I don’t know if there’s a great way to style the `DataTable` using Bootstrap CSS. The component uses mostly inline styles which can be a little bit tricky to override with CSS classes.

If you’re willing to compile your own Bootstrap stylesheet using sass, here’s an approach that worked for me. The basic idea is that since we can’t apply the `.table` class to the `DataTable`, we instead wrap the `DataTable` in an element with a particular `id` like `table-wrapper`, then add selectors like the following to your stylesheet:

```css
#table-wrapper table {
  /* styles from .table class */
}

```

You could write this stylesheet manually, but that would be really tedious. Sass lets you inherit / extend existing selectors. Here’s a bit more detail:

1. Download Bootstrap source from [Bootstrap website](https://getbootstrap.com/).

2. In the source folder there’s a directory called `scss`, that’s the one we want, copy that to your working directory.

3. Wrap your table in a div with a particular `id` like this:

```python
app.layout = html.Div(dash_table.DataTable(...), id="table-wrapper")

```

1. Create your scss file, I called mine `table-shim.scss`, and write something like this:

```css
@import "scss/bootstrap.scss";

#table-wrapper table{
  @extend .table;
  @extend .table-striped;
  @extend .table-hover;
  @extend .table-bordered;
  font-family: inherit;
  --border: none;
}

```

This basically says we want to create a new selector that will select any `table` that is a child of an element with id `table-wrapper`, and apply all the styles of the classes `.table`, `.table-striped` etc. to it. I also added the `font-family` and `--border` arguments as they weren’t specified by Bootstrap so it defaulted to the `DataTable` defaults.

1. Compile with sass `sass table-shim.scss assets/my-bootstrap.css` or similar. See [here](https://sass-lang.com/install) for how to install sass.

That’s it, run your app and hopefully it should work! As a final note, this worked for me with Bootswatch styles too. Just grab the `_variables.scss` and `_bootswatch.scss` files for the theme you’re interested in from the [Bootswatch website](https://bootswatch.com/) (I tried it with the “Lux” theme), and change the imports in your scss file to something like

```css
@import "lux/_variables.scss";
@import "scss/bootstrap.scss";
@import "lux/_bootswatch.scss";

```

Depending on the theme you choose, you might have to make additional adjustments if the styles clash with the styles set by `DataTable`. I don’t know for example how the dark Bootswatch themes would work with this approach.

Let me know how you get on if you try it, and definitely let me know how you get on if you find an easier way!

---

<div class="post-metadata">

**Author:** ![Chris369](https://avatars.discourse-cdn.com/v4/letter/c/82dd89/32.png) [@Chris369](https://community.plotly.com/u/Chris369)\
**Post date:** [January 10, 2019, 6:01pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/30 "2019-01-10T18:01:49Z")

</div>

Thank you very much for your detailed instructions 🙂 I’m only just getting started with Bootstrap/CSS and so this sounds rather complicated at the moment! But is definitely something I’ll work towards! Thanks again.

---

<div class="post-metadata">

**Author:** ![Chris369](https://avatars.discourse-cdn.com/v4/letter/c/82dd89/32.png) [@Chris369](https://community.plotly.com/u/Chris369)\
**Post date:** [January 10, 2019, 6:39pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/31 "2019-01-10T18:39:48Z")

</div>

So I’ve been giving this ago, using Koala to compile my custom scss file [table-custom.scss]:

```
@import "../flatly/_variables.scss.css";
@import "bootstrap.scss";
@import "../flatly/_bootswatch.scss.css";

#table-wrapper table{
  @extend .table;
  @extend .table-striped;
  @extend .table-hover;
  @extend .table-bordered;
  font-family: inherit;
  --border: none;
}

```

Using this code in my dash app:

```
app = dash.Dash( __name__ , external_stylesheets=['/scss/table-custom.css'])

```

But when I run my app I seem to have lost all the flatly styling?

 ![55](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/c/c1614da454ce03ab6b0008d362db0ec89c86b7c8.jpeg)

This is my folder structure:

 ![42](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/2/2356e54583d1c67ccdb1f163540e218f5ad77e50.jpeg)

Where’ve I gone wrong?

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [January 10, 2019, 6:53pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/32 "2019-01-10T18:53:26Z")

</div>

The process for linking local CSS is a bit different to linking to external CSS via a CDN. Check out the [Dash docs](https://dash.plot.ly/external-resources) for detailed instructions, but the easiest way is to create a folder called `assets` in the same folder as your main app script, and just place the CSS (i.e. the compiled `table-custom.css`) in there. Dash will automatically detect and link it for you.

The local CSS you compiled replaces the need for any external CSS, so just ignore the `external_stylesheets` argument now. Sorry for the confusion!

EDIT - Also, I just noticed that your imports `@import "../flatly/_variables.scss.css";` look like they have an unneeded `.css` in there, change it to `@import "../flatly/_variables.scss";` (make sure the file name matches obviously). Same for `_bootswatch.scss`.

---

<div class="post-metadata">

**Author:** ![Chris369](https://avatars.discourse-cdn.com/v4/letter/c/82dd89/32.png) [@Chris369](https://community.plotly.com/u/Chris369)\
**Post date:** [January 10, 2019, 7:10pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/33 "2019-01-10T19:10:19Z")

</div>

Thank you so much! I have got it to work 🙂 At first I was getting sort of a flaty theme with slightly different colours, but I’ve removed those additional .css’s as advised and it looks as expected now. (I’m not sure why the extra .css’s were there - when I downloaded the scss files my computer seemed to add .css automatically!).

Now if I have more than one table I can’t use the same id=‘table-wrapper’. So am I write in thinking I just create a ‘table-wrapper2’ in my scss, recompile, and use the new id for table 2?

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [January 10, 2019, 7:24pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/34 "2019-01-10T19:24:07Z")

</div>

Great! Glad it’s working 🙂

The table doesn’t need to be an immediate child of `table-wrapper`, it just needs to be contained inside one, so if you like you could just give your top-level component the id `table-wrapper`, like `app.layout = html.Div(..., id="table-wrapper")`, and the styles will be applied to every table in your app. That also means your CSS / Sass doesn’t have to change when you change the layout of your app and should be a lot more maintainable.

---

<div class="post-metadata">

**Author:** ![Chris369](https://avatars.discourse-cdn.com/v4/letter/c/82dd89/32.png) [@Chris369](https://community.plotly.com/u/Chris369)\
**Post date:** [January 10, 2019, 7:30pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/35 "2019-01-10T19:30:30Z")

</div>

Amazing - thank you! 😀

---

<div class="post-metadata">

**Author:** ![Damian](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@Damian](https://community.plotly.com/u/Damian)\
**Post date:** [March 11, 2019, 3:27pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/36 "2019-03-11T15:27:28Z")

</div>

@tcbegley I just wanted to say thanks, I finally got around to really trying to implement this on my apps last week and after a day of getting to understand Bootstrap a little bit it’s made the job of laying out my sites much simpler and more flexible.

One thing I was trying and failing to do, which I now suspect was just the wrong approach, was getting animations to work with real layout changes.

E.g. with 2 columns I wanted 1 to disappear, I tried using collapse and setting the width to zero but it made the the 2nd column fall below the 1st column and then the collapse occurred causing the 2nd column to then jump up. I assume this was just not how this was conceived to be used?

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [March 11, 2019, 4:01pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/37 "2019-03-11T16:01:00Z")

</div>

Glad you’ve enjoyed using it 🙂

Could you describe a bit more the effect you’re going for? Also any kind of code snippet that shows what you tried in a little bit more detail. You’re right that the collapse is not really designed for this, but there might be a way to achieve the effect you want with a little bit of hacking.

`Col` doesn’t do any input validation (perhaps it should), so if you set `width=0` the `Col` will try to apply a class called `col-0` which doesn’t exist, and it will call back on the default behaviour specified in the `col` class which is probably why you saw the column expand and wrap onto a new line.

---

<div class="post-metadata">

**Author:** ![sclavijo](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@sclavijo](https://community.plotly.com/u/sclavijo)\
**Post date:** [March 29, 2019, 7:54pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/38 "2019-03-29T19:54:24Z")

</div>

So this has been really useful, but I was wondering how I would go about partitioning and customizing the ‘brand’ attribute?

Let’s say I wanted my ‘brand’ in my SimpleNav be ‘ABC’ where each letter was a different color, how would I go about doing that?

Thanks,

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [March 29, 2019, 10:21pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/39 "2019-03-29T22:21:37Z")

</div>

Hey @sclavijo,

To achieve that sort of thing you will probably need to use `Navbar` instead of `NavbarSimple`, then wrap each character in a `html.Span` and set the colour. Here’s a simple example

```python
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Navbar(
    dbc.Container(
        [
            dbc.NavbarBrand(
                [
                    html.Span("A", style={"color": "red"}),
                    html.Span("B", style={"color": "green"}),
                    html.Span("C", style={"color": "blue"}),
                ]
            ),
            dbc.Nav(
                [
                    dbc.NavItem(dbc.NavLink("Item 1", href="#")),
                    dbc.NavItem(dbc.NavLink("Item 2", href="#")),
                ],
                navbar=True,
            ),
        ]
    )
)

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

```

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/6/65a14fbf6847244f8287584e61861654544e8db2.png)

There’s a bunch more `Navbar` examples [here](https://github.com/facultyai/dash-bootstrap-components/blob/master/examples/advanced-component-usage/Navbars.py).

The reason you’ll struggle to do the same with `NavbarSimple` is that (currently at least), you can only pass dash components to the `children` prop of other dash components, so you wouldn’t be able to use `html.Span` like above with the `brand` prop. The only alternative would be if it’s possible to write CSS to cycle through colours each character, but that sounds pretty nasty to me and might not be possible anyway.

Hope that helps.

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [April 19, 2019, 7:22pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/41 "2019-04-19T19:22:01Z")

</div>

@sriotti and anyone else interested: I finally added some simple multi-page examples to our repo like I’ve been promising for a long time. Check them out [here](https://github.com/facultyai/dash-bootstrap-components/tree/master/examples/multi-page-apps). They include a navbar example, plus multiple sidebar examples, including collapsible submenus and responsive designs. Try running them or check out some screenshots on the [pull request](https://github.com/facultyai/dash-bootstrap-components/pull/186).

Also more generally, the release of Dash 0.41.0 let us add some cool new features. Personally I’m pretty excited about the new [Modal component](https://dash-bootstrap-components.opensource.faculty.ai/l/components/modal), which lets you easily add modals to your apps without having to fiddle around with CSS and z-indexes. Check out the steadily improving documentation or our repo to see the new stuff we’re adding.

---

<div class="post-metadata">

**Author:** ![sriotti](https://avatars.discourse-cdn.com/v4/letter/s/d07c76/32.png) [@sriotti](https://community.plotly.com/u/sriotti)\
**Post date:** [April 20, 2019, 5:31pm UTC](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/42 "2019-04-20T17:31:45Z")

</div>

@tcbegley Great work Tom. Really appreciate the time and effort you have put into dbc. I look forward to using these new components and am excited to see what’s next!

[Previous page](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614.md?page=1)

[Next page](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614.md?page=3)