Update layout to grid / add borderlines around `dbc.Label` component

Dash Python
1

I’d like add a grid layout / borders around a bunch of dbc.Labels. The layout code is below and the Label component are populated by a callback.

layout = html.Div([

                                dbc.Modal(
                                    [
                                        dbc.ModalHeader("info", style={"color":"black", "justify-content":"center"}),
                                        dbc.ModalBody(
                                            [

                                                dbc.Label("Name:"),
                                                dbc.Label("Name:", id="name_d"),
                                                html.Br(),

                                                dbc.Label("Name1:"),
                                                dbc.Label("Name1:", id="name_d1"),
                                                html.Br(),
                                                
                                          ]
                                  ]
                        )
           )]

Here’s how it looks now:

Screen Shot 2022-07-06 at 11.41.43 AM
Screen Shot 2022-07-06 at 11.41.43 AM954×294 42.9 KB

Is there a way to add gridlines / borders around dbc.Label so that it looks like the screenshot below?

Screen Shot 2022-07-06 at 11.48.44 AM
Screen Shot 2022-07-06 at 11.48.44 AM924×264 40.6 KB

2

Hi @keval

You can do this with using css with style= {…}

Or since you are using Bootstrap, you can use the Bootstrap utility classes. You can also use them to add spacing instead of using html.Br()

For example:

dbc.Label("Name", className="border-bottom border-3 mb-4")

You can also see more examples Dash Bootstrap Cheatsheet

1 Like
3

This is helpful, Thanks@AnnMarieW.

Is there a way in Bootstrap to change the layout to a grid layout or add lines between elements (similar to the screenshot) instead of applying bottom borders to each element?

1 Like
4

You could try using the ListGroup component:

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/list_group/

1 Like