dash Bootstrap Components

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

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    dbc.Alert("Hello Bootstrap!", color="success"),
    className="p-6",
)

if __name__ == "__main__":
    app.run_server()

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            html.P("This is column 1"),  
        ], width=8, style={"height":"100%", "background-color": "red"} ),
        dbc.Col([
            html.P("This is column 2"),      
        ], width=4, style={"height": "50%", "background-color": "green"}),
    ], className="h-75"),
    dbc.Row([
        dbc.Col([
            html.P("This is column 3"), 
        ], width=8, style={"height":"100%", "background-color": "blue"}),
        dbc.Col([
            html.P("This is column 4"),
        ], width=4, style={"height":"100%", "background-color": "cyan"},),
    ], className="h-25" ),
],style={"height":"100vh"}) #,fluid=True)

if __name__ == "__main__":
    app.run_server(debug=True)

100vh

https://dream-frontend.tistory.com/27

height: 100%; 선택자(.container)가 들어있는 부모의 100%를 채우겠다는 말. 

그러나 부모값에 의존하지 않고, 부모값에 상관없이 값을 설정하고 싶다 하면,
vh 단위 vh : View height 를 모두 쓰려고 할때 사용React Bootstrap Spacing

.container{
  height: 100%;
  또는
  height: 100vh;
}

https://mdbootstrap.com/docs/react/utilities/spacing/

https://ichi.pro/ko/daesileul-sayonghaneun-chobojaleul-wihan-python-ui-daesi-bodeu-buteu-seuteulaeb-css-guseong-yosogaissneun-ban-eung-hye-46235417656566

Notation

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min- width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

• m – for classes that set margin
• p – for classes that set padding

Where sides is one of:

• t – for classes that set margin-top or padding-top
• b – for classes that set margin-bottom or padding-bottom
• l – for classes that set margin-left or padding-left
• r – for classes that set margin-right or padding-right
• x – for classes that set both *-left and *-right
• y – for classes that set both *-top and *-bottom
• blank – for classes that set a margin or padding on all 4 sides of the element

Where breakpoint is one of:

• sm
• md
• lg
• xl

Where size is one of:

• 0 – for classes that eliminate the margin or padding by setting it to 0
• 1 – (by default) for classes that set the margin or padding to $spacer-x * .25 or $spacer-y * .25
• 2 – (by default) for classes that set the margin or padding to $spacer-x * .5 or $spacer-y * .5
• 3 – (by default) for classes that set the margin or padding to $spacer-x or $spacer-y
• 4 – (by default) for classes that set the margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5
• 5 – (by default) for classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3

(You can add more sizes by adding entries to the $spacers Sass map variable.)