Bootstrap Row & Col, versus html Div? Is Div necessary?

Dash Python
1

It seems like html.Div is not always needed, especially if building your layout with the bootstrap grid system (dbc.Row and dbc.Col). Besides CSS styling and layout arrangement, when is html.Div needed?

2

Hi @nlyle,

As far as I understand it, dbc.Row and dbc.Col are just html.Divs with some extra pre-defined properties. You can learn more by opening the dev tools in your web browser when visiting some dash app (see example below).

image
image1920×1248 182 KB

In principle, you can combine dbc.Row, dbc.Col and html.Div, but note this quote from the

documentation:

  1. Only use Row and Col inside a Container . A single Container wrapping your entire app’s content is fine. Set fluid=True if you don’t want the margins that Container adds by default. Since the content of this page is wrapped with a Container , the snippets below don’t explicitly include them.
  2. The immediate children of any Row component should always be Col components. Your content should go inside the Col components.

You can definitely place html.Div inside of dbc.Col if you have such need.

3 Likes
3

Thanks @sislvacl ! Since my local testing was working with just Containers, Rows, and Cols, it seemed like I didn’t need Div. Thanks for confirming with this example. Maybe sometimes an empty Div with an ID is good for being a callback output placeholder.