Issue converting container rows into columns for responsiveness

Question

I am working on writing the html for the above image with responsiveness. Below is my code for the design so far

HTML:

    <div class="container-fluid">
  <div
    class="row low-height box border bg-light justify-content-start align-content-start overflow-box"
  >
    <div class="col-1 border bg-primary small-box m-2"></div>
    <div class="col-1 border bg-primary small-box m-2"></div>
  </div>
  <div
    class="row low-height box border bg-light justify-content-end align-content-end"
  >
    <div class="col-1 border small-box bg-success m-1"></div>
  </div>
  <div
    class="row low-height box border bg-light justify-content-center align-content-center"
  >
    <div class="col-lg-12 text-center"><h4>Title</h4></div>
  </div>
</div>

CSS:

.box {
   height: 200px;
  margin-bottom: 10px;
}
.small-box {
  height: 100px;
}

.overflow-box {
  overflow: auto;
}

Problem:

For the browser height lower than 600px, the 3 main sections should become horizontally arranged as shown in the below image.

This is the part I am unable to solve and cant find anything on the bootstrap site as well. May be I am doing something wrong fundamentally. Please help.

score 1 · Accepted Answer · 2022-05-01T21:43:02.107

You can add a media query in your css,

@media(max-height:600px) {
    //here you can write your custom css for that condition
    //in this case,
    [class*="col"]{
    width:33%!important;
  }
}

Here's an example

@media(max-height:600px) {
  [class*="col"]{
    width:33%!important;
  }
}

.box {
  text-align:center;
  padding:5rem;
  background-color: #22ccff;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container-fluid">
  <div class="px-lg-12 px-md-12 px-sm-12">
    <div class="row">
      <div class="col-xl-12 col-lg-12 col-md-12 mb-4">
        <div class="box">Box-1
        </div>
      </div>
      <div class="col-xl-12 col-lg-12 col-md-12 mb-4">
        <div class="box">Box-2
        </div>
      </div>
      <div class="col-xl-12 col-lg-12 col-md-12 mb-4">
        <div class="box">Box-3
        </div>
      </div>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered May 01 '22 at 20:22

Instead of putting each of the three grey boxes in its own row, they should be cols within a responsive Boostrap grid.

I've updated your code to put each of those grey boxes in a <div class="col-4 col-sm-12" ...> to make them format to 3 columns on XS screens, and 1 column on all larger size screens per your request. (Although that's backwards from how responsive sites usually work: usually on the smallest screen size the grid collapses to one column, and on larger sizes the grid expands to more columns.)

.box {
  height: 200px;
  margin-bottom: 10px;
}

.small-box {
  height: 100px;
}

.overflow-box {
  overflow: auto;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container-fluid">
    <div class="row">
        <div class="col-4 col-sm-12 low-height box border bg-light justify-content-start align-content-start overflow-box">
            <div class="row">
                <div class="col-1 border bg-primary small-box m-2"></div>
                <div class="col-1 border bg-primary small-box m-2"></div>
            </div>
        </div>
        <div class="col-4 col-sm-12 low-height box border bg-light">
            <div class="row justify-content-end align-content-end">
                <div class="col-1 border small-box bg-success m-1"></div>
            </div>
        </div>
        <div class="col-4 col-sm-12 low-height box border bg-light justify-content-center align-content-center">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h4>Title</h4>
                </div>
            </div>
        </div>
    </div>
</div>

Your solution works for the smaller width option. In my question I am asking for less than 600px height. — RL89, May 01 '22 at 20:27
@RL89 Changing the default Bootstrap breakpoint sizes is going to be difficult without [recompiling the Bootstrap SASS](https://stackoverflow.com/questions/54204000/is-it-possible-to-set-custom-breakpoints-in-bootstrap-4-just-by-editing-the-css). — kmoser, May 01 '22 at 20:31
@RL89 You could write your own media queries to set the width of the grey boxes to either 100% or 33% depending on whether the screen is under or over 600 px wide. Something like `@media screen (max-width: 600px) { .box { width: 33%; box-sizing: border-box; float: left; } }`. — kmoser, May 01 '22 at 20:47

score 0 · Answer 3 · answered May 01 '22 at 20:24

You can try wrapping your 3 main sections inside a row container, that way bootstrap will automatically handle the responsive part based on screen's width (also you can specify the numbers of cols each main part should take on each breakpoint you want, or just leave it auto, it's Up to you), of course, with this adjustment you need to remove the "row" classes for each main section since the main "row" wrapper can only have "cols" as direct child elements if I'm not mistaken. For the child elements or "main sections" you can use d-flex class and flex utilities to position the elements inside them the way you want.

Issue converting container rows into columns for responsiveness

3 Answers3