<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="about-section">
<div class="container">
<div class="col-md-7 about-left">
<div class="site-title">
<h3>Nunc egestas leo ligula</h3>
<p>Duis eleifend, quam hendrerit luctus malesuada, erat odio eleifend urna, sed iaculis risus mauris at dui. Proin porttitor nibh sit amet lacinia ullamcorper. Quisque tortor metus, pulvinar iaculis gravida vel, iaculis nec nunc. In eget ligula pharetra, pretium dui vitae, porttitor tellus.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec at pharetra dolor. Proin commodo neque eu nunc lacinia pharetra. Suspendisse potenti. Nam tristique sollicitudin urna sed interdum. Integer eu dui quis purus mattis maximus</p>
<p>Duis eleifend, quam hendrerit luctus malesuada, erat odio eleifend urna, sed iaculis risus mauris at dui. Proin porttitor nibh sit amet lacinia ullamcorper. Quisque tortor metus, pulvinar iaculis gravida vel, iaculis nec nunc. In eget ligula pharetra, pretium dui vitae, porttitor tellus.</p>
</div>
</div>
<div class="col-md-5 about-right">
<div class="about-right-part1">
<div class="col-md-1 num">
<h5>01</h5>
</div>
<div class="col-md-11 about-right-text">
<h4>Praesent quis libero</h4>
<p>Duis eleifend, quam hendrerit luctus malesuada, erat odio eleifend urna, sed iaculis risus mauris at dui. Proin porttitor nibh sit amet lacinia ullamcorper</p>
</div>
<div class="clearfix"></div>
</div>
<div class="about-right-part2">
<div class="col-md-1 num">
<h5>02</h5>
</div>
<div class="col-md-11 about-right-text">
<h4>Hendrerit luctus malesua</h4>
<p>Duis eleifend, quam hendrerit luctus malesuada, erat odio eleifend urna, sed iaculis risus mauris at dui. Proin porttitor nibh sit amet lacinia ullamcorper</p>
</div>
<div class="clearfix"></div>
</div>
<div class="about-right-part3">
<div class="col-md-1 num">
<h5>03</h5>
</div>
<div class="col-md-11 about-right-text">
<h4>Proin commodo neque</h4>
<p>Duis eleifend, quam hendrerit luctus malesuada, erat odio eleifend urna, sed iaculis risus mauris at dui. Proin porttitor nibh sit amet lacinia ullamcorper</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
.about-section {
padding: 4em 0;
}
.site-title h3 {
font-size: 3em;
}
.site-title p {
color: #000;
font-size: 14px;
line-height: 27px;
}
.about-right h4 {
color: #000;
font-size: 25px;
margin-bottom: 8px;
}
.about-right p {
color: #000;
font-size: 14px;
line-height: 27px;
}
.about-right h5 {
color: #fff;
background: #b71b2b;
padding: 5px 8px;
font-size: 22px;
}
.num {
padding: 0;
}
