content logo
Bootstrap Grids: Bootstrap Paginated Flip Grid

The use of grids in sites has become very common because it causes the items to be placed regularly next to each other and also increases the beauty of the site, such as the following code, which uses a grid to set items that normally have a title. It is displayed with the animation in hover mode, and when we click on each item, its text is displayed and the background color also changes.

#Bootstrap Card with grid # Bootstrap Grid with Transition # CSS Grid Move # Bootstrap Grid Card
<!-- this script got from www.frontendfreecode.com -->
<section id="section-feature" class="container"> <div class="row"> <ul> <li id="sf-innovation" class="col-md-3 col-sm-6 col-xs-12"> <div class="sf-wrap"> <div class="sf-mdl-left"> <div class="sf-icon"> <i class="fa fa-fw fa-rocket fa-5x"></i> </div> <h3>Gallia est omnis</h3> </div> <div class="sf-mdl-right"> <div class="sf-icon"> <i class="fa fa-fw fa-rocket fa-5x"></i> </div> <h3>Gallia est omnis</h3> </div> <div class="sf-mdl-left-full"> <div class="sf-icon"> <i class="fa fa-fw fa-rocket fa-5x"></i> </div> <h3><a href="#">Gallia est omnis</a></h3> <p>Curabitur blandit tempus ardua ridiculus sed magna. Integer legentibus erat a ante historiarum dapibus.</p> </div> <div class="sf-mdl-right-full"> <div class="sf-icon"> <i class="fa fa-fw fa-rocket fa-5x"></i> </div> <h3><a href="#">Gallia est omnis</a></h3> <p>Curabitur blandit tempus ardua ridiculus sed magna. Integer legentibus erat a ante historiarum dapibus.</p> </div> </div> </li> <li id="sf-community" class="col-md-3 col-sm-6 col-xs-12"> <div class="sf-wrap"> <div class="sf-mdl-left"> <div class="sf-icon"> <i class="fa fa-fw fa-camera-retro fa-5x"></i> </div> <h3>Donec sed operae</h3> </div> <div class="sf-mdl-right"> <div class="sf-icon"> <i class="fa fa-fw fa-camera-retro fa-5x"></i> </div> <h3>Donec sed operae</h3> </div> <div class="sf-mdl-left-full"> <div class="sf-icon"> <i class="fa fa-fw fa-camera-retro fa-5x"></i> </div> <h3><a href="#">Donec sed operae</a></h3> <p>Hi omnes lingua, institutis, legibus inter se differunt. Donec sed odio operae, eu vulputate felis rhoncus.</p> </div> <div class="sf-mdl-right-full"> <div class="sf-icon"> <i class="fa fa-fw fa-camera-retro fa-5x"></i> </div> <h3><a href="#">Donec sed operae</a></h3> <p>Hi omnes lingua, institutis, legibus inter se differunt. Donec sed odio operae, eu vulputate felis rhoncus.</p> </div> </div> </li> <li id="sf-academy" class="col-md-3 col-sm-6 col-xs-12"> <div class="sf-wrap"> <div class="sf-mdl-left"> <div class="sf-icon"> <i class="fa fa-fw fa-cloud-upload fa-5x"></i> </div> <h3>Hi omnes lingua</h3> </div> <div class="sf-mdl-right"> <div class="sf-icon"> <i class="fa fa-fw fa-cloud-upload fa-5x"></i> </div> <h3>Hi omnes lingua</h3> </div> <div class="sf-mdl-left-full"> <div class="sf-icon"> <i class="fa fa-fw fa-cloud-upload fa-5x"></i> </div> <h3><a href="#">Hi omnes lingua</a></h3> <p>Nec dubitamus multa iter quae et nos invenerat. Ullamco laboris nisi ut aliquid ex ea commodi consequat.</p> </div> <div class="sf-mdl-right-full"> <div class="sf-icon"> <i class="fa fa-fw fa-cloud-upload fa-5x"></i> </div> <h3><a href="#">Hi omnes lingua</a></h3> <p>Nec dubitamus multa iter quae et nos invenerat. Ullamco laboris nisi ut aliquid ex ea commodi consequat.</p> </div> </div> </li> <li id="sf-opportunity" class="col-md-3 col-sm-6 col-xs-12"> <div class="sf-wrap"> <div class="sf-mdl-left"> <div class="sf-icon"> <i class="fa fa-fw fa-star-half-o fa-5x"></i> </div> <h3>Idque Caesaris facere</h3> </div> <div class="sf-mdl-right"> <div class="sf-icon"> <i class="fa fa-fw fa-star-half-o fa-5x"></i> </div> <h3>Idque Caesaris facere</h3> </div> <div class="sf-mdl-left-full"> <div class="sf-icon"> <i class="fa fa-fw fa-star fa-5x"></i> </div> <h3><a href="#">Idque Caesaris facere</a></h3> <p>Morbi fringilla convallis sapien, id pulvinar odio volutpat. Contra legem facit qui id facit quod lex prohibet.</p> </div> <div class="sf-mdl-right-full"> <div class="sf-icon"> <i class="fa fa-fw fa-star fa-5x"></i> </div> <h3><a href="#">Idque Caesaris facere</a></h3> <p>Morbi fringilla convallis sapien, id pulvinar odio volutpat. Contra legem facit qui id facit quod lex prohibet.</p> </div> </div> </li> </ul> </div> </section><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,800);

