DocumentationsearchSearchrocket_launchGet startedInstallationaddFundamentalsaddFirst stepsaddcodeDevelopConceptsaddAPI referenceremovePAGE ELEMENTSWrite and magicaddText elementsaddData elementsaddChart elementsaddInput widgetsaddMedia elementsaddLayouts and containersremovest.columnsst.containerst.dialoglinkst.emptyst.expanderst.formlinkst.popoverst.sidebarst.tabsChat elementsaddStatus elementsaddThird-party componentsopen_in_newAPPLICATION LOGICNavigation and pagesaddExecution flowaddCaching and stateaddConnections and secretsaddCustom componentsaddUtilitiesaddConfigurationaddTOOLSApp testingaddCommand lineaddTutorialsaddQuick referenceaddweb_assetDeployConceptsaddStreamlit Community CloudaddStreamlit in Snowflakeopen_in_newOther platformsaddschoolKnowledge baseFAQInstalling dependenciesDeployment issuesHome/Develop/API reference/Layouts and containersLayouts and Containers
Complex layouts
Streamlit provides several options for controlling how different elements are laid out on the screen.
ColumnsInsert containers laid out as side-by-side columns.col1, col2 = st.columns(2)
col1.write("this is column 1")
col2.write("this is column 2")
ContainerInsert a multi-element container.c = st.container()
st.write("This will show last")
c.write("This will show first")
c.write("This will show second")
Modal dialogsInsert a modal dialog that can rerun independently from the rest of the script.@st.experimental_dialog()
def email_form():
    name = st.text_input("Name")
    email = st.text_input("Email")
EmptyInsert a single-element container.c = st.empty()
st.write("This will show last")
c.write("This will be replaced")
c.write("This will show first")
ExpanderInsert a multi-element container that can be expanded/collapsed.with st.expander("Open to see more"):
  st.write("This is more content")
PopoverInsert a multi-element popover container that can be opened/closed.with st.popover("Settings"):
  st.checkbox("Show completed")
SidebarDisplay items in a sidebar.st.sidebar.write("This lives in the sidebar")
st.sidebar.button("Click me!")
TabsInsert containers separated into tabs.tab1, tab2 = st.tabs(["Tab 1", "Tab2"])
tab1.write("this is tab 1")
tab2.write("this is tab 2")

Third-party componentsThese are featured components created by our lovely community. If you don't see what you're looking for, check out our Components Hub app and Streamlit Extras for more examples and inspiration!Streamlit ElementsCreate a draggable and resizable dashboard in Streamlit. Created by @okls.from streamlit_elements import elements, mui, html

with elements("new_element"):
  mui.Typography("Hello world")
PydanticAuto-generate Streamlit UI from Pydantic Models and Dataclasses. Created by @lukasmasuch.import streamlit_pydantic as sp

sp.pydantic_form(key="my_form",
  model=ExampleModel)
Streamlit PagesAn experimental version of Streamlit Multi-Page Apps. Created by @blackary.from st_pages import Page, show_pages, add_page_title

show_pages([ Page("streamlit_app.py", "Home", "🏠"),
  Page("other_pages/page2.py", "Page 2", ":books:"), ])
Previous: Media elementsNext: st.columnsforumStill have questions?Our forums are full of helpful information and Streamlit experts.HomeContact UsCommunity© 2024 Snowflake Inc.Cookie policy