I am using streamlit with python and Bootstrap.

How to add separator between bootstrap cards i did used the below statement in CSS and within the bootstrap class like below but it did not work. Below i added the function where i create the card div and after that i call the card function in the main function.

based on the answer of @Cervus camelopardalis i added the below CSScode.

style.css:

.card:not(:last-child) {
    margin-right: 50px !important;
}

app.py

 import streamlit as st
    import pandas as pd
    import numpy as np
    import base64
    import math
    
   #connect to the style.css
    with open("F:/venv/portfolio/style.css") as f:
        st.markdown(f'<style>{f.read()}</style>',unsafe_allow_html=True)
    
    # connect to bootstrap
    st.markdown("""
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        """,unsafe_allow_html=True)


    def card(project_title,start_date,end_date,tech,Role,project_desc,Role_details,v1,v2,v3,v4,v5,v6):
        return f"""
    
        <div class="card" style="width: 30rem;">
            <div class="card-header">
                <h5 class="card-title">{project_title}</h5>
            </div>
            <div class="card-body">
                <div class = "date-role">
                    <h6 class="card-subtitle mb-2 text-muted "style =" display:{v1};"" display:{v2};">{start_date} - {end_date}</h6>
                    <h6 class="card-subtitle mb-2 text-muted "" display:{v3};">{Role}</h6>
                </div>
                <div class = "subtitle">
                    <h4 class="card-subtitle mb-2 text-muted">Description</h4>
                </div>
                <div class = "para">
                    <p class="card-text"" display:{v4};">{project_desc}</p>
                </div>
                <div class = "subtitle">
                    <h4 class="card-subtitle mb-2 text-muted">Tasks</h4>
                </div>
                <div class = "para">
                    <p class="card-text"" display:{v5};">{Role_details}</p>
                </div>
                <div class="card-footer bg-transparent border-success"" display:{v6};">{tech}</div>
            </div>
        </div>
        """
    
    def main():
            df = pd.read_excel(project_list)
    
            if tech := st.multiselect("tech", df.tech.unique().tolist(), key=1):
            df = df[df["tech"].isin(tech)]
        project = df.query("tech ==@tech")
    
        if project_title := st.multiselect("project_title", project.project_title.unique().tolist(), key=2):
            df = df[df["project_title"].isin(project_title)]
    
    
        rec = int(df.shape[0])
        st.write("{} Records ".format(str(df.shape[0])))
        num_rows = max(1, math.ceil(rec/4))
    
        dv = 'inherit'
        cards = []
    
        for index ,row in df.iterrows():
            v1 = dv if row[1] is not None else 'none'
            v2 = dv if row[2] is not None else 'none'
            v3 = dv if row[3] is not None else 'none'
            v4 = dv if row[4] is not None else 'none'
            v5 = dv if row[5] is not None else 'none'
            v6 = dv if row[6] is not None else 'none'
            cards.append([
                row[0],    
                row[1],
                row[2],
                row[3],
                row[5],
                row[4],
                row[6],
                v1,v2,v3,v4,v5,v6])
        # Show the card data.
        if len(cards):
            for r in range(num_rows):
                num_cols = min(3, max(1, rec))
                c = st.columns(num_cols)
                for m in range(num_cols):
                    if len(cards):
                        mycard = cards.pop(0)
                        c[m].markdown(card(*mycard), unsafe_allow_html=True)