icon block

Bootstrap snippet. icon block, this snippet was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code.
tags: icon,block

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container bootstrap snippet">
    <div class="row">
        <div class="col-md-9">
            <!-- Code -->
        	<div class="wp-example">
        		<div class="section-title-wr">
            		<h3 class="section-title left"><span>Icon blocks without background</span></h3>
                </div>
        
                <div class="row mt-40">
                    <div class="col-md-6 col-sm-6">
                        <div class="icon-block icon-block-1">
                            <div class="icon-block-item">
                                <i class="fa fa-list-alt "></i>
                            </div>
                            <div class="icon-block-body">
                                <h4 class="">Endless possibilities</h4>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 col-sm-6 ">
                        <div class="icon-block icon-block-1">
                            <div class="icon-block-item">
                                <i class="fa fa-desktop"></i>
                            </div>
                            <div class="icon-block-body">
                                <h4 class="">Over 60 page layouts</h4>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
                            </div>
                        </div>
                    </div>
                </div>
        
                <hr>
                <div class="section-title-wr">
                    <h3 class="section-title left"><span>Icon blocks with background</span></h3>
                </div>
                <div class="row mt-40">
                    <div class="col-md-6 col-sm-6">
                        <div class="icon-block icon-block-2">
                            <div class="icon-block-item base">
                                <i class="fa fa-list-alt "></i>
                            </div>
                            <div class="icon-block-body">
                                <h4 class="">Endless possibilities</h4>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 col-sm-6 ">
                        <div class="icon-block icon-block-2">
                            <div class="icon-block-item base">
                                <i class="fa fa-desktop"></i>
                            </div>
                            <div class="icon-block-body">
                                <h4 class="">Over 60 page layouts</h4>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <div class="icon-block icon-block-2">
                            <div class="icon-block-item base-alt">
                                <i class="fa fa-list-alt "></i>
                            </div>
                            <div class="icon-block-body">
                                <h4 class="">Endless possibilities</h4>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 col-sm-6 ">
                        <div class="icon-block icon-block-2">
                            <div class="icon-block-item base-alt">
                                <i class="fa fa-desktop"></i>
                            </div>
                            <div class="icon-block-body">
                                <h4 class="">Over 60 page layouts</h4>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
                            </div>
                        </div>
                    </div>
                </div>
        
                <hr>
                <div class="section-title-wr">
                    <h3 class="section-title left"><span>Circled icon blocks with background - Horizontal</span></h3>
                </div>
                <div class="row mt-40">
                    <div class="col-md-6 col-sm-6">
                        <div class="icon-block icon-block-3">
                            <div class="icon-block-item light">
                                <i class="fa fa-list-alt "></i>
                            </div>
                            <div class="icon-block-body">
                                <h4 class="">Endless possibilities</h4>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 col-sm-6 ">
                        <div class="icon-block icon-block-3">
                            <div class="icon-block-item light">
                                <i class="fa fa-desktop"></i>
                            </div>
                            <div class="icon-block-body">
                                <h4 class="">Over 60 page layouts</h4>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <div class="icon-block icon-block-3">
                            <div class="icon-block-item dark">
                                <i class="fa fa-list-alt "></i>
                            </div>
                            <div class="icon-block-body">
                                <h4 class="">Endless possibilities</h4>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6 col-sm-6 ">
                        <div class="icon-block icon-block-3">
                            <div class="icon-block-item dark">
                                <i class="fa fa-desktop"></i>
                            </div>
                            <div class="icon-block-body">
                                <h4 class="">Over 60 page layouts</h4>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>  
        </div>
	</div>
</div>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

body{
    margin-top:20px;
}
.icon-block {
    margin-bottom: 20px;
}
.icon-block.icon-block-1 .icon-block-item {
    width: 20%;
    display: table-cell;
    vertical-align: top;
    font-size: 64px;
    text-align: center;
    color: #333;
}
.icon-block.icon-block-1 .icon-block-body {
    display: table-cell;
    vertical-align: top;
    padding-left: 15px;
}
.icon-block.icon-block-1 .icon-block-body .title {
    margin-bottom: 5px;
    color: #333;
}
.icon-block.icon-block-1 .icon-block-body p {
    margin: 0;
}
.icon-block.icon-block-2 .icon-block-item {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 2px;
    display: block;
    float: left;
    font-size: 46px;
    text-align: center;
}
.icon-block.icon-block-2 .icon-block-body {
    padding-left: 115px;
}
.icon-block.icon-block-2 .icon-block-body .title {
    margin-bottom: 5px;
    color: #333;
}
.icon-block.icon-block-2 .icon-block-body p {
    margin: 0;
}
.icon-block.icon-block-3 .icon-block-item {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 100px;
    display: block;
    float: left;
    font-size: 46px;
    text-align: center;
    color: #333;
}
.icon-block.icon-block-3 .icon-block-body {
    padding-left: 115px;
}
.icon-block.icon-block-3 .icon-block-body .title {
    margin-bottom: 5px;
    color: #333;
}
.icon-block.icon-block-3 .icon-block-body p {
    margin: 0;
}

.base {
  background: #3498db;
  color: #fff !important;
}

.base-alt {
  background: #9cd70e;
  color: #fff;
}

.light {
  background: #ecf0f1;
  color: #333;
}

.dark {
  background: #131313;
  color: #fff !important;
}

                                    

Similar snippets

Bootstrap snippet Blog image Gallery Widget

Blog image Gallery Widget

View

Bootstrap snippet user cards block

user cards block

View

Bootstrap snippet dashboard user block

dashboard user block

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: May 16th 2015, 23:59

Views: 3.4K

Rated 5/5 based on 1 reviews