content logo
Bootstrap Grids: Bootstrap Responsive Grid with Transition Effect

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
FIND US
LINK US
download Link to us:
Site Logo
Please put this code in your page.