Center Streamlit Button

Viewed 8356

How do I center a button with Streamlit so that the button is still clickable? Here is a small example for a button that returns random numbers:

 import streamlit as st 
 import numpy as np

 if st.button('Click'): 
     rand = np.random.standard_normal()
     st.write(str(rand))

I've seen solutions with markdown for a title, but not for an interactive element like a button.

5 Answers

Right now that’s not supported in Streamlit, but we are working on it (see our Roadmap for more info). Feel free to add your ideas to Customizable Layout for Streamlit discussion.

And thanks for using Streamlit!

col1, col2, col3 = st.beta_columns(3)
if col2.button('Click'):
    st.write('hello')

As far as I know there is no standard way to align the button in the center. I have however found a quick fix. It's not the right way but does the job.

You can try out :

col1, col2, col3 , col4, col5 = st.beta_columns(5)

with col1:
    pass
with col2:
    pass
with col4:
    pass
with col5:
    pass
with col3 :
    center_button = st.button('Button')

The following will create 5 columns and you can center your button in the third one while the other 4 remain empty. This is just a quick fix and not the correct way however it did the job for me. Hope you liked it.

TL;DR;

import streamlit as st

st.markdown("----", unsafe_allow_html=True)
columns = st.columns((2, 1, 2))
button_pressed = columns[1].button('Click Me!')
st.markdown("----", unsafe_allow_html=True)

You will get the following result (if default: narrow streamlit page settings): enter image description here

Streamlit columns

Streamlit docs defines columns() in the following way:

columns = st.columns(spec)

where specs are either int or a list (or a tuple). For example, st.columns([3, 1, 2]) creates 3 columns where the first column is 3 times the width of the second, and the last column is 2 times that width. Hence, you may play around with their relative width.

What is more useful, you will get a list of columns, so you may address them as consequent numbers. You may use that in case of flexible numbers of columns:

import streamlit as st
import random

column_qty = random.randint(1, 10)  # random number of columns on each run
buttons_pressed = []  # here we will collect widgets
st.markdown("----", unsafe_allow_html=True)

#  create all columns with arbitrary relative widths
columns = st.columns([random.randint(1, 3) for _ in range(column_qty)]) 

# Show widgets in them
for x, col in enumerate(columns):
    # if you need a static widget, just use: `col.text("some text")`
    buttons_pressed.append(col.checkbox(f'{x}')) # add widgets to the list
st.markdown("----", unsafe_allow_html=True)
st.text(f'Total columns: {column_qty}')

# Check each widget for its state
for x, btn in enumerate(buttons_pressed):
    if btn:
        st.write(f"{x}")  # NOTE: some columns may be dropped next run! 

enter image description here

A very useful thing for flex input forms.

Use:

_, _, _, col, _, _, _ = st.columns([1]*6+[1.18])
clicked = col.button('Button')
Related