Embedding Bootstrap tags in st.markdown no longer works after updating to 0.69.2

Hi!,

I’m having this issue after updating to version 0.69.2.

I know there is a new strategy for custom components but embedding these CSS was so convenient…

do you have any idea why is this happening?

This doesn’t work now:

st.markdown('<span class="badge badge-pill badge-success"> Badge </span>', unsafe_allow_html=True)

Thanks!!

Hi @alfredroig! Thanks for contacting us!

I’m sad to say that we spent efforts deprecating and removing Bootstrap from our frontend codebase. This would explain why you are seeing things not work. The good news is that these changes pave the way to a much more exciting future of styling that we are working on.

There are a couple options that might help out here:

  • The easiest solution is to add st.markdown('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">', unsafe_allow_html=True) before code. This downloads the CSS library in the beginning.
  • Look into creating custom components to support your needs. Feel free to chime in with UI elements in Github Issues for us to look at seeing if others are looking for those same elements. They may appear in future places.

Hope that helps! Thanks for using Streamlit!

2 Likes