Alignments of Tabs in dbc.Tabls component

Dash Python
1

Hi everybody,

I have boostrap tabs and all the tabs are aligned to the right side.
I want to style the dbc.Tabs (or each dbc.Tab) in order to distribute them throughout the entire 100% width.
That means if I have for example 4 Tabs each one take width of 25%

How can I do that ? :thinking:

Thanks :grinning:

2

You can add tabClassName="flex-grow-1 text-center" to each dbc.Tab. Here’s an example

import dash
import dash_bootstrap_components as dbc

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

app.layout = dbc.Container(
    dbc.Tabs(
        [
            dbc.Tab(
                dbc.Card(f"Tab {i} content", body=True, className="m-3"),
                label=f"Tab {i}",
                tabClassName="flex-grow-1 text-center",
            )
            for i in range(4)
        ]
    ),
    className="p-5",
)

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

image
image1093×312 5.28 KB

4 Likes
3

Thank you Tom for your Tip :smiley:

Eduardo

1 Like