"Activity"
Bootstrap 3.3.0 Snippet by Walia5

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body style="background-color:#F0F6FA ;"> <div id="page-wrapper"> <div class="container-fluid dashborder" id="client"> <!-- Page Heading --> <div class="row" > <h2 style="text-align:center; font-size:30px; "> ACTIVITY FEED </h2> <div class="activity-feed"> <div class="feed-item"> <span style="color:#E2B104 ">03-Oct-2017</span> <div class="col-md-8 col-sm-12 col-xs-12 morningdetail"> <div class="col-md-8 col-sm-2 col-xs-8"> <h5><span style="color:#E2B104;"> Event Name</span></h5> </div> <div class="col-md-4 col-sm-10 col-xs-4"> <h5 style="color: #E2B104;"> Start Time: <span style="color: #B7B7B7"> 03:20 am </span></h5> </div> <div class="col-md-12 col-xs-12"> <h5 style="color: white; font-weight: normal;"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>  <span style="color: #B7B7B7">Mohali, Punjab</span></h5> </div> <div class="col-md-12 col-sm-12 col-xs-12"> <p style="color:#B7B7B7 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div> <div class="feed-item"> <span style="color:#E2B104">08-Oct-2017</span> <div class="col-md-8 col-sm-12 col-xs-12 morningdetail"> <div class="col-md-8 col-sm-8 col-xs-9"> <h5><span style="color:#E2B104;"> Event Name</span></h5> </div> <div class="col-md-4 col-sm-4 col-xs-3"> <h5 style="color: #E2B104;"> Start Time:<span style="color: #B7B7B7"> 03:20 am </span></h5> </div> <div class="col-md-12"> <h5 style="color: white; font-weight: normal;"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>  <span style="color: #B7B7B7">Mohali, Punjab</span></h5> </div> <div class="col-md-12 col-sm-12"> <p style="color:#B7B7B7 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div> </div> </div> </div> </div> </body>
.backevent { background-color: #3A3C45; border-radius: 12px; } .morningdetail { background-color: #3A3C45; border-radius: 12px; position: absolute; margin-left: -48px; margin-top: 45px; } .activity-feed { padding:30px; margin-top: 120px; } .activity-feed .feed-item { position: relative; padding-bottom: 220px; padding-left: 30px; border-left: 2px solid #E2B104; } .activity-feed .feed-item:after { content: ""; display: block; position: absolute; top: 0; left: -10px; width: 20px; height: 20px; border-radius: 13px; background: #fff; border: 1px solid #E2B104; }

Related: See More

Vue Argon Design System

Questions / Comments: