how to set 4 columns in desktop view with responsive-CodePudding

I already added 4 columns in the desktop view using bootstrap but I didn't understand how to set those 4 columns in the responsive view.

CodePudding user response：

Bootstrap has various screen size related class. You can try

4 in desktop, 2 in Ipad/tab and 1 in mobile view.

<div >
  <div >info here</div> 
  <div >info here</div> 
  <div >info here</div> 
  <div >info here</div>
</div>

CodePudding user response：

Try it:

<div >
      <div >col</div>
      <div >col</div>
      <div >col</div>
      <div >col</div>
</div>

CodePudding user response：

First you need to read official documentation from Bootstrap. So you can easily learn & use pre-defined classes of Bootstrap.

Helpful Links:
https://getbootstrap.com/docs/5.1/layout/grid/#how-it-works https://getbootstrap.com/docs/5.1/layout/grid/#row-columns https://getbootstrap.com/docs/5.1/layout/gutters/#horizontal--vertical-gutters

.l {
  box-shadow: 0 0 0 1px #ccc;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<h5 >With Columns Break</h5> 
<div >
  <div >
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
  </div>
</div>

<h5 >Without Columns Break</h5> 
<div >
  <div >
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
  </div>
</div>