body {
    font-size: 16px;
    line-height: 22px;
    color: #555;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
}

#section-feature ul {
    margin: 100px 0 0 0;
    padding: 0;
    list-style: none;
    position: relative;
}

#section-feature li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    height: 240px;
    padding: 2%;
    float: left;
    margin-bottom: 40px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#section-feature .sf-wrap {
    background-repeat: no-repeat;
    position: absolute;
    max-width: 280px;
    width: 100%;
    height: 100%;
    left: 50%;
    margin-left: -140px;
    top: 0;
    -moz-perspective: 600px;
    -webkit-perspective: 600px;
    -ms-perspective: 600px;
    -o-perspective: 600px;
    perspective: 600px;
    cursor: pointer;
}

.sf-mdl-left,
.sf-mdl-right,
.sf-mdl-left-full,
.sf-mdl-right-full {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    overflow: hidden;
}

.sf-icon {
    position: absolute;
    top: 30px;
    text-align: center;
    width: 100%;
    left: 0;
    width: 200%;
    color: #e4610e;
}


.sf-mdl-left-full .sf-icon,
.sf-mdl-right-full .sf-icon {
    color: #fff;
}

.sf-mdl-right,
.sf-mdl-right-full {
    left: auto;
    right: 0;
}

.sf-mdl-left-full,
.sf-mdl-right-full {
    background-color: #333;
    z-index: 9;
    color: #fff;
}

.sf-wrap a {
    color: #e4610e;
    text-decoration: none;
}

.sf-mdl-left,
.sf-mdl-right {
    background-color: #fff;
    z-index: 10;
}

.sf-wrap > .sf-mdl-right-full,
.sf-wrap > .sf-mdl-right {
    background-position: right -30px;
}

.sf-wrap > .sf-mdl-right,
.sf-wrap > .sf-mdl-left-full {
    -moz-backface-visibility: hidden;
    -moz-transform-style: preserve-3d;
    -moz-transform-origin: 0 0;
    -moz-transform: rotateY(0deg);
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotateY(0deg);
    -o-backface-visibility: hidden;
    -o-transform-style: preserve-3d;
    -o-transform-origin: 0 0;
    -o-transform: rotateY(0deg);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform-origin: 0 0;
    transform: rotateY(0deg);
}

.sf-wrap.hover > .sf-mdl-right {
    -webkit-transform: rotateY(-45deg);
    -moz-transform: rotateY(-45deg);
    -ms-transform: rotateY(-45deg);
    -o-transform: rotateY(-45deg);
    transform: rotateY(-45deg);
    background-color: #ececec;
}

