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

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.ModalHeader("info", style={"color":"black", "justify-content":"center"}),

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

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

Here’s how it looks now:

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

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

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

You could try using the ListGroup component:


1 Like