<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 ----------> <div class="container"> <div class="row"> <div class="col-lg-12"> <h3>About Company</h3> <ul class="about-company col-lg-12"> <li class="col-lg-12"> <div class="about-time col-lg-4 col-md-4 col-sm-4 col-xs-4"> <p>1990</p> </div> <div class="about-description col-lg-8 col-md-8 col-sm-8 col-xs-8"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> </li> <li class="col-lg-12"> <div class="about-time col-lg-4 col-md-4 col-sm-4 col-xs-4"> <p>1990</p> </div> <div class="about-description col-lg-8 col-md-8 col-sm-8 col-xs-8"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> </li> <li class="col-lg-12"> <div class="about-time col-lg-4 col-md-4 col-sm-4 col-xs-4"> <p>1990</p> </div> <div class="about-description col-lg-8 col-md-8 col-sm-8 col-xs-8"> <h3>Headingи</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> </li> </ul> </div> </div> </div>

.about-company{ list-style: none; padding: 0; position: relative; } .about-company{ position: relative; } .about-company:before { left: 50%; } .about-company:before { top: 0; bottom: 0; position: absolute; content: ""; width: 2px; background-color: #ccc; left: 6%; } .about-time{ border: 3px solid #ccc; border-radius: 50%; padding: 20px; height: 100px; width: 100px; background-color: #fff; display: table-cell; vertical-align: middle; } .about-time p{ margin: 0px auto; padding: 12px; } .about-description{ padding: 20px; }