.sf-wrap > .sf-mdl-left-full {
    -moz-transform-origin: 100% 0;
    -webkit-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.sf-wrap.active > .sf-mdl-right,
.sf-wrap.hover.active > .sf-mdl-right {
    -moz-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.sf-wrap.active > .sf-mdl-left-full {
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.active .sf-mdl-left-full,
.active .sf-mdl-right-full {
    z-index: 11;
}

.sf-wrap div h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 22px;
}

.sf-wrap div h3,
.sf-wrap div p {
    width: 200%;
    position: absolute;
    text-align: center;
    left: 0;
    top: 140px;
}

.sf-wrap div p {
    padding: 0 10%;
    line-height: 18px;
    font-size: 13px;
    top: 170px;
}

.sf-wrap div.sf-mdl-right h3,
.sf-wrap div.sf-mdl-right-full h3,
.sf-wrap div.sf-mdl-right p,
.sf-wrap div.sf-mdl-right-full p,
.sf-mdl-right .sf-icon,
.sf-mdl-right-full .sf-icon {
    left: auto;
    right: 0;
}

.sf-wrap div.sf-mdl-left-full h3,
.sf-wrap div.sf-mdl-right-full h3 {
    top: 115px;
}
$(function () {
    $('#section-feature .sf-wrap')
        .hover(function () {
            $(this).addClass('hover');
        }, function () {
            $(this).removeClass('hover');
        })
        .click(function (event) {
            //if (event.target.nodeName != 'A') {
            $(this).toggleClass('active');
            //}
        });
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- this script got from www.frontendfreecode.com -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,800);

body {
    font-size: 16px;
    line-height: 22px;
    color: #555;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
}

#section-feature ul {
    margin: 100px 0 0 0;
    padding: 0;
    list-style: none;
    position: relative;
}

#section-feature li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    height: 240px;
    padding: 2%;
    float: left;
    margin-bottom: 40px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#section-feature .sf-wrap {
    background-repeat: no-repeat;
    position: absolute;
    max-width: 280px;
    width: 100%;
    height: 100%;
    left: 50%;
    margin-left: -140px;
    top: 0;
    -moz-perspective: 600px;
    -webkit-perspective: 600px;
    -ms-perspective: 600px;
    -o-perspective: 600px;
    perspective: 600px;
    cursor: pointer;
}

.sf-mdl-left,
.sf-mdl-right,
.sf-mdl-left-full,
.sf-mdl-right-full {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    overflow: hidden;
}

.sf-icon {
    position: absolute;
    top: 30px;
    text-align: center;
    width: 100%;
    left: 0;
    width: 200%;
    color: #e4610e;
}


.sf-mdl-left-full .sf-icon,
.sf-mdl-right-full .sf-icon {
    color: #fff;
}

.sf-mdl-right,
.sf-mdl-right-full {
    left: auto;
    right: 0;
}

.sf-mdl-left-full,
.sf-mdl-right-full {
    background-color: #333;
    z-index: 9;
    color: #fff;
}

.sf-wrap a {
    color: #e4610e;
    text-decoration: none;
}

.sf-mdl-left,
.sf-mdl-right {
    background-color: #fff;
    z-index: 10;
}

.sf-wrap > .sf-mdl-right-full,
.sf-wrap > .sf-mdl-right {
    background-position: right -30px;
}

.sf-wrap > .sf-mdl-right,
.sf-wrap > .sf-mdl-left-full {
    -moz-backface-visibility: hidden;
    -moz-transform-style: preserve-3d;
    -moz-transform-origin: 0 0;
    -moz-transform: rotateY(0deg);
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotateY(0deg);
    -o-backface-visibility: hidden;
    -o-transform-style: preserve-3d;
    -o-transform-origin: 0 0;
    -o-transform: rotateY(0deg);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform-origin: 0 0;
    transform: rotateY(0deg);
}

.sf-wrap.hover > .sf-mdl-right {
    -webkit-transform: rotateY(-45deg);
    -moz-transform: rotateY(-45deg);
    -ms-transform: rotateY(-45deg);
    -o-transform: rotateY(-45deg);
    transform: rotateY(-45deg);
    background-color: #ececec;
}

.sf-wrap > .sf-mdl-left-full {
    -moz-transform-origin: 100% 0;
    -webkit-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.sf-wrap.active > .sf-mdl-right,
.sf-wrap.hover.active > .sf-mdl-right {
    -moz-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.sf-wrap.active > .sf-mdl-left-full {
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.active .sf-mdl-left-full,
.active .sf-mdl-right-full {
    z-index: 11;
}

.sf-wrap div h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 22px;
}

.sf-wrap div h3,
.sf-wrap div p {
    width: 200%;
    position: absolute;
    text-align: center;
    left: 0;
    top: 140px;
}

.sf-wrap div p {
    padding: 0 10%;
    line-height: 18px;
    font-size: 13px;
    top: 170px;
}

.sf-wrap div.sf-mdl-right h3,
.sf-wrap div.sf-mdl-right-full h3,
.sf-wrap div.sf-mdl-right p,
.sf-wrap div.sf-mdl-right-full p,
.sf-mdl-right .sf-icon,
.sf-mdl-right-full .sf-icon {
    left: auto;
    right: 0;
}

.sf-wrap div.sf-mdl-left-full h3,
.sf-wrap div.sf-mdl-right-full h3 {
    top: 115px;
}
</style>

</head>
<body>
<section id="section-feature" class="container">
    <div class="row">
        <ul>
            <li id="sf-innovation" class="col-md-3 col-sm-6 col-xs-12">
                <div class="sf-wrap">
                    <div class="sf-mdl-left">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-rocket fa-5x"></i>
                        </div>
                        <h3>Gallia est omnis</h3>
                    </div>
                    <div class="sf-mdl-right">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-rocket fa-5x"></i>
                        </div>
                        <h3>Gallia est omnis</h3>
                    </div>

                    <div class="sf-mdl-left-full">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-rocket fa-5x"></i>
                        </div>
                        <h3><a href="#">Gallia est omnis</a></h3>
                        <p>Curabitur blandit tempus ardua ridiculus sed magna. Integer legentibus erat a ante historiarum dapibus.</p>
                    </div>
                    <div class="sf-mdl-right-full">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-rocket fa-5x"></i>
                        </div>
                        <h3><a href="#">Gallia est omnis</a></h3>
                        <p>Curabitur blandit tempus ardua ridiculus sed magna. Integer legentibus erat a ante historiarum dapibus.</p>
                    </div>
                </div>
            </li>

            <li id="sf-community" class="col-md-3 col-sm-6 col-xs-12">
                <div class="sf-wrap">
                    <div class="sf-mdl-left">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-camera-retro fa-5x"></i>
                        </div>
                        <h3>Donec sed operae</h3>
                    </div>
                    <div class="sf-mdl-right">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-camera-retro fa-5x"></i>
                        </div>
                        <h3>Donec sed operae</h3>
                    </div>

                    <div class="sf-mdl-left-full">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-camera-retro fa-5x"></i>
                        </div>
                        <h3><a href="#">Donec sed operae</a></h3>
                        <p>Hi omnes lingua, institutis, legibus inter se differunt. Donec sed odio operae, eu vulputate felis rhoncus.</p>
                    </div>
                    <div class="sf-mdl-right-full">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-camera-retro fa-5x"></i>
                        </div>
                        <h3><a href="#">Donec sed operae</a></h3>
                        <p>Hi omnes lingua, institutis, legibus inter se differunt. Donec sed odio operae, eu vulputate felis rhoncus.</p>
                    </div>
                </div>
            </li>

            <li id="sf-academy" class="col-md-3 col-sm-6 col-xs-12">
                <div class="sf-wrap">
                    <div class="sf-mdl-left">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-cloud-upload fa-5x"></i>
                        </div>
                        <h3>Hi omnes lingua</h3>
                    </div>
                    <div class="sf-mdl-right">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-cloud-upload fa-5x"></i>
                        </div>
                        <h3>Hi omnes lingua</h3>
                    </div>

                    <div class="sf-mdl-left-full">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-cloud-upload fa-5x"></i>
                        </div>
                        <h3><a href="#">Hi omnes lingua</a></h3>
                        <p>Nec dubitamus multa iter quae et nos invenerat. Ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>
                    </div>
                    <div class="sf-mdl-right-full">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-cloud-upload fa-5x"></i>
                        </div>
                        <h3><a href="#">Hi omnes lingua</a></h3>
                        <p>Nec dubitamus multa iter quae et nos invenerat. Ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>
                    </div>
                </div>
            </li>

            <li id="sf-opportunity" class="col-md-3 col-sm-6 col-xs-12">
                <div class="sf-wrap">
                    <div class="sf-mdl-left">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-star-half-o fa-5x"></i>
                        </div>
                        <h3>Idque Caesaris facere</h3>
                    </div>
                    <div class="sf-mdl-right">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-star-half-o fa-5x"></i>
                        </div>
                        <h3>Idque Caesaris facere</h3>
                    </div>

                    <div class="sf-mdl-left-full">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-star fa-5x"></i>
                        </div>
                        <h3><a href="#">Idque Caesaris facere</a></h3>
                        <p>Morbi fringilla convallis sapien, id pulvinar odio volutpat. Contra legem facit qui id facit quod lex prohibet.</p>
                    </div>
                    <div class="sf-mdl-right-full">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-star fa-5x"></i>
                        </div>
                        <h3><a href="#">Idque Caesaris facere</a></h3>
                        <p>Morbi fringilla convallis sapien, id pulvinar odio volutpat. Contra legem facit qui id facit quod lex prohibet.</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</section>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>
<script>
$(function () {
    $('#section-feature .sf-wrap')
        .hover(function () {
            $(this).addClass('hover');
        }, function () {
            $(this).removeClass('hover');
        })
        .click(function (event) {
            //if (event.target.nodeName != 'A') {
            $(this).toggleClass('active');
            //}
        });
});
</script>

</body>
</html>
Preview