Components html - use own css

Using Streamlit
1

Hi,

Trying to incorporate my own css into building of html doc using bootstrap 4 and outputing with streamlits components:

import streamlit.components.v1 as components

…
header = '<link rel="stylesheet"

href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">' \
'<link href="assets/css/test.css" rel="stylesheet">' \
'<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>' \
'<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>'

However my css is not picked up. Using chrome inspect tool then checking sources, I can’t see my css imported.

Any guidance welcome, thanks!

P.S. If there are any good demo apps using the components html feature I’d love to see :slight_smile:

2

Just seen this hack by @andfanilo, is this still the preferred (only) way to use own css, by reading in the .css and writing the styles back out, and with using st.markdown rather than components.html?

https://discuss.streamlit.io/t/creating-a-nicely-formatted-search-field/1804/2

3

Hello @LostGoatOnHill , always nice to see users styling up their Streamlit page :slight_smile:

I got an untested hunch on this one, <link href="assets/css/test.css" rel="stylesheet"> being a relative path, it will be relative to Streamlit’s static installation folder and not your root project, so you will need to copy your CSS file to the folder or write an absolute path.

Check my answer there: Restrict Download of Images & Videos on Streamlit App - #2 by andfanilo

The difference is:

Hope this will unlock new styling powers :stuck_out_tongue:
Fanilo

1 Like