content logo

Bootstrap Grids:

Draggable Cards with Bootstrap Grids

The web design industry is forever changing and with it, many new styles and designs come. Web designers are always in search for new ideas and trends to add to their websites to attract more visitors which is the ultimate goal for every site. As a website owner, you need to be aware of these changes and always keep your site on trend. One of the greatest features that is becoming more and more popular each day is the grid layout.

Below is a code for a drag Bootstrap grid layout. The grid layouts are normally fixed in one place and don’t move at all or in some scenarios they have a preview system where you can enlarge the content of a box to view it better. Our drag Bootstrap card grid layout makes it so that you can use flexible, draggable grid boxes. With the help of this code you can rearrange the order of the boxes easily by simply dragging one box and moving it to the place of another. Our CSS grid move template is designed with all the necessary SEO features to help your website rank higher in the results pages. With this Bootstrap grid card drag layout you can ensure a high overall score and user experience for your website.

#

Drag Bootstrap Card

#

Drag Bootstrap Grid

#

CSS Grid Move

#

Bootstrap Grid Card Drag

<!-- This script got from frontendfreecode.com -->
<div class="page-content page-container" id="page-content">
    <div class="padding">
        <div class="row container-fluid d-flex justify-content-center">
            <div class="col-lg-12 col-xl-6">
                <!-- Draggable Without Images card start -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-header-text">Draggable Grid with cards</h5>
                    </div>
                    <div class="card-block">
                        <div class="row" id="sortable">
                            <div class="col-6 m-b-20" draggable="false" style="">
                                <div class="card-sub"> <img class="card-img-top img-fluid" src="http://frontendfreecode.com/codes/files/card1.jpg" alt="Card image cap">
                                    <div class="card-block">
                                        <h4 class="card-title">Product 1</h4>
                                        <p class="card-text">That might be little bit risky to have crew member like them.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card-sub m-b-20"> <img class="card-img-top img-fluid" src="http://frontendfreecode.com/codes/files/card2.jpg" alt="Card image cap">
                                    <div class="card-block">
                                        <h4 class="card-title">Product 2</h4>
                                        <p class="card-text">That might be little bit risky to have crew member like them.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6" style="">
                                <div class="card-sub"> <img class="card-img-top img-fluid" src="http://frontendfreecode.com/codes/files/card3.jpg" alt="Card image cap" draggable="false">
                                    <div class="card-block">
                                        <h4 class="card-title">Product 3</h4>
                                        <p class="card-text">That might be little bit risky to have crew member like them.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 m-b-20" draggable="false" style="">
                                <div class="card-sub"> <img class="card-img-top img-fluid" src="http://frontendfreecode.com/codes/files/card1.jpg" alt="Card image cap">
                                    <div class="card-block">
                                        <h4 class="card-title">Product 4</h4>
                                        <p class="card-text">That might be little bit risky to have crew member like them.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6" style="" draggable="false">
                                <div class="card-sub m-b-20">
                                    <div class="card-block"> <img class="card-img-top img-fluid" src="http://frontendfreecode.com/codes/files/card4.jpg" alt="Card image cap">
                                        <h4 class="card-title">Product 5</h4>
                                        <p class="card-text">That might be little bit risky to have crew member like them.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card-sub m-t-20">
                                    <div class="card-block"> <img class="card-img-top img-fluid" src="http://frontendfreecode.com/codes/files/card5.jpg" alt="Card image cap" draggable="false">
                                        <h4 class="card-title">Product 6</h4>
                                        <p class="card-text">That might be little bit risky to have crew member like them.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> <!-- Draggable Without Images card end -->
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.stretch-card>.card {
    width: 100%;
    min-width: 100%
}

body {
    background-color: #f9f9fa
}

.flex {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

@media (max-width:991.98px) {
    .padding {
        padding: 1.5rem
    }
}

@media (max-width:767.98px) {
    .padding {
        padding: 1rem
    }
}

.padding {
    padding: 3rem !important
}

.card {
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
    box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
    border: none;
    margin-bottom: 30px
}

.card .card-header {
    background-color: transparent;
    border-bottom: none;
    padding: 25px 20px
}

.card .card-header+.card-block,
.card .card-header+.card-block-big {
    padding-top: 0
}

.card-block {
    padding: 1.25rem;
    background-color: #fff
}

.m-b-20 {
    margin-bottom: 20px
}

.card-sub {
    cursor: move;
    border: none;
    -webkit-box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.05), 0 -2px 1px -2px rgba(0, 0, 0, 0.04), 0 0 0 -1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.05), 0 -2px 1px -2px rgba(0, 0, 0, 0.04), 0 0 0 -1px rgba(0, 0, 0, 0.05)
}

