2

Currently I have these divs using MDB

    <div class="row" style="margin-top: 8em;">

            <div class="col-md-6">
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-default"><b>Project 1</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-default"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-primary"><b>Project 2</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-primary"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-secondary"><b>Project 3</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-secondary"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-success"><b>Project 4</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-success"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-danger"><b>Project 5</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-danger"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-warning"><b>Project 6</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-warning"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
            </div>
    </div>

and the output of these divs is like this

enter image description here

As you can see the 2 different div with the class name of col-md-6 is inside the row div.

for each col-md-6 contains 3 different projects.

What I'm trying to do, is it possbile to arrange these divs of projects without using col-md-6? with just JavaScript? with the arrangement like that too?

Because those project will be coming from my database it's a bad idea to use col-md-6 for this situation that's why I'm trying to do the automatic arrangement of divs with two(2) columns like that even if I loaded multiple divs. It will rearrange just like that

King RG
  • 478
  • 1
  • 12
  • 27
  • You can try and use CSS grid to define your layout instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout – giuseppedeponte Oct 30 '19 at 08:58
  • You can change the width value of class in js – Vincent Dante Oct 30 '19 at 08:58
  • 3
    _“Because those project will be coming from my database it's a bad idea to use col-md-6 for this situation”_ - why? Don’t state stuff like this as if it was an absolute fact, explain what the actual problem is. Is it possible that you actually meant “I don’t know how to handle that” instead of “bad idea”? – 04FS Oct 30 '19 at 09:13

1 Answers1

1

Take a look at Bootstraps card layout card-deck. You can fill a single div with x amount of cards. The width of each card can be declared in CSS by flex-basis.

This way there's no need for extra columns to make it responsive. Also no need to create a mapping when using CSS-grid (which is also a valid solution). No need for JavaScript solutions.

Below I've extended the card-deck layout with two-col class. Similarly you can extend to three-col or four-col and so on.

SCSS

.card-deck {
    .card {
        flex-basis: 100%; // mobile first
    }

    /*@media (min-width: 768px)*/
    @include media-breakpoint-up(md) {
        &.two-col {
            .card {
                flex-basis: calc(50% - #{$grid-gutter-width}); // -30px
            }
        }
    }        
}

DEMO

Tim Vermaelen
  • 6,869
  • 1
  • 25
  • 39