Layout and Styling Explained

Key Concepts

• Columns: Organizing content into vertical sections.
• Sidebar: A dedicated area for navigation or supplementary content.
• Container: A wrapper that groups elements together.
• Styling: Customizing the appearance of elements.

Columns

Columns in Streamlit allow you to organize content into vertical sections. This is particularly useful for creating complex layouts where different types of content need to be displayed side by side.

import streamlit as st

col1, col2 = st.columns(2)

with col1:
    st.write("This is column 1")

with col2:
    st.write("This is column 2")
    

Sidebar

The sidebar in Streamlit is a dedicated area for navigation or supplementary content. It is often used for filters, settings, or navigation links that do not need to be in the main content area.

import streamlit as st

st.sidebar.title("Navigation")
page = st.sidebar.selectbox("Choose a page", ["Home", "About", "Contact"])

if page == "Home":
    st.write("Welcome to the Home page")
elif page == "About":
    st.write("This is the About page")
else:
    st.write("Contact us here")
    

Container

A container in Streamlit is a wrapper that groups elements together. This can be useful for applying styles or logic to a group of elements without affecting the rest of the page.

import streamlit as st

container = st.container()

with container:
    st.write("This is inside the container")
    st.button("Click me")
    

Styling

Styling in Streamlit allows you to customize the appearance of elements. This can be done using CSS, which can be embedded directly in the Streamlit app or linked from an external stylesheet.

import streamlit as st

st.markdown(
    """
    
    """,
    unsafe_allow_html=True
)

st.markdown('
This text is styled
', unsafe_allow_html=True)
    

Examples

Example 1: Using Columns

import streamlit as st

col1, col2, col3 = st.columns(3)

with col1:
    st.write("Column 1")

with col2:
    st.write("Column 2")

with col3:
    st.write("Column 3")
    

Example 2: Using Sidebar

import streamlit as st

st.sidebar.title("Settings")
option = st.sidebar.radio("Choose an option", ["Option 1", "Option 2"])

if option == "Option 1":
    st.write("You selected Option 1")
else:
    st.write("You selected Option 2")
    

Example 3: Using Container

import streamlit as st

container = st.container()

with container:
    st.write("This is inside the container")
    st.button("Click me")

st.write("This is outside the container")
    

Example 4: Applying Styling

import streamlit as st

st.markdown(
    """
    
    """,
    unsafe_allow_html=True
)

st.markdown('Click me', unsafe_allow_html=True)
    

Analogies

Think of columns as lanes on a highway, each carrying different types of traffic. The sidebar is like a service road that runs parallel to the main road, providing additional options. A container is like a box that holds items together, and styling is like painting or decorating the box to make it look attractive.

By mastering layout and styling in Streamlit, you can create visually appealing and organized web applications that enhance user experience.