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