Bootstrap "xs" breakpoint is missing

Is it just me, or does dash’s bootstrap not have the standard “xs” breakpoint classes? When I create a dash app and give something an xs class (for example, if I give a column the class “col-xs-6”), that class doesn’t seem to be in the css and is ignored. But if I use col-sm-, col-md- etc, those classes work.

Is there a simple way to access the xs classes?

Here’s an example of something that doesn’t work as expected (see the column with the “col-xs-6” class).

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(
app.layout = dbc.Container(
                  "Hello, Bootstrap!", className="m-5"

if __name__ == "__main__":

A class like col-md-6 means “use 6 columns at the md breakpoint and larger”

So col-xs-6 would mean “use 6 columns at the xs breakpoint and larger”, but since xs is the smallest breakpoint that is the same as “use 6 columns” so the relevant class is col-6 rather than col-xs-6.

If you’re using dbc.Col, it will take care of this sort of thing for you, instead of manually specifying the class name you can just do

dbc.Col(..., xs=6)  # or
dbc.Col(..., width=6)
1 Like