content logo

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 www.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://www.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 www.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