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

Issue converting container rows into columns for responsiveness

2 Answers2