icon block

This bootstrap snippet called "icon block" 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

This is the HTML code for this bootstrap snippet

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

<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>

This is the CSS code for this bootstrap snippet

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

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;
}

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: May 16th 2015, 23:59

Views: 3.2K

Rated 5/5 based on 1 reviews