bootstrap3 card sample3 アイコン付カードデザイン

<div class="box">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <div class="box-part text-center">
          <i class="fa fa-twitter fa-3x" aria-hidden="true"></i>
          <div class="title">
            <h3>Twitter</h3>
          </div>
          <div class="text">
            <span>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.</span>
          </div>
          <a href="#">Learn More</a>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <div class="box-part text-center">
          <i class="fa fa-facebook fa-3x" aria-hidden="true"></i>
          <div class="title">
            <h3>Facebook</h3>
          </div>
          <div class="text">
            <span>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.</span>
          </div>
          <a href="#">Learn More</a>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <div class="box-part text-center">
          <i class="fa fa-google-plus fa-3x" aria-hidden="true"></i>
          <div class="title">
            <h3>Google</h3>
          </div>
          <div class="text">
            <span>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.</span>
          </div>
          <a href="#">Learn More</a>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
body {
  background: #f2f2f2;
}

.box {
  padding: 60px 0px;
}

.box-part {
  background: #FFF;
  border-radius: 10px;
  padding: 60px 10px;
  margin: 30px 0px;
}

.text {
  margin: 20px 0px;
}

.fa {
  color: #4183D7;
}

</style>