How to create a service box section?

If you want to create this type of service box section with bootstrap then it is very simple. Let’s Start.

HTML Mark up:

<div class="container">
 <div class="row">
  <div class="col-md-4">
   <div class="box-section">
     <i class="fa fa-adjust"></i>
     <h1>Lorem ipsum dolor</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, ipsam.</p>
   </div>
</div>
   <div class="col-md-4">
     <a href="">
      <div class="box-section">
       <i class="fa fa-automobile"></i>
       <h1>This box Made With Anchor Tage</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, ipsam.</p>
      </div>
     </a>
    </div>
    <div class="col-md-4">
      <div class="box-section">
         <i class="fa fa-bell-o"></i>
         <h1>Lorem ipsum dolor</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, ipsam.</p>
       </div>
      </div>
   </div>
</div>

 

CSS Style:
.box-section {
    border: 1px solid #D3D3D3;
    margin: 50px 0;
    border-radius: 3px;
    position: relative;
    width: 100%;
    margin: 100px 0;
    min-height: 250px;
.box-section i {
    position: absolute;
    left: 50%;
    top: 0;
    width: 70px;
    height: 70px;
    background: #008000;
    text-align: center;
    border-radius: 50px;
    line-height: 70px;
    color: #fff;
    font-size: 30px;
    margin-left: -35px;
    margin-top: -35px;
    }

.box-section {
    text-align: center;
    padding: 55px 10px;

.box-section h1 {
    font-weight: 600;
    font-size: 27px;
    margin-bottom: 20px;

.box-section p {
    font-size: 13px;
    font-weight: 600;
}
Share it!

2 thoughts on “How to create a service box section?

  1. Just want to say your article is as surprising.

    The clarity to your publish is simply excellent and that i can assume you are an expert in this subject.
    Well with your permission let me to grasp your RSS feed to stay updated with approaching post.
    Thanks 1,000,000 and please carry on the gratifying work.

Leave a Reply

Your email address will not be published. Required fields are marked *