I am using Dash Bootstrap to add multiple option names/fields to the same line. I would like all of these to be left justified so that they don’t take up the entire page.
My code adds justify = "start"
within the dbc.Row definitions, as specified on the Dash Bootstrap documentation. I expected that this would move all of my fields to the left, as suggested by the image on the documentation page:
However, the fields are instead spread out across the page:
Any thoughts on how I can resolve this issue? I’ve pasted my code below:
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
app = Dash(__name__, external_stylesheets = [dbc.themes.BOOTSTRAP])
server = app.server
app.layout = html.Div(
children = [
dbc.Row([
dbc.Col(html.H5(children = "Number of airports to show (up to 20):")),
dbc.Col(dcc.Input(id="interactive_air_traffic_airports_limit",
type="number", value=5, min = 1)),
dbc.Col(html.H5(children = "Route Types To Show:")),
dbc.Col(dcc.Dropdown(['Domestic', 'International'],
['Domestic','International'],
id='interactive_air_traffic_route_types', multi = True)),
], justify = "start"),
dbc.Row([
dbc.Col(html.H5(children = "Color bars based on:")),
dbc.Col(dcc.Dropdown(['Airport', 'Airline', 'Route Type',
'None'], 'Airport', id='color_value_input', multi = False)),
dbc.Col(html.H5(children = "Compare by:")),
dbc.Col(dcc.Dropdown(['Airport', 'Airline', 'Route Type'],
['Airport'], id='pivot_value_input', multi = True)),
], justify = "start")
])
if __name__ == '__main__':
app.run_server(debug=True)