Frontend Free Code
Frontend Free Code
Developers Codes
Javascript Codes
HTML Codes
CSS Codes
PHP Codes
Home Home How to How to use Sitemap Sitemap About us About Us

Feel The Power


content logo
Bootstrap Grids: Bootstrap Responsive Grid with Transition Effect
Previous Code Next Code

Grids are very important in arranging your site page and cause different parts of the site to be placed right next to each other, the code shows a subset that are regularly placed together with the help of the grid and have a transition and They move when loaded and there is a button that creates a new item. These items are great for displaying photos and text.

#Bootstrap Card with Grid # Bootstrap Grid with Transition # CSS Grid Move # Bootstrap Grid Card 
<!-- this script got from www.frontendfreecode.com -->
<div class="app" id="app">
    <div class="container">
        <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
            <h4>Transition Group Animations</h4>
            <hr />
            <div class="btn btn-primary" @click="addItem">Add Item</div><br /><br />
            <div class="contain">
                <transition-group name="fade">
                    <div class="contain-item" v-for="(number, index) in numbers" v-bind:key="number" @click="removeItem(index)" style="cursor: pointer;">{{index}}</div>
                </transition-group>
            </div>
        </div>
    </div>
</div>
<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=Source+Code+Pro");

body {
    margin-top: 50px;
    font-family: "Source Code Pro", monospace;
}

.container {
    margin: 0;
    padding: 0;
}

.contain {
    width: 100vw;
    position: relative;
}

    .contain span {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

.contain-item {
    margin: 1vw;
    width: 30vw;
    height: 30vw;
    border-radius: 15px;
    box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.08), 0px 6px 18px 0px rgba(0, 0, 0, 0.05);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    font-weight: bold;
    font-size: 2.3rem;
}

    .contain-item:hover {
        transform: translateY(-5px);
    }

        .contain-item:hover:after {
            content: "";
            position: absolute;
            top: 20px;
            width: 2px;
            right: 11%;
            height: 30px;
            background-color: white;
            transform: rotate(45deg);
            opacity: 0.8;
        }

        .contain-item:hover:before {
            content: "";
            position: absolute;
            top: 20px;
            right: 11%;
            width: 2px;
            height: 30px;
            background-color: white;
            transform: rotate(-45deg);
            opacity: 0.8;
        }

.fade-enter {
    opacity: 0;
}

.fade-enter-active {
    transition: all 1s;
}

.fade-leave-active {
    transition: all 0.3s;
    opacity: 0;
    transform: translateY(0);
    position: absolute;
}

