How to align text in dbc ModalFooter

Dash Python
1

I cannot seem to get the text to align on the left of a dbc ModalFooter. I have tried surrounding the 2 footer items in dbc.Col and setting widths. I have tried surrounding in dbc.Row and using justify. It seems that the text wants to start over to the right no matter what I do. How can I get the text in the footer left justified and the button right justified?

#!/usr/bin/env python3
"""Minimal dash program."""

from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(dbc.Modal([dbc.ModalHeader(dbc.ModalTitle('Modal')),
                                       dbc.ModalBody(html.Div('Body of Modal')),
                                       dbc.ModalFooter(['Modal Footer', dbc.Button('Cancel')])],
                                      is_open=True))

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

Hi @Brent

The footer component already has some styling applied that uses flex.

Try adding the “justify-content-between” class name to the footer:

app.layout = dbc.Container(dbc.Modal([dbc.ModalHeader(dbc.ModalTitle('Modal')),
                                       dbc.ModalBody(html.Div('Body of Modal')),
                                       dbc.ModalFooter(
                                           ['Modal Footer', dbc.Button('Cancel')],
                                           className="justify-content-between"
                                       )],
                                      is_open=True))

You can find more info on the bootstrap utility classes here:

https://dashcheatsheet.pythonanywhere.com/