0

How can I achieve the following in bootstrap 4:

  • 4 columns on a large breakpoint;
  • 3 columns on a medium breakpoint; and
  • 1 column on a small breakpoint.

My current code is as follows:

    <html>
    <head>
     <meta charset="utf-8">
      <link href="css/bootstrap.css" rel="stylesheet">
      <link href="css/bootstrap-responsive.css" rel="stylesheet">
    </head>
    <body>
    <div class="row">
      <div class="col-lg-4 col-md-3 col-sm-1">...</div>
      <div class="col-lg-4 col-md-3 col-sm-1">...</div>
      <div class="col-lg-4 col-md-3 col-sm-1">...</div>
      <div class="col-lg-4 col-md-3 col-sm-1">...</div>
    </div>
      <script src="js/jquery.min.js"></script>
      <script src="js/jquery.easing.js"></script>
      <script src="js/bootstrap.min.js"></script>
    </body>
    </html>

its not working in some sc size
RaaaCode
  • 447
  • 3
  • 13
soodeh hesaraki
  • 13
  • 2

2 Answers2

1

Answer

The selected answer is slightly wrong because on a medium screen, col-md-6 will result in 2 columns as opposed to 3 as requested. The answer you need is actually:

<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-12">...</div>
    <div class="col-lg-3 col-md-4 col-sm-12">...</div>
    <div class="col-lg-3 col-md-4 col-sm-12">...</div>
    <div class="col-lg-3 col-md-4 col-sm-12">...</div>
</div>

General Principle

As a general principle for bootstrap, there are 12 columns available across which you can span. The number following the breakpoint (bp) specified captures the number of columns across which the content will span. Therefore:

col-(bp)-12 - will take up the full width at the specified breakpoint. col-(bp)-4 - will take up the one-third width at the specified breakpoint. col-(bp)-3 - will take up the one-quarter screen at the specified breakpoint.

etc.

References

More information can be found at:

https://getbootstrap.com/docs/4.3/layout/grid/

The following thread also provides some helpful advice:

What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?

RaaaCode
  • 447
  • 3
  • 13
0

It needs to add to 12 for each screen size

<div class="row">
    <div class="col-lg-3 col-md-6 col-sm-12">...</div>
    <div class="col-lg-3 col-md-6 col-sm-12">...</div>
    <div class="col-lg-3 col-md-6 col-sm-12">...</div>
    <div class="col-lg-3 col-md-6 col-sm-12">...</div>
</div>

This should make it stack on smaller screens.

NB: The reason for choosing col-md-6 for the medium screen size is that there are 4 divs and so on a md screen you will get 2 rows of 2 divs. If you were to do as the questions asks you would end up with one row of 3 and one row of 1.

Kevin Glasson
  • 408
  • 2
  • 13