How to reduce/close the gap between two columns in Python Dash Bootstrap

user_10482658 0
Viewed 4751

I'm working with Dash Bootstrap grid layout system and I'm trying to close/reduce the gap between columns. Is there any way how to do that? Thank you. Sample code:

import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
row = html.Div(
    [
        dbc.Row(
            [
                dbc.Col
                (html.Div(dcc.Dropdown
                        (
                        id='dropdown',
                        options=[
                            {'label': 'Option 1', 'value': '1'},
                            {'label': 'Option 2', 'value': '2'},
                            {'label': 'Option 3', 'value': '3'}
                        ],
                        value='1', style={'padding': '15px', 'width': '80%'}
                        ),
                    )
                ),
                dbc.Col
                (html.Div(dcc.Dropdown
                        (
                        id='dropdown-2',
                        options=[
                            {'label': 'Option 4', 'value': '4'},
                            {'label': 'Option 5', 'value': '5'},
                            {'label': 'Option 6', 'value': '6'}
                        ],
                        value='4', style={'padding': '15px', 'width': '80%'}
                        ),))
            ]
        ),
    ]
)
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([row])
if __name__ == '__main__':
app.run_server(port='8085',debug=True)
plotly-dash python
3 Answers

You can add the argument no_gutters=True to dbc.Row to remove them completely.

If you wanted to just reduce them you could make your own Bootstrap stylesheet and adjust the gaps to something you prefer. This app makes that process pretty easy, you just want to adjust the grid-gutter-width variable, then you can download the stylesheet and include it in your app.

user_81363220

If you're alright with imprecise solutions, setting form=True on the dbc.Row object will tighten the gutters up.

For more fine-grained control, set no_gutters=True as was recommended in the other answer, and on the dbc.Col objects add style={'margin-right': '5px', 'margin-left': '5px'}. You can adjust those as appropriate. For end columns, you may want to remove the margin on the end.

user_68147130

The previous answers state that no_gutter = True should be used. This got depreciated and will create an 'unexpected keyword' error in newer versions.

Use className="g-0" instead (dbc docs):

import dash_bootstrap_components as dbc
from dash import html

row = dbc.Row(
    [
        dbc.Col(html.Div("One of three columns")),
        dbc.Col(html.Div("One of three columns")),
        dbc.Col(html.Div("One of three columns")),
    ],
    className="g-0",
)
user_54469330
Related