Layout gaps dash dbc components

I am trying to build a dashboard. The problem is even if I specify className="g-0" and justify="start". My elements are spread out across the screen with huge gaps. I need them to be concentrated on the left side of screen without any gaps.

The versions:

• dash-bootstrap-components 1.6.0
• dash 2.17.1
• flask 3.0.3

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
import flask
layout = html.Div([dbc.Row(
    [
        dbc.Col(html.Span(
            "Table",
            className='top-bottom-title'
        )),
        dbc.Col([
            html.Div(id='label_1',
                     children='Original (years)'),
            dcc.Input(id='orig_cell', type='number',
                      value=0, readOnly=True),
        ], className="g-0"),
        dbc.Col([
            html.Div(id='label_2',
                     children='Override (years)'),
            dcc.Input(id='new_cell', type='number',
                      value=0, step=1/12, min=0),
        ], className="g-0"),
        dbc.Col([
            dbc.Button(
                "Apply", id="submit_override", n_clicks=0
            ),], className="g-0")
    ],
    className="g-0",
    justify="start"
)
]
)

if __name__ == "__main__":
    server = flask.Flask(__name__)
    app = Dash(__name__, external_stylesheets=[
               dbc.themes.BOOTSTRAP], server=server, suppress_callback_exceptions=True)
    app.title = "Analytics"
    app.layout = layout
    app.run_server(debug=True, host="0.0.0.0", port=40000)

In addition to playing with dbc.Row parameters: className="g-0" and justify="start". I also tried using horizontal dbc.Stack instead, but got the same results

What I can see is that the .col classname has an attribute for the style of the element called flex that is set to 100. You can change it manually in each of your columns to 0 and then you will get everything together. There will be no space in between your elements but you can add some space adding some padding into the elements inside the columns.

Try this, it worked for me (though it doesn't look very good, I think it is what you are looking for!)

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
import flask
layout = html.Div([dbc.Row(
    [
        dbc.Col(html.Span(
            "Table",
            className='top-bottom-title'
        ),
        style={'flex': 0}),
        dbc.Col([
            html.Div(id='label_1',
                     children='Original (years)'),
            dcc.Input(id='orig_cell', type='number',
                      value=0, readOnly=True),
        ], className="g-0", style={'flex': 0}),
        dbc.Col([
            html.Div(id='label_2',
                     children='Override (years)'),
            dcc.Input(id='new_cell', type='number',
                      value=0, step=1/12, min=0),
        ], className="g-0", style={'flex': 0}),
        dbc.Col([
            dbc.Button(
                "Apply", id="submit_override", n_clicks=0
            ),], className="g-0", style={'flex': 0})
    ],
    className="g-0",
    justify="start"
)
]
)

if __name__ == "__main__":
    server = flask.Flask(__name__)
    app = Dash(__name__, external_stylesheets=[
               dbc.themes.BOOTSTRAP], server=server, suppress_callback_exceptions=True)
    app.title = "Analytics"
    app.layout = layout
    app.run_server(debug=True, host="0.0.0.0", port=40000)

You can also add this into a folder called assets and add it into your script, it would be much cleaner that way, but if what you have is a simple script you can add the style directly to the code as I did.