.fade-move {
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

    .fade-move:nth-child(1) {
        transition: transform 0.4s 0.1s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(2) {
        transition: transform 0.4s 0.2s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(3) {
        transition: transform 0.4s 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(4) {
        transition: transform 0.4s 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(5) {
        transition: transform 0.4s 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(6) {
        transition: transform 0.4s 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(7) {
        transition: transform 0.4s 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(8) {
        transition: transform 0.4s 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(9) {
        transition: transform 0.4s 0.9s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(10) {
        transition: transform 0.4s 1s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(11) {
        transition: transform 0.4s 1.1s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(12) {
        transition: transform 0.4s 1.2s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(13) {
        transition: transform 0.4s 1.3s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(14) {
        transition: transform 0.4s 1.4s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(15) {
        transition: transform 0.4s 1.5s cubic-bezier(0.77, 0, 0.175, 1);
    }
// animating entirely in JS
Vue.component('app-danger-alert', {
    template: "<div class='alert alert-danger'>Danger!</div>"
})

Vue.component('app-success-alert', {
    template: "<div class='alert alert-success'>Success!</div>"
})

new Vue({
    el: "#app",
    data: {
        show: true,
        load: true,
        elementWidth: 300,
        selected: 'app-success-alert',
        numbers: [1, 2, 3, 4, 5]
    },
    mounted: function () {

        this.$nextTick(function () {
            this.gimmeStyle();
        })


    },
    methods: {
        gimmeStyle() {

            setTimeout(function () {

                $(".contain-item").each(function (index) {

                    console.log($(this), index);

                    if ($(this)[0].style.backgroundImage == "") {
                        var r = Math.floor(Math.random() * 4);
                        console.log(r);

                        if (r == 0) {
                            $(this).css("background", "linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%)")
                        } else if (r == 1) {
                            $(this).css("background", "linear-gradient( 135deg, #81FBB8 10%, #28C76F 100%)")
                        } else if (r == 3) {
                            $(this).css("background", "linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%)")
                        } else {
                            $(this).css("background", "linear-gradient( 135deg, #FFE985 10%, #FA742B 100%)")
                        }

                    }

                })

            }, 10)


        },
        addItem: function () {
            // var new_num = Math.floor(Math.random()*this.numbers.length);
            this.numbers.splice(0, 0, this.numbers.length + 1) //0 = don't remove anything
        },
        removeItem: function (num) {
            this.numbers.splice(num, 1); //remove the item at a given index
        }
    },
    watch: {
        numbers: function () {
            this.gimmeStyle()
        }
    }
});

setTimeout(function () {
    var button = document.querySelector(".btn-primary")
    button.click();
}, 400)

setTimeout(function () {
    var button = document.querySelector(".btn-primary")
    button.click();
}, 1200)

setTimeout(function () {
    var button = document.querySelector(".btn-primary")
    button.click();
}, 2000)
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/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/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<style>
@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro");

body {
    margin-top: 50px;
    font-family: "Source Code Pro", monospace;
}

.container {
    margin: 0;
    padding: 0;
}

.contain {
    width: 100vw;
    position: relative;
}

    .contain span {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

.contain-item {
    margin: 1vw;
    width: 30vw;
    height: 30vw;
    border-radius: 15px;
    box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.08), 0px 6px 18px 0px rgba(0, 0, 0, 0.05);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    font-weight: bold;
    font-size: 2.3rem;
}

    .contain-item:hover {
        transform: translateY(-5px);
    }

        .contain-item:hover:after {
            content: "";
            position: absolute;
            top: 20px;
            width: 2px;
            right: 11%;
            height: 30px;
            background-color: white;
            transform: rotate(45deg);
            opacity: 0.8;
        }

        .contain-item:hover:before {
            content: "";
            position: absolute;
            top: 20px;
            right: 11%;
            width: 2px;
            height: 30px;
            background-color: white;
            transform: rotate(-45deg);
            opacity: 0.8;
        }

.fade-enter {
    opacity: 0;
}

.fade-enter-active {
    transition: all 1s;
}

.fade-leave-active {
    transition: all 0.3s;
    opacity: 0;
    transform: translateY(0);
    position: absolute;
}

.fade-move {
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

    .fade-move:nth-child(1) {
        transition: transform 0.4s 0.1s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(2) {
        transition: transform 0.4s 0.2s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(3) {
        transition: transform 0.4s 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(4) {
        transition: transform 0.4s 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(5) {
        transition: transform 0.4s 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(6) {
        transition: transform 0.4s 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(7) {
        transition: transform 0.4s 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(8) {
        transition: transform 0.4s 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(9) {
        transition: transform 0.4s 0.9s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(10) {
        transition: transform 0.4s 1s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(11) {
        transition: transform 0.4s 1.1s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(12) {
        transition: transform 0.4s 1.2s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(13) {
        transition: transform 0.4s 1.3s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(14) {
        transition: transform 0.4s 1.4s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .fade-move:nth-child(15) {
        transition: transform 0.4s 1.5s cubic-bezier(0.77, 0, 0.175, 1);
    }
</style>

</head>
<body>
<div class="app" id="app">
    <div class="container">
        <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
            <h4>Transition Group Animations</h4>
            <hr />
            <div class="btn btn-primary" @click="addItem">Add Item</div><br /><br />
            <div class="contain">
                <transition-group name="fade">
                    <div class="contain-item" v-for="(number, index) in numbers" v-bind:key="number" @click="removeItem(index)" style="cursor: pointer;">{{index}}</div>
                </transition-group>
            </div>
        </div>
    </div>
</div>

<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>
<script>
// animating entirely in JS
Vue.component('app-danger-alert', {
    template: "<div class='alert alert-danger'>Danger!</div>"
})

Vue.component('app-success-alert', {
    template: "<div class='alert alert-success'>Success!</div>"
})

new Vue({
    el: "#app",
    data: {
        show: true,
        load: true,
        elementWidth: 300,
        selected: 'app-success-alert',
        numbers: [1, 2, 3, 4, 5]
    },
    mounted: function () {

        this.$nextTick(function () {
            this.gimmeStyle();
        })


    },
    methods: {
        gimmeStyle() {

            setTimeout(function () {

                $(".contain-item").each(function (index) {

                    console.log($(this), index);

                    if ($(this)[0].style.backgroundImage == "") {
                        var r = Math.floor(Math.random() * 4);
                        console.log(r);

                        if (r == 0) {
                            $(this).css("background", "linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%)")
                        } else if (r == 1) {
                            $(this).css("background", "linear-gradient( 135deg, #81FBB8 10%, #28C76F 100%)")
                        } else if (r == 3) {
                            $(this).css("background", "linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%)")
                        } else {
                            $(this).css("background", "linear-gradient( 135deg, #FFE985 10%, #FA742B 100%)")
                        }

                    }

                })

            }, 10)


        },
        addItem: function () {
            // var new_num = Math.floor(Math.random()*this.numbers.length);
            this.numbers.splice(0, 0, this.numbers.length + 1) //0 = don't remove anything
        },
        removeItem: function (num) {
            this.numbers.splice(num, 1); //remove the item at a given index
        }
    },
    watch: {
        numbers: function () {
            this.gimmeStyle()
        }
    }
});

setTimeout(function () {
    var button = document.querySelector(".btn-primary")
    button.click();
}, 400)

setTimeout(function () {
    var button = document.querySelector(".btn-primary")
    button.click();
}, 1200)

setTimeout(function () {
    var button = document.querySelector(".btn-primary")
    button.click();
}, 2000)
</script>

</body>
</html>
Preview
RECENT CODES
Bootstrap Table with Sorting Animation
Bootstrap Table with Col and Row Effect on Hover
Bootstrap Table with Fixed Header
Bootstrap Collapsing / Expanding Table
Bootstrap Pricing Table with Fade Effect
Bootstrap Header with Hover Effect
Bootstrap Dynamic Header with Style Change
Bootstrap Header with Material Effect for Tabs
Animating Bootstrap 4 Navbar
Vertical Bootstrap Header with Animation
CATEGORIES
Bootstrap Search Boxes
Bootstrap Tabs
Bootstrap Grids
Bootstrap Forms
Bootstrap Headers
Bootstrap Tables
FIND US
LINK US
download Link to us:
Site Logo
Please put this code in your page.
Frontend Free Code
© 2021 Kerixa Inc