Как реализовать Bootstrap Card Layout в Django: Достижение желаемого дизайна в сравнении с текущим результатом

Я работаю над приложением на Django. В основном я работаю над бэкендом, потому что во фронтенде я ужасен. Я хочу создать страницу, содержащую несколько карточек. Я хочу создать эту структуру в изображении-1, но у меня получается создать изображение-2. Я прикреплю свой код, можете ли вы помочь мне реализовать первое изображение? (Изображения на картинке не важны, они могут меняться) Я использую bootstrap 4.6

<div class="col-lg-5 col-md-12">
            <img class="ca-icon" src="{% static 'images/list-icon.svg' %}" alt="List">
            <div class="row ca-border mb-3 align-items-center ca-side-context">
                <div class="col-6 ">
                    <div class="row">Text-1</div>
                    <div class="row "><img class="icon sound-icon" src="{% static 'images/sound-icon.svg' %}"
                                           alt="Sound Icon"></div>
                </div>
                <div class="col-6  ca-border"><img class="img-fluid" src="{% static 'images/temp.png' %}" alt="List"></div>
            </div>

            <img class="ca-icon" src="{% static 'images/parent-icon.svg' %}" alt="List">
            <div class="row ca-border mb-3 align-items-center ca-side-context">
                <div class="col-6 ">
                    <div class="row">Text-2</div>
                    <div class="row "><img class="icon sound-icon" src="{% static 'images/sound-icon.svg' %}"
                                           alt="Sound Icon"></div>
                </div>
                <div class="col-6  ca-border"><img class="img-fluid" src="{% static 'images/temp.png' %}" alt="List"></div>
            </div>
        </div>
<style>
.ca-border {
        border: 12px solid #ffdd43;
        border-radius: 20px;
        padding: 10px;
    }
    .ca-icon {
        width: 10%;
       height: 10%;
    }
    .sound-icon {
        width: 50%;
       height: 50%;
    }
    .play-icon{
        width: 90%;
       height: 90%;
    }
    .clock-icon{
        width: 50%;
       height: 50%;
    }
    .subject-title {
        margin-left: 10px;
    }
    .statement {
        text-align: center;
    }
    .ca-frame {
        margin-top: 20px;
    }
}
</style>

Вернуться на верх