CODEWITHSUNDEEP
csssassflexboxbootstrap-4
Theo Itzaris
Theo Itzaris

Reputation: 4681

Bootstrap4, i need different columns number on each row depending on breakpoint

Updated: Ok, it was much simpler than i thought, i just moved all columns in one row, and the responsive works fine.thank you all. enter image description here

i am using Bootstrap4 grid system to create 3 rows with columns.

On lg breakpoint i need:
1st row 3 columns
2nd row 4 cols
3rd row 4 cols.
On md breakpoint i need:
1st row 3 columns
2nd row 3 cols
3rd row 3 cols.
On sm breakpoint i need:
1st row 2 columns
2nd row 2 cols
3rd row 2 cols.

<div class="example-container">
        <div class="example-row">
            <div class="example-content-main top">Main content</div>
            <div class="example-content-secondary top">Secondary content</div>
            <div class="example-content-third top">third content</div>
        </div>
        <div class="example-row">
            <div class="example-content-main">Main content</div>
            <div class="example-content-secondary">Secondary content</div>
            <div class="example-content-third">third content</div>
            <div class="example-content-fourth">fourth content</div>
        </div>
         <div class="example-row">
            <div class="example-content-main">Main content</div>
            <div class="example-content-secondary">Secondary content</div>
            <div class="example-content-third">third content</div>
            <div class="example-content-fourth">fourth content</div>
        </div>
       </div>

UPDATE: well, i use botstrap4 mixing to use my breakponts, this is my custom scss:

 $grid-columns:      12;
 $grid-gutter-width: 30px;

 $grid-breakpoints: (
   xs: 0,
  sm: 320px,
   md: 510px,
   lg: 780px,
  xl: 1000px
 );

.example-container {
  @include make-container;
 }

.example-row {
  @include make-row;
}


//ROWS 1,2,3,4
 .example-content-main {
  background: gold;
  @include make-col-ready;

  @include media-breakpoint-up(md) {
     @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
  @include media-breakpoint-up(xl) {
    @include make-col(3);
  }

 &.top {
   background: gold;
   @include make-col-ready;

   @include media-breakpoint-up(md) {
     @include make-col(6);
   }
   @include media-breakpoint-up(lg) {
     @include make-col(4);
   }
   @include media-breakpoint-up(xl) {
     @include make-col(3);
   }
 }
}

.example-content-secondary {
 background: grey;
 @include make-col-ready;

 @include media-breakpoint-up(md) {
   @include make-col(6);
 }
 @include media-breakpoint-up(lg) {
   @include make-col(4);
 }
 @include media-breakpoint-up(xl) {
   @include make-col(3);
 }

 &.top {
   background: white;
   @include make-col-ready;

   @include media-breakpoint-up(md) {
     @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
     @include make-col(4);
  }
 @include media-breakpoint-up(xl) {
  @include make-col(3);
  }
 }
}

.example-content-third {
  background: yellow;
  @include make-col-ready;

@include media-breakpoint-up(md) {
  @include make-col(6);
}
@include media-breakpoint-up(lg) {
  @include make-col(4);
}
@include media-breakpoint-up(xl) {
  @include make-col(3);
}

&.top {
  background: grey;
  @include make-col-ready;

  @include media-breakpoint-up(md) {
  @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
  @include media-breakpoint-up(xl) {
  @include make-col(6);
  }
 }
}

.example-content-fourth {...}

On lg screens it shows ok, like so:

enter image description here

On md screens, i need 3 columns on each row, so i need 3 rows of 3 columns each, but instead i get this image:

enter image description here

Is there a way to make the columns stuck with each other althought they are on separate rows?

Upvotes: 0

Views: 867

Answers (1)

molecoder
molecoder

Reputation: 473

From testing the next code we can see you stumble into a problem in:

. first row using xs (as the number of columns goes up to 18);

. second and third row using md (as the number of columns goes up to 16).

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Molecoder's example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello this was done by Molecoder to help Theo Itzaris!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-xs-6 col-sm-4 col-lg-4" style="background-color:red;">.col-xs-6 .col-sm-4 .col-lg-4</div>
    <div class="col-xs-6 col-sm-4 col-lg-4" style="background-color:lavender;">.col-xs-6 .col-sm-4 .col-lg-4</div>
    <div class="col-xs-6  col-sm-4 col-lg-4" style="background-color:purple;">.col-xs-6 .col-sm-4 .col-lg-4</div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-4 col-lg-3" style="background-color:pink;">.col-xs-6 .col-sm-4 .col-lg-3</div>
    <div class="col-xs-6 col-sm-4 col-lg-3" style="background-color:black;">.col-xs-6 .col-sm-4 .col-lg-3</div>
    <div class="col-xs-6 col-sm-4 col-lg-3" style="background-color:lavenderblush;">.col-xs-6 .col-sm-4 .col-lg-3</div>
    <div class="col-xs-6 col-sm-4 col-lg-3" style="background-color:grey;">.col-xs-6 .col-sm-4 .col-lg-3</div>
  </div><div class="row">
    <div class="col-xs-6 col-sm-4 col-lg-3" style="background-color:orange;">.col-xs-6 .col-sm-4 .col-lg-3</div>
    <div class="col-xs-6 col-sm-4 col-lg-3" style="background-color:yellow;">.col-xs-6 .col-sm-4 .col-lg-3</div>
    <div class="col-xs-6 col-sm-4 col-lg-3" style="background-color:green;">.col-xs-6 .col-sm-4 .col-lg-3</div>
    <div class="col-xs-6 col-sm-4 col-lg-3" style="background-color:blue;">.col-xs-6 .col-sm-4 .col-lg-3</div>
  </div>
</div>

</body>
</html>

Test it here.

This is a case where the number of columns in a row are more than 12 and Bootstrap's grid system allows up to 12 columns across the page.

From their documentation

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

This means that what you want to achieve can not be done.

Upvotes: 1

Related Questions