CODEWITHSUNDEEP
cssplotly-dashplotly-python
Ralph Deint
Ralph Deint

Reputation: 380

How to center vertically and horizontally a heading text using dash-bootstrap

I'm using Bootstrap dash layout for my web application layout. But instead of having the text at the top of the page, I wish the text will be in the red area. How can I achieve it?

Text in the red area

I've tried using "align":"center" and "justify":"center" but nothing helps

import dash_bootstrap_components as dbc 
import dash_html_components as html 
import dash

body = dbc.Container([ 
dbc.Row(
            [
            html.H1("test")
            ], justify="center", align="center"
            )
]

)

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.SUPERHERO])

app.layout = html.Div([body])

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

Understand there is some workaround using flask-bootstrap but how do I do the same using dash-plotly-booststrap?

Upvotes: 6

Views: 42052

Answers (1)

Ralph Deint
Ralph Deint

Reputation: 380

After searching through the developers' github I found this Closed issue, It turns out you can set the height of the dash's Row using the Container's styleparameter and setting up the height using the className="h-50" . So the solution looks something like this:

import dash_bootstrap_components as dbc 
import dash_html_components as html 
import dash

body = dbc.Container([ 
dbc.Row(
            [
            html.H1("test")
            ], justify="center", align="center", className="h-50"
            )
],style={"height": "100vh"}

)

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.SUPERHERO])

app.layout = html.Div([body])

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

Upvotes: 8

Related Questions