Horizontal Separator Line?

Is there a command to draw a horizotnal black line to separate parts of the app?
Or, is there a way to automatically put horizontal black lines between container objects.

6 Likes

You can do this with html components.
Something like

components.html("""<hr style="height:10px;border:none;color:#333;background-color:#333;" /> """)

Similarly, if color customization is not essential, without the need for components you can go with plain Markdown

import streamlit as st

text = '''
I am above line

---

I am below line
'''

st.markdown(text)
3 Likes

I get an error “components not defined”.
I also tried it with st.html and my_container.html and got an error (module ‘streamlit’ has no attribute ‘html’)

Ah yes, you have to import the streamlit components bit…

import streamlit.components.v1 as components
1 Like
st.markdown("""---""")
11 Likes

You need to write it like this:

st.markdown("""<hr style="height:10px;border:none;color:#333;background-color:#333;" /> """, unsafe_allow_html=True)

5 Likes

Thank you man, you just made my day!

You could probably try the emoji route too:

st.write(":heavy_minus_sign:" * 34) # horizontal separator line. Just change 34 as needed.

Cheers

2 Likes