Icon Boxes

Icon Boxes are a great addition to pages for listing key unique selling points, or to highlight your website’s main areas of content. They can be used to draw attention to important facts, moments, add contact dates, information, and anything else you think of.

Example

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Ideas and Concepts

We work to figure out ways to help your business grow through all platforms.

Read more 
                                                        
<!-- Icon Boxes -->
<div class="icon-box">
    <div class="icon icon-primary mb-4">
        <i class="far fa-lightbulb"></i>
    </div>
    <h5 class="icon-box-title">Ideas and Concepts</h5>
    <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
    <a href="#" class="btn btn-link text-dark">Read more</a>
</div>
<!-- End of Icon Boxes -->
Text alignment

Easily realign Icon Boxes text with .text-left, .text-center and .text-right classes.

Ideas and Concepts

We work to figure out ways to help your business grow through all platforms.

Read more
Powerful Techniques

We work to figure out ways to help your business grow through all platforms.

Read more
100% Satisfaction

We work to figure out ways to help your business grow through all platforms.

Read more 
                                                        
<!-- Icon Boxes -->
<div class="icon-box">
    <div class="icon icon-primary mb-4">
        <i class="far fa-lightbulb"></i>
    </div>
    <h5 class="icon-box-title">Ideas and Concepts</h5>
    <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
    <a href="#" class="btn btn-link text-dark">Read more</a>
</div>
<!-- End of Icon Boxes -->
<!-- Icon Boxes -->
<div class="icon-box text-center">
    <div class="icon icon-secondary mb-4">
        <i class="far fa-hand-point-right"></i>
    </div>
    <h5 class="icon-box-title">Powerful Techniques</h5>
    <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
    <a href="#" class="btn btn-link text-dark">Read more</a>
</div>
<!-- End of Icon Boxes -->                                                           
 <!-- Icon Boxes -->
<div class="icon-box text-right">
    <div class="icon icon-tertiary mb-4">
        <i class="far fa-user"></i>
    </div>
    <h5 class="icon-box-title">100% Satisfaction</h5>
    <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
    <a href="#" class="btn btn-link text-dark">Read more</a>
</div>
<!-- End of Icon Boxes -->
Side icons

You can put the icon to the right or left of the text with Flexbox

Ideas and Concepts

We work to figure out ways to help your business grow through all platforms.

Read more
Ideas and Concepts

We work to figure out ways to help your business grow through all platforms.

Read more 
                                                        
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
Sizes

Fancy larger or smaller icons? Add .icon-lg or .icon-sm for additional sizes.

Ideas and Concepts

We work to figure out ways to help your business grow through all platforms.

Read more
Powerful Techniques

We work to figure out ways to help your business grow through all platforms.

Read more
100% Satisfaction

We work to figure out ways to help your business grow through all platforms.

Read more 
                                                        
<!-- Icon Boxes -->
<div class="icon-box">
    <div class="icon icon-shape icon-lg icon-shape-secondary mb-4">
        <i class="fas fa-globe-europe"></i>
    </div>
    <h5 class="icon-box-title">Ideas and Concepts</h5>
    <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
    <a href="#" class="btn btn-link text-dark">Read more</a>
</div>
<!-- End of Icon Boxes -->

<!-- Icon Boxes -->
<div class="icon-box text-center">
    <div class="icon icon-shape icon-shape-secondary mb-4">
        <i class="fas fa-globe-europe"></i>
    </div>
    <h6 class="icon-box-title">Powerful Techniques</h6>
    <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
    <a href="#" class="btn btn-link text-dark">Read more</a>
</div>
<!-- End of Icon Boxes -->

<!-- Icon Boxes -->
<div class="icon-box text-right">
    <div class="icon icon-shape icon-sm icon-shape-secondary mb-4">
        <i class="fas fa-globe-europe"></i>
    </div>
    <h6 class="icon-box-title">100% Satisfaction</h6>
    <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
    <a href="#" class="btn btn-link text-dark">Read more</a>
</div>
<!-- End of Icon Boxes -->
Shapes

Use .icon-shape for square shape and .rounded-circle, .organic-radius classes to create awesome icons.

Also you can add svg to your icon shape.

                                                        
<div class="icon icon-shape icon-shape-primary">
    <i class="fas fa-fire-alt"></i>
</div>

<div class="icon icon-shape icon-shape-secondary rounded-circle">
    <i class="fas fa-bomb"></i>
</div>

<div class="icon icon-shape icon-shape-tertiary organic-radius">
    <div class="z-2"><i class="fas fa-cubes"></i></div>
</div>

<div class="icon icon-danger">
    <div class="organic-shape scale-1">
        <svg class="organic-shape-danger" width="90" height="90" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
            <g transform="translate(300,300)">
                <path d="M115.7,-146.8C141.8,-115.9,149.2,-71.8,157.7,-27.3C166.2,17.3,175.7,62.1,166.4,112.8C157.1,163.4,128.8,219.8,90.1,223.5C51.4,227.1,2.3,177.9,-45.8,150C-93.9,122,-140.9,115.2,-152.3,90.4C-163.7,65.6,-139.5,22.6,-125.9,-16.7C-112.4,-55.9,-109.5,-91.5,-90.3,-123.7C-71.1,-155.8,-35.6,-184.4,4.6,-189.9C44.8,-195.4,89.6,-177.7,115.7,-146.8Z" />
            </g>
        </svg>   
    </div>
    <div class="z-2"><i class="fas fa-fingerprint"></i></div>
</div>
Image as a shape

You can now use your own images to be used as the background of either of these shapes.

                                                        
<div class="icon image-shape icon-white mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
    <i class="fas fa-brain"></i>
