Bootstrap Snippet Cut Boxes with Font Awesome using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
    <div class="row div_margin">
    <div class="col-md-3 col-sm-6 col-xs-12 cut_box1">
      <div class="cut_box1a"> <i class="fa fa-life-ring fa-5x"></i>
        <p class="rouded_text">Reputation<br>
          management</p>
      </div>
    </div>
    <!-- /.col-lg-4 -->
    <div class="col-md-3 col-sm-6 col-xs-12 cut_box2">
      <div class="cut_box2a"><i class="fa fa-picture-o fa-5x"></i>
        <p class="rouded_text">Reputation<br>
          management</p>    
      </div>
    </div>
    <!-- /.col-lg-4 -->
    <div class="col-md-3 col-sm-6 col-xs-12 cut_box3">
      <div class="cut_box3a"><i class="fa fa-bar-chart fa-5x"></i>
        <p class="rouded_text">Reputation<br>
          management</p>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12 cut_box4">
      <div class="cut_box4a"><i class="fa fa-sitemap fa-5x"></i>
        <p class="rouded_text">Reputation<br>
          management</p>
      </div>
    </div>
    <!-- /.col-lg-4 --> 
  </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.box_head_align{text-align:center; margin-top:30px;}
.web_design_head{color:#1f86c5; font:normal 48px advent; text-transform:uppercase;}
.blue_head_text{ background:linear-gradient(to top, #fff, #fff, #fff 67%, #1f86c5 67%, #1f86c5, #1f86c5) repeat scroll 0 0 #fff; color:#7d7d7d; font-size:13px; border:1px solid #1f86c5; padding:15px 10px; box-shadow: 5px 5px rgba(193,193,193,.75); min-height:345px; margin-bottom:20px;
    
}
.img_text{font-size:23px; line-height:24px; color:#fff;}
.img_text2{font-size:13px; color:#fff;}
.img_content{text-align:justify; margin-top:10px;}
.img-round{
    margin:0 auto;
    font-size:60px !important;
    padding:25px;
    color:#1f86c5;
    -webkit-border-radius: 54px 55px 55px 54px/54px 54px 55px 55px;
    -moz-border-radius: 54px 55px 55px 54px/54px 54px 55px 55px;
    border-radius: 54px 55px 55px 54px/54px 54px 55px 55px;
    background-color: #fff;
    border: solid 1px #1f86c5;
    }
.div_margin
{
    margin-top:25px;
}
/******************web design box close******/
/******************portfolio slider*************/
.portfolio_bg{text-align:center; margin-top:30px; background:#eeeeee; padding:25px 15px;}
.portfolio_content{color:#7c7c7c;}
.rounded_box{ text-align:center; margin:5px auto;
    /*-webkit-border-radius: 5px; padding:25px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(251,174,23,0);
    border: solid 3px #e5e5e5;*/
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Cut Boxes with Font Awesome"
Bootstrap 3.3.0 Snippet by sanjayxperts

Related: See More

Questions / Comments:

"Cut Boxes with Font Awesome" Bootstrap 3.3.0 Snippet by sanjayxperts

Related: See More

Questions / Comments:

"Cut Boxes with Font Awesome"
Bootstrap 3.3.0 Snippet by sanjayxperts