bootstrap 4 row height

Question

I try to have something like this with bootstrap 4  with equal size in the height of green rows and red row   x000D   x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 4 0 0-alpha 6 css bootstrap css  rel  stylesheet   gt  x000D      lt div class  container  gt  x000D           lt div class  row  gt  x000D             lt div class  col-md-8 col-lg-6 B  gt  lt div class  card card-inverse  style  background-color   333  border-color   333   gt  x000D       lt img src  http   lorempicsum com rio 800 500 4  class  img-fluid  alt  Responsive image  gt  x000D       x000D       lt  div gt  lt  div gt  x000D         lt div class  col-md-4 col-lg-3 G  gt  x000D             lt div class  row  gt  x000D             lt div class  col-md-6 col-lg-6 B  gt  lt div class  card card-inverse  style  background-color   333  border-color   333   gt  x000D       lt img src  http   lorempicsum com rio 800 500 4  class  img-fluid  alt  Responsive image  gt  x000D       x000D       lt  div gt  lt  div gt  x000D          lt div class  col-md-6 col-lg-6 B  gt  lt div class  card card-inverse  style  background-color   333  border-color   333   gt  x000D       lt img src  http   lorempicsum com rio 800 500 4  class  img-fluid  alt  Responsive image  gt  x000D       x000D       lt  div gt  lt  div gt  x000D          lt div class  col-md-12  gt  lt div class  card card-inverse  style  background-color   333  border-color   333   gt  x000D       lt img src  http   lorempicsum com rio 800 500 3  class  img-fluid  alt  Responsive image  gt  x000D       x000D       lt  div gt  lt  div gt  x000D          lt  div gt  x000D       lt  div gt     x000D          x000D           lt  div gt  x000D       lt  div gt  x000D   x000D   x000D   All images have the same size and are responsive but the problem is I can t get equal size in the height of green rows and red row

User · Accepted Answer

Use the sizing utility classes      h-50   height 50  h-100   height 100      http   www codeply com go Y3nG0io2uE    lt div class  container  gt           lt div class  row  gt               lt div class  col-md-8 col-lg-6 B  gt                   lt div class  card card-inverse card-primary  gt                       lt img src  http   lorempicsum com rio 800 500 4  class  img-fluid  alt  Responsive image  gt                   lt  div gt               lt  div gt               lt div class  col-md-4 col-lg-3 G  gt                   lt div class  row h-100  gt                       lt div class  col-md-6 col-lg-6 B h-50 pb-3  gt                           lt div class  card card-inverse card-success h-100  gt                            lt  div gt                       lt  div gt                       lt div class  col-md-6 col-lg-6 B h-50 pb-3  gt                           lt div class  card card-inverse bg-success h-100  gt                            lt  div gt                       lt  div gt                       lt div class  col-md-12 h-50  gt                           lt div class  card card-inverse bg-danger h-100  gt                            lt  div gt                       lt  div gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt    Or  for an unknown number of child columns  use flexbox and the cols will fill height  See the d-flex flex-column on the row  and h-100 on the child cols    lt div class  container  gt       lt div class  row  gt           lt div class  col-md-8 col-lg-6 B  gt               lt div class  card card-inverse card-primary  gt                   lt img src  http   lorempicsum com rio 800 500 4  class  img-fluid  alt  Responsive image  gt               lt  div gt           lt  div gt           lt div class  col-md-4 col-lg-3 G   gt               lt div class  row d-flex flex-column h-100  gt                   lt div class  col-md-6 col-lg-6 B h-100  gt                       lt div class  card bg-success h-100  gt                        lt  div gt                   lt  div gt                   lt div class  col-md-6 col-lg-6 B h-100  gt                       lt div class  card bg-success h-100  gt                        lt  div gt                   lt  div gt                   lt div class  col-md-12 h-100  gt                       lt div class  card bg-danger h-100  gt                        lt  div gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    https   www codeply com go tgzFAH8vaW

[css] bootstrap 4 row height

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4