Center three buttons

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)

image1920×866 25 KB

2 posts - 2 participants

Read full topic