.card-block {
    padding: 1.25rem;
    background-color: #fff
}
$( document ).ready(function() {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
});
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.stretch-card>.card {
    width: 100%;
    min-width: 100%
}

body {
    background-color: #f9f9fa
}

.flex {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

@media (max-width:991.98px) {
    .padding {
        padding: 1.5rem
    }
}

@media (max-width:767.98px) {
    .padding {
        padding: 1rem
    }
}

.padding {
    padding: 3rem !important
}

.card {
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
    box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
    border: none;
    margin-bottom: 30px
}

.card .card-header {
    background-color: transparent;
    border-bottom: none;
    padding: 25px 20px
}

.card .card-header+.card-block,
.card .card-header+.card-block-big {
    padding-top: 0
}

.card-block {
    padding: 1.25rem;
    background-color: #fff
}

.m-b-20 {
    margin-bottom: 20px
}

.card-sub {
    cursor: move;
    border: none;
    -webkit-box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.05), 0 -2px 1px -2px rgba(0, 0, 0, 0.04), 0 0 0 -1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.05), 0 -2px 1px -2px rgba(0, 0, 0, 0.04), 0 0 0 -1px rgba(0, 0, 0, 0.05)
}

.card-block {
    padding: 1.25rem;
    background-color: #fff
}
</style>

</head>
<body>
<div class="page-content page-container" id="page-content">
    <div class="padding">
        <div class="row container-fluid d-flex justify-content-center">
            <div class="col-lg-12 col-xl-6">
                <!-- Draggable Without Images card start -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-header-text">Draggable Grid with cards</h5>
                    </div>
                    <div class="card-block">
                        <div class="row" id="sortable">
                            <div class="col-6 m-b-20" draggable="false" style="">
                                <div class="card-sub"> <img class="card-img-top img-fluid" src="http://frontendfreecode.com/codes/files/card1.jpg" alt="Card image cap">
                                    <div class="card-block">
                                        <h4 class="card-title">Product 1</h4>
                                        <p class="card-text">That might be little bit risky to have crew member like them.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card-sub m-b-20"> <img class="card-img-top img-fluid" src="http://frontendfreecode.com/codes/files/card2.jpg" alt="Card image cap">
                                    <div class="card-block">
                                        <h4 class="card-title">Product 2</h4>
                                        <p class="card-text">That might be little bit risky to have crew member like them.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6" style="">
                                <div class="card-sub"> <img class="card-img-top img-fluid" src="http://frontendfreecode.com/codes/files/card3.jpg" alt="Card image cap" draggable="false">
                                    <div class="card-block">
                                        <h4 class="card-title">Product 3</h4>
                                        <p class="card-text">That might be little bit risky to have crew member like them.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 m-b-20" draggable="false" style="">
                                <div class="card-sub"> <img class="card-img-top img-fluid" src="http://frontendfreecode.com/codes/files/card1.jpg" alt="Card image cap">
                                    <div class="card-block">
                                        <h4 class="card-title">Product 4</h4>
                                        <p class="card-text">That might be little bit risky to have crew member like them.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6" style="" draggable="false">
                                <div class="card-sub m-b-20">
                                    <div class="card-block"> <img class="card-img-top img-fluid" src="http://frontendfreecode.com/codes/files/card4.jpg" alt="Card image cap">
                                        <h4 class="card-title">Product 5</h4>
                                        <p class="card-text">That might be little bit risky to have crew member like them.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card-sub m-t-20">
                                    <div class="card-block"> <img class="card-img-top img-fluid" src="http://frontendfreecode.com/codes/files/card5.jpg" alt="Card image cap" draggable="false">
                                        <h4 class="card-title">Product 6</h4>
                                        <p class="card-text">That might be little bit risky to have crew member like them.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> <!-- Draggable Without Images card end -->
            </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>
$( document ).ready(function() {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
});
</script>

</body>
</html>
Preview