</div>

<div class="icon image-shape icon-white rounded-circle mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
    <i class="fas fa-bomb"></i>
</div>

<div class="icon image-shape icon-white organic-radius mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
    <i class="fas fa-meteor"></i>
</div>
Parallax image as a shape

Use your own images as the parallax-background of either of these shapes.

                                                        
<div class="icon image-shape icon-white icon-parallax jarallax mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
    <i class="fas fa-mountain"></i>
</div>

<div class="icon image-shape rounded-circle icon-white icon-parallax jarallax mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
    <i class="fas fa-bomb"></i>
</div>

<div class="icon image-shape organic-radius icon-white icon-parallax jarallax mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
    <i class="fab fa-centercode"></i>
</div>
Bordered
                                                        
<div class="icon image-shape icon-secondary mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
    <span class="icon-bordered"><i class="fas fa-award"></i></span>
</div>
<div class="icon image-shape icon-info rounded-circle mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
    <span class="icon-bordered"><i class="fab fa-fly"></i></span>
</div>
<div class="icon image-shape icon-danger organic-radius mr-4" data-background="../../assets/img/icon-box/icon-image-3.jpg">
    <span class="icon-bordered"><i class="far fa-lightbulb"></i></span>
</div>
Cards

You can use also cards with icons and some text.

Ideas and Concepts

Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.

Read more
Powerful Techniques

Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.

Read more
100% Satisfaction

Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.

Read more 
                                                        
<!-- Icon box -->
<div class="card shadow-soft border-light mb-4 mb-lg-0">
    <div class="card-body p-4 p-xl-5">
        <div class="icon icon-shape icon-shape-primary rounded-circle">
            <i class="far fa-lightbulb"></i>
        </div>
        <h5 class="my-3">Ideas and Concepts</h5>
        <p>Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.</p>
        <a href="#" class="btn btn-sm btn-primary animate-up-1">Read more</a>
    </div>
</div>
<!-- End of Icon box -->
100% Satisfaction

Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.

Read More
100% Satisfaction

Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.

Read More 
                                                        
<!-- Icon Box -->
<div class="card shadow-soft border-light text-left mb-4 mb-md-0">
    <div class="card-body p-4 p-sm-5">
        <div class="d-flex px-3">
            <div>
                <div class="icon icon-tertiary">
                    <i class="far fa-grin-stars"></i>
                </div>
            </div>
            <div class="pl-3 pl-sm-4">  
                <h5>100% Satisfaction</h5>
                <p>Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.</p>
                <a href="#" class="btn btn-link text-tertiary btn-icon">
                    <span class="btn-inner-icon"><i class="fas fa-link"></i></span>
                    <span class="btn-inner-text font-weight-bold">Read More</span>
                </a>
            </div>
        </div>
    </div>
</div>
<!-- End of Icon Box -->
Icon Boxes with image background
Ideas and Concepts

We work to figure out ways to help your business grow through all platforms.

Ideas and Concepts

We work to figure out ways to help your business grow through all platforms.

Ideas and Concepts

We work to figure out ways to help your business grow through all platforms.

                                                        
<!-- Icon Boxes -->
<div class="icon-box image-box overlay-dark rounded text-white p-5" data-background="../../assets/img/icon-box/icon-image-2.jpg">
    <div class="icon-box-body">
        <div class="icon icon-shape icon-shape-white rounded-circle mb-4">
            <i class="far fa-lightbulb"></i>
        </div>
        <h6 class="icon-box-title text-white">Ideas and Concepts</h6>
        <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
        <button type="button" class="btn btn-sm btn-outline-white">Primary</button>
    </div>
</div>
<!-- End of Icon Boxes -->
Icon Boxes with parallax image
Ideas and Concepts

We work to figure out ways to help your business grow through all platforms.

Ideas and Concepts

We work to figure out ways to help your business grow through all platforms.

Ideas and Concepts

We work to figure out ways to help your business grow through all platforms.

                                                        
<!-- Icon Boxes -->
<div class="icon-box overlay-dark big-parallax rounded jarallax text-white p-5" data-background="../../assets/img/icon-box/icon-image-2.jpg">
    <div class="icon-box-body">
        <div class="icon icon-shape icon-shape-white rounded-circle mb-4">
            <i class="far fa-lightbulb"></i>
        </div>
        <h6 class="icon-box-title text-white">Ideas and Concepts</h6>
        <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
        <button type="button" class="btn btn-sm btn-outline-white">Primary</button>
    </div>
</div>
<!-- End of Icon Boxes -->
Icon Boxes with border image

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

Ideas and Concepts

We work to figure out ways to help your business grow through all platforms.

Read More
Powerful Techniques

We work to figure out ways to help your business grow through all platforms.

Read More
100% Satisfaction

We work to figure out ways to help your business grow through all platforms.

Read More 
                                                        
<!-- Icon Boxes -->
<div class="icon-box image-box rounded p-2" data-background="../../assets/img/icon-box/icon-image-1.jpg">
    <div class="icon-box-body rounded p-5">
        <div class="icon icon-primary mb-4">
            <i class="fas fa-fingerprint"></i>
        </div>
        <h6 class="icon-box-title">Ideas and Concepts</h6>
        <p class="icon-box-text">We work to figure out ways to help your business grow through all platforms.</p>
        <a href="#" class="btn btn-link text-primary btn-icon">
            <span class="btn-inner-icon"><i class="fas fa-link"></i></span>
            <span class="btn-inner-text">Read More</span>
        </a>
    </div>
</div>
<!-- End of Icon Boxes -->