Responsive site using Bootstrap 4

Hi I created a website using Bootstrap and im trying to make it responsive my question is do the columns alway have to add to 12? Reason being for mobile site some the colums I’ve create will add to 12 for large screen but not small screen.

Example:

<div class=" col-lg-3 "></div>
<div class=" col-lg-3 "> </div>
<div class=" col-lg-3 "> </div>
<div class=" col-lg-3 "> </div>

So for large screens id like the columns to be split quartley. But on mobiles id like them to be in half col-6.

     <div class=" col-sm-6 col-lg-3 "></div>
<div class="col-sm-6  col-lg-3 "> </div>
<div class=" col-sm-6 col-lg-3 "> </div>
<div class=" col-sm-6col-lg-3 "> </div>

Im guessing this isn’t correct. How would i go about doing this?

You’d need this I think:

  <div class="row">
    <div class="col-6 col-lg-3 "> testing</div>
    <div class="col-6 col-lg-3 ">testing </div>
    <div class="col-6 col-lg-3 ">testing </div>
    <div class="col-6 col-lg-3 ">testing </div>
  </div>

It all depends where you want it break from 4 into 2 columns.

See the documentation for the breakpoints.

If you wanted it 4 columns until the window was below 762px you would use the -md class instead of -lg.

e.g.

  <div class="row">
    <div class="col-6 col-md-3 "> testing</div>
    <div class="col-6 col-md-3 ">testing </div>
    <div class="col-6 col-md-3 ">testing </div>
    <div class="col-6 col-md-3 ">testing </div>
  </div>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.