Bootstrap "xs" breakpoint is missing

Dash Python
1

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(
    external_stylesheets=[dbc.themes.BOOTSTRAP]
)
app.layout = dbc.Container(
    dbc.Row(
         dbc.Col(
              dbc.Alert(
                  "Hello, Bootstrap!", className="m-5"
             ),
             className="col-xs-6"
         )
    )
)

if __name__ == "__main__":
    app.run_server()
2

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