Horizontal Separator Line?

Using Streamlit
1

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.

5 Likes
2

You can do this with html components.
Something like

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

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)
2 Likes
4

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’)

5

Ah yes, you have to import the streamlit components bit


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

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
9

Thank you man, you just made my day!

10

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
11

They added the cleaner st.divider() method since the original post.

12

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.