Black Lives Matter. Please consider donating to Black Girls Code today.

Dcc.Dropdown not initiating callback when placed inside boostrap component

I tried to mimic this example: Callbacks: return a go.Figure?

so started trying to use bootstrap components.

All my status codes are 200 for the initial page load although it does not do so as intended. Also it does not look like it is reacting to any of the changes in input from dcc.Dropdown.
My current code:

# -*- coding: utf-8 -*-
"""
@author;
"""
from dash import Dash
from dash.dependencies import Input, Output
from Dashboard.utils.Dash_fun import apply_layout_with_auth
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from Dashboard.utils.Dash_App_utils import (table_names_arr,csv_names_arr, make_dataframes,
                                        make_table, make_figure)

url_base = '/dash/app3/'

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

colors={
        'background': 'white',
        'text': 'black'
}
# make all dataframes from csv
df_arr = make_dataframes()

layout = dbc.Container(
    [
        html.H1("Nutrients Dashapp1",
                style={
                'textAlign': 'center',
                'color': colors['text']
                }),
        html.Hr(),
        dbc.Row([
            dbc.Col(
                html.Div([
                    dcc.Dropdown(
                        id='pick-table-dropdown',
                        options=[{'label': i, 'value': i} for i in table_names_arr],
                        value=table_names_arr[0]
                    ),
                    html.Div(
                        id="you-picked"
                    )],
                ),
                width=12
            )
        ]),
        dbc.Row([
            dbc.Col([
                html.Div(
                    id='which-table'
                )],

                width=12
            )
        ]),
        dbc.Row([
            dbc.Col(
                dcc.Graph(id='rdi-figure'),
                width=12
            )
        ], align='center',
        )
    ],
    fluid=True,
)

def Add_Dash(server):
    app=Dash(server=server, url_base_pathname=url_base,
             external_stylesheets=[dbc.themes.BOOTSTRAP])
    apply_layout_with_auth(app, layout)

    @app.callback(
        [Output('which-table', 'children'), #Output('numeric-table', 'children'),
         Output('you-picked', 'children'),
         Output('graph1', 'figure')],
        [Input('pick-table-dropdown', 'value')])
    def render_content(value):
        the_df = None
        table = None
        for i in range(len(table_names_arr)):
            if table_names_arr[i]==value:
                the_df = df_arr[i]
                table = make_table(the_df)
                break

        # assert table
        figure = make_figure(the_df, value)
        #val_string = f'you selected {value}'
        return table, f'your input is {value}', figure

    return app.server

What was working before without bootstrap (well not really, my figures were loading in a fresh tab not the page where I wanted them so I used fig.show())

# -*- coding: utf-8 -*-
"""
@author;
"""
from dash import Dash
from dash.dependencies import Input, Output
from Dashboard.utils.Dash_fun import apply_layout_with_auth
import dash_core_components as dcc
import dash_html_components as html
from Dashboard.utils.Dash_App_utils import (table_names_arr,csv_names_arr, make_dataframes,
                                        make_table, make_figure)

url_base = '/dash/app3/'

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

colors={
        'background': 'white',
        'text': 'black'
}
# make all dataframes from csv
df_arr = make_dataframes()

layout = html.Div([
        dcc.Location(id='url', refresh=False),
        html.H1(children="Nutrients Dashapp1",
                style={
                    'textAlign': 'center',
                    'color': colors['text']
        }),
        html.Br(),
        html.Br(),
        dcc.Dropdown(
            id='pick-table-dropdown',
            options=[{'label': i, 'value': i} for i in table_names_arr],
            value=table_names_arr[0]
        ),
        #html.Div(id='selected-item'),
        html.Div(id='which-table'),
        html.Div(id='numeric-table'),
        html.Br(),
        html.Div(id='rdi-figure'),
        #html.Div(id='model-table'),
        #generate_table(demo_df)
])

def Add_Dash(server):
    app=Dash(server=server, url_base_pathname=url_base)
    apply_layout_with_auth(app, layout)

    @app.callback(
        [Output('which-table', 'children'), #Output('numeric-table', 'children'),
         Output('rdi-figure', 'children')],
        [Input('pick-table-dropdown', 'value')])
    def render_content(value):
        the_df = None
        table = None
        for i in range(len(table_names_arr)):
            if table_names_arr[i]==value:
                the_df = df_arr[i]
                table = make_table(the_df)
                break

        # assert table
        figure = make_figure(the_df, value)
        #val_string = f'you selected {value}'
        return table, figure

    return app.server