<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
img{width:100%;}
a:link, a:visited {
text-decoration: none;
}
ul.timeline {
list-style-type: none;
position: relative;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
a:link, a:visited {
text-decoration: none;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="row mb-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="http://www.3forty.media/cannix/wp-content/uploads/2018/03/clem-onojeghuo-127166-unsplash-1-500x333.jpg ">
</div>
<div class="col-md-8">
<div class="news-title">
<a href="#"><h5>Uneasy no settle whence nature narrow in afraid</h5></a>
</div>
<div class="news-cats">
<ul class="list-unstyled list-inline mb-1">
<li class="list-inline-item">
<i class="fa fa-folder-o text-danger"></i>
<a href="#"><small>Advertisment</small> </a>
</li>
<li class="list-inline-item">
<i class="fa fa-folder-o text-danger"></i>
<a href="#"><small>Author</small> </a>
</li>
<li class="list-inline-item">
<i class="fa fa-folder-o text-danger"></i>
<a href="#"><small>4th July 2018</small></a>
</li>
</ul>
</div>
<div class="news-content">
<p>Particular unaffected projection sentiments no my. Music marry as at cause party worth weeks. S... </p>
</div>
<div class="news-buttons">
<button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal">Read More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<img src="http://www.3forty.media/cannix/wp-content/uploads/2018/03/clem-onojeghuo-127166-unsplash-1-500x333.jpg ">
</div>
<div class="col-md-8">
<div class="news-title">
<a href="#"><h5>Uneasy no settle whence nature narrow in afraid</h5></a>
</div>
<div class="news-cats">
<ul class="list-unstyled list-inline mb-1">
<li class="list-inline-item">
<i class="fa fa-folder-o text-danger"></i>
<a href="#"><small>Advertisment</small> </a>
</li>
<li class="list-inline-item">
<i class="fa fa-folder-o text-danger"></i>
<a href="#"><small>Author</small> </a>
</li>
<li class="list-inline-item">
<i class="fa fa-folder-o text-danger"></i>
<a href="#"><small>4th July 2018</small></a>
</li>
</ul>
</div>
<div class="news-content">
<p>Particular unaffected projection sentiments no my. Music marry as at cause party worth weeks. S... </p>
</div>
<div class="news-buttons">
<button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal">Read More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 ">
<ul class="timeline">
<li>
<a target="_blank" href="https://www.totoprayogo.com/#">New Web Design</a>
<a href="#" class="float-right">21 March, 2014</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....</p>
</li>
<li>
<a href="#">21 000 Job Seekers</a>
<a href="#" class="float-right">4 March, 2014</a>
<p>Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...</p>
</li>
<li>
<a href="#">Awesome Employers</a>
<a href="#" class="float-right">1 April, 2014</a>
<p>Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p>
</li>
<li>
<a href="#">Awesome Employers</a>
<a href="#" class="float-right">1 April, 2014</a>
<p>Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p>
</li>
<li>
<a href="#">Awesome Employers</a>
<a href="#" class="float-right">1 April, 2014</a>
<p>Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...</p>
</li>
</ul>
</div>
</div>
</div>
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="news-title">
<h2>Highlights from the Louis Vuitton Men’s Spring</h2>
</div>
<div class="news-cats">
<ul class="list-unstyled list-inline mb-1">
<li class="list-inline-item">
<i class="fa fa-folder-o text-danger"></i>
<a href="#"><small>Advertisment</small> </a>
</li>
<li class="list-inline-item">
<i class="fa fa-folder-o text-danger"></i>
<a href="#"><small>Author</small> </a>
</li>
<li class="list-inline-item">
<i class="fa fa-folder-o text-danger"></i>
<a href="#"><small>4th July 2018</small></a>
</li>
</ul>
</div>
<hr>
<div class="news-image">
<img src="http://demo.beeteam368.com/vidorev/wp-content/uploads/2017/12/vanessa-bumbeers-117946-1500x844.jpg">
<p class="text-muted ">Yourself required no at thoughts delicate landlord it be.</p>
</div>
<div class="news-content">
<p>Sportsman do offending supported extremity breakfast by listening. Decisively advantages nor expression unpleasing she led met. Estate was tended ten boy nearer seemed. As so seeing latter he should thirty whence. Steepest speaking up attended it as. Made neat an on be gave show snug tore.</p>
<p>Did shy say mention enabled through elderly improve. As at so believe account evening behaved hearted is. House is tiled we aware. It ye greatest removing concerns an overcame appetite. Manner result square father boy behind its his. Their above spoke match ye mr right oh as first. Be my depending to believing perfectly concealed household. Point could to built no hours smile sense.</p>
<p>Your it to gave life whom as. Favourable dissimilar resolution led for and had. At play much to time four many. Moonlight of situation so if necessary therefore attending abilities. Calling looking enquire up me to in removal. Park fat she nor does play deal our. Procured sex material his offering humanity laughing moderate can. Unreserved had she nay dissimilar admiration interested. Departure performed exquisite rapturous so ye me resources.</p>
</div>
<hr>
</div>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
ul.timeline {
list-style-type: none;
position: relative;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
a:link, a:visited {
text-decoration: none;
}
