Icon boxes Pro
Use icon boxes to indicate multiple features
Icon boxes
Round Shape
Square Shape
Organic Shape
Simple Icon
<div class="row">
<div class="col-12 col-sm-4 col-lg-3 text-center mb-4 mb-lg-0">
<!-- Icon box -->
<div class="icon icon-shape icon-shape-secondary rounded-circle">
<span class="far fa-lightbulb"></span>
</div>
<h5 class="my-3">Round Shape</h5>
<!-- End of Icon box -->
</div>
<div class="col-12 col-sm-4 col-lg-3 text-center mb-4 mb-lg-0">
<!-- Icon box -->
<div class="icon icon-shape icon-shape-secondary">
<span class="fas fa-bomb"></span>
</div>
<h5 class="my-3">Square Shape</h5>
<!-- End of Icon box -->
</div>
<div class="col-12 col-sm-4 col-lg-3 text-center mb-4 mb-lg-0">
<!-- Icon box -->
<div class="icon icon-shape icon-shape-secondary organic-radius">
<span class="far fa-dizzy"></span>
</div>
<h5 class="my-3">Organic Shape</h5>
<!-- End of Icon box -->
</div>
<div class="col-12 col-sm-4 col-lg-3 text-center mb-4 mb-lg-0">
<!-- Icon box -->
<div class="icon icon-primary">
<span class="fas fa-burn"></span>
</div>
<h5 class="my-3">Simple Icon</h5>
<!-- End of Icon box -->
</div>
</div>Icon boxes sizing
Use icon-lg or icon-sm to make the size larger or smaller:
Icon Large
Default Icon
Icon Small
<div class="row">
<div class="col-12 col-sm-4 col-lg-3 mb-4 mb-lg-0">
<div class="icon icon-shape icon-lg icon-shape-secondary">
<span class="fas fa-globe-europe"></span>
</div>
<h5 class="my-3">Icon Large</h5>
</div>
<div class="col-12 col-sm-4 col-lg-3 mb-4 mb-lg-0">
<div class="icon icon-shape icon-shape-secondary">
<span class="fas fa-globe-europe"></span>
</div>
<h5 class="my-3">Default Icon</h5>
</div>
<div class="col-12 col-sm-4 col-lg-3 mb-4 mb-lg-0">
<div class="icon icon-shape icon-sm icon-shape-secondary">
<span class="fas fa-globe-europe"></span>
</div>
<h5 class="my-3">Icon Small</h5>
</div>
</div>Side icons
Left Icon
Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.
Right Icon
Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.
<div class="row">
<div class="col-12 col-sm-6 mb-4 mb-lg-0">
<div class="d-flex px-3">
<div>
<div class="icon icon-sm icon-secondary">
<span class="fas fa-chess-rook"></span>
</div>
</div>
<div class="pl-4">
<h5>Left Icon</h5>
<p>Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 mb-4 mb-lg-0">
<div class="d-flex px-3">
<div class="pr-4 text-right">
<h5>Right Icon</h5>
<p>Designed with the latest design trends in mind. Our product feels modern, creative, and beautiful.</p>
</div>
<div>
<div class="icon icon-sm icon-secondary">
<span class="fas fa-chess-rook"></span>
</div>
</div>
</div>
</div>
</div>Card icons
<div class="row">
<div class="col-12 col-sm-6">
<div class="card border-light p-1 p-md-4 mb-4 mb-lg-0">
<div class="card-body">
<div class="icon icon-shape icon-shape-primary rounded-circle mb-4">
<span class="far fa-lightbulb"></span>
</div>
<h5 class="mb-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>
</div>
<div class="col-12 col-sm-6">
<div class="card border-light p-1 p-md-4 mb-4 mb-lg-0">
<div class="card-body">
<div class="icon icon-shape icon-shape-primary rounded mb-4">
<span class="fas fa-chess-queen"></span>
</div>
<h5 class="mb-3">Powerful Techniques</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>
</div>
</div>Card icons 2
<div class="row">
<div class="col-12">
<div class="card border-light text-left p-1 p-md-4 mb-4">
<div class="card-body">
<div class="d-flex px-1 px-md-3">
<div>
<div class="icon icon-primary"><span class="far fa-grin-stars"></span></div>
</div>
<div class="pl-2 pl-md-3">
<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-sm btn-primary">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card border-light text-right p-1 p-md-4 mb-4 mb-lg-0">
<div class="card-body">
<div class="d-flex px-1 px-md-3">
<div class="pr-2 pr-md-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-sm btn-primary">Read More</a>
</div>
<div>
<div class="icon icon-primary"><span class="far fa-grin-stars"></span></div>
</div>
</div>
</div>
</div>
</div>
</div>Steps
Use these components to indicate a numerotated feature list:
1
Goal identification
Where I work with the client to determine what goals the site needs.
2
Content creation
Now that we have a bigger picture of the site in mind, we can start.
3
Testing
We've got all your pages and defined how they display to the site visitor.
<div class="row">
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-light rounded-circle mb-4">
<span class="step-number text-primary rounded-circle border-white">1</span>
<span class="step-icon icon-primary"><span class="fas fa-bullseye"></span></span>
</div>
<h2 class="h5 step-title">Goal identification</h2>
<p>Where I work with the client to determine what goals the site needs.</p>
</div>
<!-- End of Step -->
</div>
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-light rounded-circle mb-4">
<span class="step-number text-primary rounded-circle border-white">2</span>
<span class="step-icon icon-primary"><span class="fas fa-code-branch"></span></span>
</div>
<h2 class="h5 step-title">Content creation</h2>
<p>Now that we have a bigger picture of the site in mind, we can start.</p>
</div>
<!-- End of Step -->
</div>
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-light rounded-circle mb-4">
<span class="step-number text-primary rounded-circle border-white">3</span>
<span class="step-icon icon-primary"><span class="fas fa-award"></span></span>
</div>
<h2 class="h5 step-title">Testing</h2>
<p>We've got all your pages and defined how they display to the site visitor.</p>
</div>
<!-- End of Step -->
</div>
</div>Organic shape
1
Goal identification
Where I work with the client to determine what goals the site needs.
2
Content creation
Now that we have a bigger picture of the site in mind, we can start.
3
Testing
We've got all your pages and defined how they display to the site visitor.
<div class="row">
<div class="col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-light organic-radius mb-4">
<span class="step-number text-primary border-white">1</span>
<span class="icon-primary"><span class="fas fa-bullseye"></span></span>
</div>
<h5 class="step-title">Goal identification</h5>
<p>Where I work with the client to determine what goals the site needs.</p>
</div>
<!-- End of Step -->
</div>
<div class="col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-light organic-radius mb-4">
<span class="step-number text-primary border-white">2</span>
<span class="icon-primary"><span class="fas fa-code-branch"></span></span>
</div>
<h5 class="step-title">Content creation</h5>
<p>Now that we have a bigger picture of the site in mind, we can start.</p>
</div>
<!-- End of Step -->
</div>
<div class="col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-light organic-radius mb-4">
<span class="step-number border-white">3</span>
<span class="icon-primary"><span class="fas fa-award"></span></span>
</div>
<h5 class="step-title">Testing</h5>
<p>We've got all your pages and defined how they display to the site visitor.</p>
</div>
<!-- End of Step -->
</div>
</div>Square shape
1
Goal identification
Where I work with the client to determine what goals the site needs.
2
Content creation
Now that we have a bigger picture of the site in mind, we can start.
3
Testing
We've got all your pages and defined how they display to the site visitor.
<div class="row">
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-light rounded text-primary mb-4">
<span class="step-number border-white">1</span>
<span class="step-icon icon-primary"><span class="fas fa-bullseye"></span></span>
</div>
<h2 class="h5 step-title">Goal identification</h2>
<p>Where I work with the client to determine what goals the site needs.</p>
</div>
<!-- End of Step -->
</div>
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-light rounded text-primary mb-4">
<span class="step-number border-white">2</span>
<span class="step-icon icon-primary"><span class="fas fa-code-branch"></span></span>
</div>
<h2 class="h5 step-title">Content creation</h2>
<p>Now that we have a bigger picture of the site in mind, we can start.</p>
</div>
<!-- End of Step -->
</div>
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-light rounded text-primary mb-4">
<span class="step-number border-white">3</span>
<span class="step-icon icon-primary"><span class="fas fa-award"></span></span>
</div>
<h2 class="h5 step-title">Testing</h2>
<p>We've got all your pages and defined how they display to the site visitor.</p>
</div>
<!-- End of Step -->
</div>
</div>Colors
1
Primary color
Now that we have a bigger picture of the site in mind, we can start.
2
Secondary color
Now that we have a bigger picture of the site in mind, we can start.
3
Tertiary color
Now that we have a bigger picture of the site in mind, we can start.
4
Info color
Now that we have a bigger picture of the site in mind, we can start.
5
Success color
Now that we have a bigger picture of the site in mind, we can start.
6
Danger color
Now that we have a bigger picture of the site in mind, we can start.
8
Dark color
Now that we have a bigger picture of the site in mind, we can start.
9
Gray color
Now that we have a bigger picture of the site in mind, we can start.
<div class="row">
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-primary rounded-circle text-white mb-4">
<span class="step-number rounded-circle border-lighter">1</span>
<span class="step-icon icon-white"><span class="fas fa-assistive-listening-systems"></span></span>
</div>
<h2 class="h5 step-title">Primary color</h2>
<p>Now that we have a bigger picture of the site in mind, we can start.</p>
</div>
<!-- End of Step -->
</div>
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-secondary rounded-circle text-white mb-4">
<span class="step-number rounded-circle border-lighter">2</span>
<span class="step-icon icon-white"><span class="fas fa-highlighter"></span></span>
</div>
<h2 class="h5 step-title">Secondary color</h2>
<p>Now that we have a bigger picture of the site in mind, we can start.</p>
</div>
<!-- End of Step -->
</div>
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-tertiary rounded-circle text-white mb-4">
<span class="step-number rounded-circle border-lighter">3</span>
<span class="step-icon icon-white"><span class="fas fa-fire"></span></span>
</div>
<h2 class="h5 step-title">Tertiary color</h2>
<p>Now that we have a bigger picture of the site in mind, we can start.</p>
</div>
<!-- End of Step -->
</div>
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-info rounded-circle text-white mb-4">
<span class="step-number rounded-circle border-lighter">4</span>
<span class="step-icon icon-white"><span class="fas fa-assistive-listening-systems"></span></span>
</div>
<h2 class="h5 step-title">Info color</h2>
<p>Now that we have a bigger picture of the site in mind, we can start.</p>
</div>
<!-- End of Step -->
</div>
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-success rounded-circle text-white mb-4">
<span class="step-number rounded-circle border-lighter">5</span>
<span class="step-icon icon-white"><span class="fas fa-highlighter"></span></span>
</div>
<h2 class="h5 step-title">Success color</h2>
<p>Now that we have a bigger picture of the site in mind, we can start.</p>
</div>
<!-- End of Step -->
</div>
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-danger rounded-circle text-white mb-4">
<span class="step-number rounded-circle border-lighter">6</span>
<span class="step-icon icon-white"><span class="fas fa-fire"></span></span>
</div>
<h2 class="h5 step-title">Danger color</h2>
<p>Now that we have a bigger picture of the site in mind, we can start.</p>
</div>
<!-- End of Step -->
</div>
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-dark rounded-circle text-white mb-4">
<span class="step-number rounded-circle border-lighter">8</span>
<span class="step-icon icon-white"><span class="fas fa-highlighter"></span></span>
</div>
<h2 class="h5 step-title">Dark color</h2>
<p>Now that we have a bigger picture of the site in mind, we can start.</p>
</div>
<!-- End of Step -->
</div>
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape shape-gray rounded-circle text-white mb-4">
<span class="step-number rounded-circle border-lighter">9</span>
<span class="step-icon icon-white"><span class="fas fa-fire"></span></span>
</div>
<h2 class="h5 step-title">Gray color</h2>
<p>Now that we have a bigger picture of the site in mind, we can start.</p>
</div>
<!-- End of Step -->
</div>
</div>Bordered
1
Discussion
Where I work with the client to determine what goals the site needs.
3
Production
Now that we have a bigger picture of the site in mind, we can start.
2
Prototyping
We've got all your pages and defined how they display to the site visitor.
<div class="row">
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape bordered border-primary rounded-circle mb-4">
<span class="step-number rounded-circle text-primary border-primary">1</span>
<span class="step-icon icon-primary"><span class="fas fa-assistive-listening-systems"></span></span>
</div>
<h2 class="h5 step-title">Discussion</h2>
<p>Where I work with the client to determine what goals the site needs.</p>
</div>
<!-- End of Step -->
</div>
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape bordered border-tertiary organic-radius mb-4">
<span class="step-number text-tertiary border-tertiary">3</span>
<span class="step-icon icon-tertiary"><span class="fas fa-fire"></span></span>
</div>
<h2 class="h5 step-title">Production</h2>
<p>Now that we have a bigger picture of the site in mind, we can start.</p>
</div>
<!-- End of Step -->
</div>
<div class="col-12 col-sm-6 col-md-4">
<!-- Step -->
<div class="step text-center">
<div class="step-shape bordered border-secondary rounded mb-4">
<span class="step-number text-secondary border-secondary">2</span>
<span class="step-icon icon-secondary"><span class="fas fa-highlighter"></span></span>
</div>
<h2 class="h5 step-title">Prototyping</h2>
<p>We've got all your pages and defined how they display to the site visitor.</p>
</div>
<!-- End of Step -->
</div>
</div>