# 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:** 1\
**Showing post:** 29

<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!

---

_[View the full topic](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614)._