Bootstrap Cards:

Bootstrap Cards with Animating Icons

Cards are literally a small rectangle or any other shape which is associated to a singular thought. These elements usually offer a summarized version of a larger page with more details. In other words, cards are full of interesting and interactive features like images, links, buttons, texts, etc that allow the users to be directed to the respective page if they were interested in the topic. They are perfect for showcasing your posts or even different sections of your website. For example, you can have the different categories bound to cards with icons and place in the page where the visitors are more likely to see. With that said, like any other component of a website, cards can also be stylized and designed in thousands of different ways. Just remember that all the different designs and features you add to your card suggests one main thing and that is clicking on the card to discover more of that content.

Here in this post, we have some black cards with animation and a rectangular shape. The dark theme in this Bootstrap black card is perfect for the eyes as it avoids eye strain and the turquoise really stands out on the background. The Bootstrap animating cards also have a hover effect where the card lights up, the icon starts to spin and zoom in, and a page flip effect appears on the top right corner.

Bootstrap Black Card

Card with Icons

Bootstrap Animating Cards

Black Card with Animation

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 Services-tab item">
                <div class="folded-corner service_tab_1">
                    <div class="text">
                        <i class="fa fa-image fa-5x fa-icon-image"></i>
                        <h3 class="item-title">
                            Designing
                        </h3>
                        <p>
                            This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides,
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 Services-tab item">
                <div class="folded-corner service_tab_1">
                    <div class="text">
                        <i class="fa fa-lightbulb-o fa-5x fa-icon-image"></i>
                        <h3 class="item-title">
                            Developing
                        </h3>
                        <p>
                            This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides,
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 Services-tab item">
                <div class="folded-corner service_tab_1">
                    <div class="text">
                        <i class="fa fa-truck fa-5x fa-icon-image"></i>
                        <h3 class="item-title">
                            Marketing
                        </h3>
                        <p>
                            This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides,
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 Services-tab item">
                <div class="folded-corner service_tab_1">
                    <div class="text">
                        <i class="fa fa-diamond fa-5x fa-icon-image"></i>
                        <h3 class="item-title">
                            Branding
                        </h3>
                        <p>
                            This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides,
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 Services-tab item">
                <div class="folded-corner service_tab_1">
                    <div class="text">
                        <i class="fa fa-line-chart fa-5x fa-icon-image"></i>
                        <h3 class="item-title">
                            Analytics
                        </h3>
                        <p>
                            This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides,
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 Services-tab item">
                <div class="folded-corner service_tab_1">
                    <div class="text">
                        <i class="fa fa-mobile fa-5x fa-icon-image"></i>
                        <h3 class="item-title">
                            Mobil Apps
                        </h3>
                        <p>
                            This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides,
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 Services-tab item">
                <div class="folded-corner service_tab_1">
                    <div class="text">
                        <i class="fa fa-money fa-5x fa-icon-image"></i>
                        <h3 class="item-title">
                            e-commerce
                        </h3>
                        <p>
                            This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides,
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 Services-tab item">
                <div class="folded-corner service_tab_1">
                    <div class="text">
                        <i class="fa fa-bullhorn fa-5x fa-icon-image"></i>
                        <h3 class="item-title">
                            Support
                        </h3>
                        <p>
                            This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides,
                        </p>
                    </div>
                </div>
            </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
    background: #000000 !important;
}
h3 {
    color: rgba(31, 181, 172, 0.9);
}
.text {
    color: rgba(31, 181, 172, 0.9);
    text-align: center;
}
.folded-corner:hover .text {
    visibility: visible;
    color: #000000;
}
.Services-tab {
    margin-top: 20px;
}

