Removing empty space around two components in a dbc.Card

Dash Python
1

Desired Output
Desired Output1358×902 61.3 KB

I have the code below. I am having a hard time understanding how to control empty space around daq.Guage object and how to center the indicator in that column. My code is below, any help would be appreciated. I am using the bootstrap SUPERHERO theme.

   dbc.Col([dbc.Card(
                    [
                        dbc.Row(
                            [
                             dbc.Col(
                                    daq.Gauge(
                                            showCurrentValue=False,
                                            #units="tweets per day",
                                            color={"gradient":True,"ranges":{'#5CB85C':[0,0.5],'#FFC107':[0.5,0.75],'#D9534F':[0.75,1]}},
                                            value=0.90,
                                            label='TBD',
                                            max=1,
                                            min=0,
                                            size=127,
                                            className = 'modal-header',
                                            style={     'stroke-width' : '20px',
                                                        'margin-left' : '2px',
                                                        'lineHeight' : '2px',
                                                        #'box-shadow': '0px 0px 5px black',
                                                        'borderWidth' : '2px',
                                                        'borderRadius': '10px',
                                                        'textAlign' : 'center',
                                                        'margin' : '2px',
                                                        'backgroundColor' : '#213546'
                                                        },
                                            ), width = {'size':'auto'}
                                        ),
                                dbc.Col(
                                    dbc.CardBody(
                                        [
                                            daq.Indicator(
                                                   value=True,
                                                   className='class="col-lg-1 col-offset-6 centered')
                                        ],
                                    ),
                                    className="col-md-8",
                                ),
                            ],
                             justify="center",
                        )
                    ],
                    className = 'modal-header',
                    style={"maxWidth": "200px",
                          'box-shadow': '5px 5px 5px black',
                          'borderRadius': '10px',
                       },

                    )])
2

UPDATED IMAGE

   dbc.Col([dbc.Card(
                    [
                        dbc.Row(
                            [
                             dbc.Col(
                                    daq.Gauge(
                                            showCurrentValue=False,
                                            #units="tweets per day",
                                            color={"gradient":True,"ranges":{'#5CB85C':[0,0.5],'#FFC107':[0.5,0.75],'#D9534F':[0.75,1]}},
                                            value=0.90,
                                            label='TBD',
                                            max=1,
                                            min=0,
                                            size=127,
                                            className = 'modal-header',
                                            style={     'stroke-width' : '0px',
                                                        'margin-left' : '0px',
                                                        'lineHeight' : '2px',
                                                        #'box-shadow': '0px 0px 5px black',
                                                        'borderWidth' : '0px',
                                                        'borderRadius': '0px',
                                                        'textAlign' : 'center',
                                                        'margin' : '0px',
                                                        'backgroundColor' : '#213546'
                                                        },
                                            ), width = {'size':'auto'}
                                        ),
                            ],
                        ),
                        
                     dbc.Row(
                            [
                             dbc.Col(
                    
                                    dbc.CardBody(
                                        [
                                            daq.Indicator(
                                                   value=True,
                                                   className="d-flex",)
                                        ],
                                    ),
                                    className="col-md-8",
                                ),
                                 ])   
                        
                    ],
                    className = 'modal-header',
                    style={"maxWidth": "200px",
                          'box-shadow': '5px 5px 5px black',
                          'borderRadius': '10px',
                       },

                    )])
3

Specifying the bottom margin in style solved it

'margin-bottom': -50

solved_image