Bootstrap Snippet Event List using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row g-3 mt-5 mb-5">
        <div class="col-md-3 d-flex align-items-stretch">
            <div class="card">
                <div class="card-img-top image-card image-card-1"> <img src="https://i.imgur.com/CHquE7o.png" alt="..."> </div>
                <div class="card-body"> <span class="text-uppercase text-danger fw-bold fs-6">Category</span>
                    <h6 class="card-title text-dark mt-2">What you wants to know about hubspot?</h6>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing eliLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p> <a href="#" class="text-dark">Read full story...</a>
                    <div class="mt-4 about d-flex justify-content-between align-items-center"> <span>By Prabhjot Singh</span> <span>On 12 Oct, 2020</span> <span>5 min read</span> </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 d-flex align-items-stretch">
            <div class="card">
                <div class="card-img-top image-card image-card-2"> <img src="https://i.imgur.com/2TNPTfA.png" alt="..."> </div>
                <div class="card-body"> <span class="text-uppercase text-danger fw-bold fs-6">Category</span>
                    <h6 class="card-title text-dark mt-2">What you wants to know about hubspot?</h6>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p> <a href="#" class="text-dark">Read full story...</a>
                    <div class="mt-4 about d-flex justify-content-between align-items-center"> <span>By Prabhjot Singh</span> <span>On 12 Oct, 2020</span> <span>5 min read</span> </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 d-flex align-items-stretch">
            <div class="card">
                <div class="card-img-top image-card image-card-3"> <img src="https://i.imgur.com/pTkFtZq.png" alt="..."> </div>
                <div class="card-body"> <span class="text-uppercase text-danger fw-bold fs-6">Category</span>
                    <h6 class="card-title text-dark mt-2">What you wants to know about hubspot?</h6>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p> <a href="#" class="text-dark">Read full story...</a>
                    <div class="mt-4 about d-flex justify-content-between align-items-center"> <span>By Prabhjot Singh</span> <span>On 12 Oct, 2020</span> <span>5 min read</span> </div>
                </div>
            </div>
        </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
    background: #000
}
.card {
    border-radius: 20px;
    overflow: hidden;
    border: none;
    background-color: #fff
}
.image-card {
    height: 200px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.image-card-1 {
    background-color: #18A4F7
}
.image-card-2 {
    background-color: #00D7D2
}
.image-card-3 {
    background-color: #FF75A0
}
.image-card img {
    height: 150px;
    width: 150px;
    object-fit: cover
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Event List"
Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"Event List" Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"Event List"
Bootstrap 4.1.1 Snippet by tieusuquay79