/*nav link items*/
.folded-corner {
    padding: 25px 25px;
    position: relative;
    font-size: 90%;
    text-decoration: none;
    color: #999;
    background: transparent;
    transition: all ease 0.5s;
    border: 1px solid rgba(31, 181, 172, 0.9);
}
.folded-corner:hover {
    background-color: rgba(31, 181, 172, 0.9);
}
/*paper fold corner*/
.folded-corner:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 0px 0px 0;
    border-color: #ddd #000;
    transition: all ease 0.3s;
}
/* on li hover make paper fold larger*/
.folded-corner:hover:before {
    background-color: #d00003;
    border-width: 0 50px 50px 0;
    border-color: #eee #000;
}
.service_tab_1 {
    background-color: #000;
}
.service_tab_1:hover .fa-icon-image {
    color: #000;
    transform: rotate(360deg) scale(1.5);
}
.fa-icon-image {
    color: rgba(31, 181, 172, 0.9);
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    font-size-adjust: none;
    font-stretch: normal;
    -moz-font-feature-settings: normal;
    -moz-font-language-override: normal;
    text-rendering: auto;
    transition: all 0.65s linear 0s;
    text-align: center;
    transition: all 1s cubic-bezier(0.99, 0.82, 0.11, 1.41);
}
.col-centered{
    float: none;
    margin: 0 auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
    background: #000000 !important;
}
h3 {
    color: rgba(31, 181, 172, 0.9);
}
.text {
    color: rgba(31, 181, 172, 0.9);
    text-align: center;
}
.folded-corner:hover .text {
    visibility: visible;
    color: #000000;
}
.Services-tab {
    margin-top: 20px;
}

/*nav link items*/
.folded-corner {
    padding: 25px 25px;
    position: relative;
    font-size: 90%;
    text-decoration: none;
    color: #999;
    background: transparent;
    transition: all ease 0.5s;
    border: 1px solid rgba(31, 181, 172, 0.9);
}
.folded-corner:hover {
    background-color: rgba(31, 181, 172, 0.9);
}
/*paper fold corner*/
.folded-corner:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 0px 0px 0;
    border-color: #ddd #000;
    transition: all ease 0.3s;
}
/* on li hover make paper fold larger*/
.folded-corner:hover:before {
    background-color: #d00003;
    border-width: 0 50px 50px 0;
    border-color: #eee #000;
}
.service_tab_1 {
    background-color: #000;
}
.service_tab_1:hover .fa-icon-image {
    color: #000;
    transform: rotate(360deg) scale(1.5);
}
.fa-icon-image {
    color: rgba(31, 181, 172, 0.9);
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    font-size-adjust: none;
    font-stretch: normal;
    -moz-font-feature-settings: normal;
    -moz-font-language-override: normal;
    text-rendering: auto;
    transition: all 0.65s linear 0s;
    text-align: center;
    transition: all 1s cubic-bezier(0.99, 0.82, 0.11, 1.41);
}
.col-centered{
    float: none;
    margin: 0 auto;
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 Services-tab item">
                <div class="folded-corner service_tab_1">
                    <div class="text">
                        <i class="fa fa-image fa-5x fa-icon-image"></i>
                        <h3 class="item-title">
                            Designing
                        </h3>
                        <p>
                            This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides,
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 Services-tab item">
                <div class="folded-corner service_tab_1">
                    <div class="text">
                        <i class="fa fa-lightbulb-o fa-5x fa-icon-image"></i>
                        <h3 class="item-title">
                            Developing
                        </h3>
                        <p>
                            This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides,
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 Services-tab item">
                <div class="folded-corner service_tab_1">
                    <div class="text">
                        <i class="fa fa-truck fa-5x fa-icon-image"></i>
                        <h3 class="item-title">
                            Marketing
                        </h3>
                        <p>
                            This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides,
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 Services-tab item">
                <div class="folded-corner service_tab_1">
                    <div class="text">
                        <i class="fa fa-diamond fa-5x fa-icon-image"></i>
                        <h3 class="item-title">
                            Branding
                        </h3>
                        <p>
                            This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides,
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 Services-tab item">
                <div class="folded-corner service_tab_1">
                    <div class="text">
                        <i class="fa fa-line-chart fa-5x fa-icon-image"></i>
                        <h3 class="item-title">
                            Analytics
                        </h3>
                        <p>
                            This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides,
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 Services-tab item">
                <div class="folded-corner service_tab_1">
                    <div class="text">
                        <i class="fa fa-mobile fa-5x fa-icon-image"></i>
                        <h3 class="item-title">
                            Mobil Apps
                        </h3>
                        <p>
                            This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides,
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 Services-tab item">
                <div class="folded-corner service_tab_1">
                    <div class="text">
                        <i class="fa fa-money fa-5x fa-icon-image"></i>
                        <h3 class="item-title">
                            e-commerce
                        </h3>
                        <p>
                            This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides,
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 Services-tab item">
                <div class="folded-corner service_tab_1">
                    <div class="text">
                        <i class="fa fa-bullhorn fa-5x fa-icon-image"></i>
                        <h3 class="item-title">
                            Support
                        </h3>
                        <p>
                            This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides,
                        </p>
                    </div>
                </div>
            </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS