"Bootstrap 5 News Block"
Bootstrap 4.1.1 Snippet by superbwebdeveloper

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 ---------->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V"
crossorigin="anonymous"
/>
<div class="container">
<div class="row">
<div class="col-md-12 d-flex justify-content-center right-bck">
<div class="registration-right">
<h2>Our News</h2>
<div class="event-list">
<div class="card flex-row"><img class="card-img-left img-fluid" src="https://via.placeholder.com/150
C/O https://placeholder.com/" />
<div class="card-body">
<h4 class="card-title h5 h4-sm"><i class="fas fa-caret-right" aria-hidden="true"></i><span>AUG 01
2021</span><i class="fas fa-caret-right" aria-hidden="true"></i><span>12:00 AM - 11:59 PM</span>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</p>
</div>
</div>
<div class="card flex-row"><img class="card-img-left img-fluid" src="https://via.placeholder.com/150
C/O https://placeholder.com/" />
<div class="card-body">
<h4 class="card-title h5 h4-sm"><i class="fas fa-caret-right" aria-hidden="true"></i><span>AUG 01
2021</span><i class="fas fa-caret-right" aria-hidden="true"></i><span>12:00 AM - 11:59 PM</span>
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</p>
</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
.right-bck {
background-color: #231833;
}
.registration-right {
width: 80%;
padding-top: 50px;
padding-bottom: 50px;
}
.registration-right h2 {
color: #ffffff;
font-weight: 700;
padding-bottom: 20px;
}
.registration .btn {
width: 100%;
}
.fa,
.fas,
.fab {
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.far {
font-family: "Font Awesome 5 Free";
font-weight: 400;
}
.event-list .card {
background-color: #30263f;
padding: 18px;
margin-bottom: 3px;
}
.event-list img {
width: 77px;
height: 77px;
}
.event-list h4 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: