Bootstrap Snippet Latest New 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 ---------->
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<div class="blog-sec-wrap">
        <div class="container">
            <div class="row">
                <div class="col-md-8 offset-md-2">
                    <div class="main-heading">Latest News</div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <div class="bs-box">
                        <div class="thumb">
                            <a href="#">
                                <img src="https://i.picsum.photos/id/249/900/620.jpg" alt="Thumb">
                            </a>
                        </div>
                        <div class="info">
                            <div class="post-info">
                                <ul>
                                    <li>
                                        <a href="#"><i class="fas fa-user"></i> Admin</a>
                                    </li>
                                    <li><i class="fas fa-calendar-alt"></i> 14 Jun, 2020</li>
                                </ul>
                            </div>
                            <div class="content">
                                <h4>
                                    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
                                </h4>
                                <p>
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
    .blog-sec-wrap {
            width: 100%;
            float: left;
            padding: 60px 0;
            font-family: 'Poppins', sans-serif;
        }
        .main-heading{
            text-align: center;
            font-weight: 600;
            padding-bottom: 15px;
            position: relative;
            text-transform: capitalize;
            font-size: 24px;
            margin-bottom: 25px;
        }
        .main-heading::before {
            background: #ffb606 none repeat scroll 0 0;
            bottom: 0;
            content: "";
            height: 2px;
            left: 50%;
            margin-left: -20px;
            position: absolute;
            width: 40px;
        }
        .bs-box {
            box-shadow: 0 0 10px #cccccc;
        }
        .thumb img {
            width: 100%;
        }
        .post-info ul {
            display: flex;
            align-items: center;
            list-style: none;
            border-bottom: solid 1px #e4e4e4;
            padding-left: 20px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Latest New"
Bootstrap 4.1.1 Snippet by MPJJ

Related: See More

Questions / Comments:

"Latest New" Bootstrap 4.1.1 Snippet by MPJJ

Related: See More

Questions / Comments:

"Latest New"
Bootstrap 4.1.1 Snippet by MPJJ