Dropdown display with dbc style sheet

Hi dash community,

I have a problem with dropdown display when using the external_stylehssets = [dbc.themes,BOOTSTRAP] in my app.
Setting the className of the dropdown equal to ‘row’ won’t let the dropdown take the entire ‘row’.
I am curious how to adjust dropdown column width with dbc stylesheet?

Below is my code for reference:

import plotly.plotly as py
import plotly.graph_objs as go

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

trace1 = go.Bar(
    x=['giraffes', 'orangutans', 'monkeys'],
    y=[20, 14, 23],
    name='SF Zoo'
trace2 = go.Bar(
    x=['giraffes', 'orangutans', 'monkeys'],
    y=[12, 18, 29],
    name='LA Zoo'

data = [trace1, trace2]
layout = go.Layout(

fig = go.Figure(data=data, layout=layout)

#App layout
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

tabs_div = html.Div([
        id = 'ab_tabs',
        children = [
                label = 'a',
                value = 'a',
                label = 'b',
                value = 'b',
        value = 'a'
        id = 'tabs_content',
        style = {'margin':'2% 3%', 'marginLeft':50}
progress = html.Div(
        dbc.Progress(id="progress", value=0, striped=True, animated=True),
        dcc.Interval(id="interval", interval=250, n_intervals=0),
bar_graph = dcc.Graph(figure=fig)
drop_div = html.Div([
    html.A('This is a dropdown'),
        id = 'd_d',
        options=[{'label':'abc', 'value':'abc'},
                 {'label':'bcd', 'value':'bcd'}
#className = 'row'

@app.callback(Output("progress", "value"), [Input("interval", "n_intervals")])
def advance_progress(n):
    return min(n % 110, 100)

@app.callback(Output('tabs_content', 'children'),
             [Input('ab_tabs', 'value')])
def update_tabs(tab):
    if tab =='a':
        return html.Div([bar_graph, progress])
    if tab =='b':
        return drop_div

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

if __name__ == "__main__":

i think i just solved my problem by looking up bootstrap styling

It’s a bit different from ‘row’ ‘columns’ className styling i use quite often in dcc.
guess i will need to change all the className style code in my app if i want to incorporate some bootstrap components in my app.

Hey @almond

Do you know about the Row and Col components in dash-bootstrap-components? They give you quite a lot of control over the layout of your app, and save you from having to specify className manually all the time. Check out the docs here.