Bootstrap Grids:

Bootstrap Paginated Flip Grid

Like tables, a grid layout allows the website owner to place elements and sort them into rows and columns. Grids are generally better than tables when sorting visual data as tables leave out important functionalities. Besides, designing a grid layout is much easier than designing a table with CSS. Grids are literally a bunch of columns and rows that let you place content inside them like a box. ever since they were introduced, the use of grids has become increasingly more popular. Different websites use different styles of grids to contain their data and display it to their users.

With that said, grids are quite flexible when it comes to styles and animations. Take the Bootstrap card with grid we have provided in this post as an example. It features a page flip animation and makes your website so special. This CSS grid move also has a hover effect written in its code. Whenever you hover your mouse cursor on a card, part of the box will flip open like a book. If you click on it, however, it will flip completely and the content written on the other side of it will be displayed. A Bootstrap grid with transition effects can be such an aesthetic improvement to your website. You can use this Bootstrap grid card to get things started and customize it to make it unique to your site.

Bootstrap Card with grid

Bootstrap Grid with Transition

CSS Grid Move

Bootstrap Grid Card

<!-- This script got from 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://frontendfreecode.com">Free Frontend</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 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;" href="http://www.devanswer.com">Free Frontend</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

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