How do I make a grid 4 column shrink to 1 column while using bootstrap?-CodePudding

I want my 4 columns to become one when I shrink the page in bootstrap as in the picture.

<div class="container-fluid ">
     <div class="row my-row ">
         <div class="col col-md-3 my-col">
            <div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
             column
         </div>
         <div class="col col-md-3 my-col">
            <div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
             column
         </div>
         <div class="col col-md-3 my-col">
            <div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
             column
         </div>
         <div class="col col-md-3 my-col">
            <div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
            
             <div><p>column</p></div>
         </div>
     </div>
 </div>

enter image description here

Can anyone please help me with this?

CodePudding user response：

Do you mean "how do I properly use responsive classes so that the layout is in 1 column at narrow widths but 4 columns when it's wider?" In which case, you change your classes to something like col-12 col-lg-3 (remembering that the numbers in the classes show how many notional columns the element should use up, based on Bootstrap's standard 12-column grid).

The code would end up looking something like this. I've added an extra md breakpoint here, to hopefully help make it clear how it all works.

<div class="container-fluid">
     <div class="row my-row">
         <div class="col-12 col-md-6 col-lg-3 my-col">
            STUFF
         </div>
         <div class="col-12 col-md-6 col-lg-3 my-col">
            STUFF
         </div>
         <div class="col-12 col-md-6 col-lg-3 my-col">
            STUFF
         </div>
         <div class="col-12 col-md-6 col-lg-3 my-col">
            STUFF
         </div>
     </div>
 </div>

In essence, when building a Bootstrap layout, you need to think about the breakpoints of your structure. Start with a default layout for your mobile (narrowest) layout and add the necessary default col-* class (here, col-12 because you want each div to use all 12 notional columns - i.e. you want each to be full-width). Then consider where you want the layout to change and add a new col-xx-* class for that breakpoint (here, col-md-6 to go to 2 columns at the medium size and col-lg-3 to go to 4 columns at the large size). Bootstrap will use the col-12 up to the first breakpoint you specify and then use the new width from that breakpoint upwards, and similarly for each breakpoint in size order.

CodePudding user response：

 <div class="container-fluid ">
 <div class="row my-row ">
     <div class="col-3 col-md-3 my-col">
        <div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
        <p>column</p>
     </div>
     <div class="d-none d-sm-block col-md-3 d-sm-none d-md-block my-col">
        <div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
         column
     </div>
     <div class="d-none d-sm-block col-md-3 d-sm-none d-md-block my-col">
        <div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
         column
     </div>
     <div class="d-none d-sm-block col-md-3 d-sm-none d-md-block my-col">
        <div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
        
         <div><p>column</p></div>
     </div>
 </div>

This is how it is done. Thanks for all help!