Streamlit Container
Inserts an invisible container into your app that can be used to hold multiple elements.
This allows you to, for example, insert multiple elements into your app out of order.
A container on Streamlit is a layout block that lets us group multiple elements together.
It is useful when we want to have better control over the arrangement of widgets, charts, text or any other component.
Need a Streamlit developer?: Click here
Creating a container
Basic syntax
we create the container using st.container()
we use the with statement to add content inside it.
Everything inside the with block stays grouped together
import streamlit as st
container = st.container()
#we can add widgets and elements inside
with container:
st.header("Streamlit Container Example")
st.write("This content is inside a container")
st.button("Hey click me!")
we can also add borders to the container
container = st.container(border=True)
with container:
st.header("Streamlit Container with border Example")
st.write("This content is inside a container")
st.button("Hey click me!")
Vertically scrolling container
we can create a vertical scrolling container by setting a fixed height
import streamlit as st
big_text = "Random text. " * 500
with st.container(height=300):
st.markdown(big_text)
Adding multiple elements in a container
we can add text, charts, widgets, and images inside the same container
import streamlit as st
import pandas as pd
import numpy as np
st.title("Dashboard with containers")
dashboard = st.container()
with dashboard:
st.subheader("Data Overview")
data = pd.DataFrame(np.random.randn(10, 3), columns=["A", "B", "C"])
st.dataframe(data)
st.line_chart(data)
st.write("Grouped table and chart")
Updating a container Dynamically
Containers are dynamic, we can update or clear content
st.empty() is used to dynamically replace content inside the container.
import streamlit as st
import time
st.title("Dynamic container")
status = st.container()
with status:
st.subheader("Process Status")
placeholder = st.empty()
for i in range(5):
placeholder.write(f"Step {i+1} in progress...")
time.sleep(1)
placeholder.success("Process Completed!")
Nesting Containers
import streamlit as st
st.title("Nested Containers")
outer = st.container()
with outer:
st.header("Outer container")
inner_container1= st.container()
inner_container2 = st.container()
with inner_container1:
st.subheader("Inner container 1")
st.write("This is the first nested container")
with inner_container2:
st.subheader("Inner container 2")
st.write("This is inside the second nested container")
Containers with columns
we can combine containers and columns for dashboard-style layouts
import streamlit as st
st.title("Dashboard with Containers and Columns")
container = st.container()
with container:
st.subheader("Metrics overview")
col1, col2, col3 = st.columns(3)
with col1:
st.metric("Users", "$1,024", "+30%")
with col2:
st.metric("Sales", "$9,300", "+40%")
with col3:
st.metric("Revenue", "$20,90", "-2%")
Conditional rendering in containers
we can conditionally display elements inside containers.
import streamlit as st
st.title("Conditional Containers Example")
check = st.checkbox("Show extra details")
main_container = st.container()
with main_container:
st.subheader("Main Information")
st.write("This section is always visible.")
if check:
st.success("Here are some extra details revealed")
else:
st.warning("Click the checkbox above to see more details.")
Horizontal container
We can create a row of widgets using a horizontal container.
Use horizontal_alignment to specify the alignment of the elements.
import streamlit as st
flex = st.container(horizontal=True, horizontal_alignment="right")
for card in range(2):
flex.button(f"Button {card + 1}")
import streamlit as st
flex = st.container(horizontal=True, horizontal_alignment="left")
for card in range(2):
flex.button(f"Button {card + 1}")
Best Practices for Containers
Group related elements inside one container.
Use
st.empty()for dynamic updates.Combine containers + columns for dashboards.
Avoid deeply nested containers — keep it simple.
Use conditional rendering for better user experiences.
Want to learn more about Streamlit? Click here
Watch Videos on streamlit:
