Bootstrap Grids:

Bootstrap Responsive Grid with Transition Effect

Grids are perfect for lining up items, organizing the pages you have and keeping your designs clean, streamlined and user-friendly. You can use a basic, simple grid layout if you feel like it but keep in mind that the more complex your layout is, the more freedom you have in designing. Also, a rule of thumb is to not limit yourself to the ordinary grid layouts out there. You can inspire yourself with different styles of grid layouts and then let your creativity take the wheel. You need to break the rule and let your mind do the work. This will result in extremely attractive designs that the visitors will instantly fall in love with and want to trust your website.

Here in this post, we have a code for a Bootstrap grid with transitions. As you know grids are very important in organizing web pages and help your website find an order to itself. The code features colourful boxes that can be added and removed easily. Each time a box is removed or a new one is added, the whole order changes and the boxes push each other to give space to the new box or to fill the space it just removed. This is truly a special Bootstrap card with grid that can certainly interest any user. The design in this CSS grid move template is spectacular. Also, you can use this Bootstrap grid card template for your own website without any fees.

Bootstrap Card with Grid

Bootstrap Grid with Transition

CSS Grid Move

Bootstrap Grid Card

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

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