Is it possible to convert dataframe records into bootstrap card?

Using Streamlit
1

i am building streamlit app that is connected to sql server database where it allow the user to perform some basic CRUD tasks.
It also allow the use to search for the required data and fro now it display the data as dataframe table.

What i am asking is’t possible to convert each returned record of this dataframe into a bootstrap card ?

until now i a was able to embed bootstrap code using st.markdown() but this allow to add a one static card, what i want is to display bootstrap cards equal to the returned result of the dataframe.

2

I assume you’ll have to llop and write out the markdown for each dataframe row.

3

so you mean after a get the dataframe result i loop over the dataframe and display each record in a different card ??
can you show me an example of this ?

4

Yep, so something like:

for index, row in st.session_state.df.iterrows():
    st.markdown(self.card_template.format(str(index + 1), paper_url, row['title'], row['authors'], row['published_year'], row['journal'], row['doi'], row['score'], row['abstract']), unsafe_allow_html=True)

where the template might be:

self.card_template = """
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
                    <div class="card bg-light mb-3" >
                        <H5 class="card-header">{}.  <a href={} style="display: inline-block" target="_blank">{}</h5>
                            <div class="card-body">
                                <span class="card-text"><b>Author(s): </b>{}</span><br/>
                                <span class="card-text"><b>Year: </b>{}</span><br/>
                                <span class="card-text"><b>Journal: </b>{}</span><br/>
                                <span class="card-text"><b>DOI: </b>{}</span><br/>
                                <span class="card-text"><b>Score: </b>{}</span><br/><br/>
                                <p class="card-text">{}</p>
                            </div>
                        </div>
                    </div>
        """

For a variety of out-of-box cards, have a look here:

1 Like
5

what is paper_url stand for ?
I know that row [ ] is the value in each record right ??

6

I just shared an example I’m using. paper_url is just a variable with a url as text in it, which you can see I’m passing into a hyperlink tag. Just try with a simpler example to begin with, with say two fields from your dataframe.

7

ok thanks for sharing this hope this work for me and thanks for your help .
so to be clear row [ title ] where title is the field name in the dataframe ?

8

title is a column in my dataframe. When you iterate over the df with iterrows, in my example, you can reference each column value of the current row with row[‘title’], row[‘authors’], but of course your columns will be named differently.

9

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