Center three buttons

Dash Python
1

Hello Dash Community,

I am running an issue with displaying three buttons. There is some space after the third button. How can I center three buttons in the middle without any space remaining? Thank you!

import dash_bootstrap_components as dbc
import dash_html_components as html
import dash


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


app.layout = html.Div(children=[

    # Header
    dbc.Row(children=[
        html.H1(children=["My Dashboard"], style={"text-align": "center"}),
    ]),

    dbc.Row(children=[

        html.A(children=
               html.Button(children='Google', className='four columns'),
               href='https://www.google.com/', target="blank"),

        html.A(children=
               html.Button(children='Amazon', className='four columns'),
               href='https://www.amazon.com/', target="blank"),

        html.A(children=
               html.Button(children='Youtube', className='four columns'),
               href='https://www.youtube.com/', target="blank"),
    ])


])

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

image
image1920×866 25 KB

2

Hi @liuzc123

You are using dbc.Row, then I think you need to use also a dbc.Col for each dbc.Row.

You can use one dbc.Col for each button and give them the number of width to align in each screen size.

See the documantation about boostrap layout here:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/