Bootstrap 4 beta grid 6 columns > 2 columns on resize

HTML & CSS
1

I need to make a grid with 6 columns in full screen that size down to 2 columns on smaller/mobile. Here is what I have tried so far. It looks correct wide, on my laptop, but when smaller, iPhone or tablet, it shows 6 columns still with very tiny images.

live test here https://codepen.io/mlegg10/pen/XzrpVV

  <div class="row mb-3">
           <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 filter bunarske">
               <img class="img-fluid" alt="" src="http://www.pscompetitiveedge.com/references/logos/hardrock4.gif" /> </div>
                
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 filter bunarske">
                     <img class="img-fluid" alt="Paragon Casino Resort" src="http://www.pscompetitiveedge.com/references/logos/paragon.jpg"> </div>
                 
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 filter bunarske">
                <img class="img-fluid" alt="Tuscon Center" src="http://www.pscompetitiveedge.com/references/logos/USHomeLogo.jpg">  </div>
                
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 filter bunarske">
                <img class="img-fluid" alt="Choctaw Casino" src="http://www.pscompetitiveedge.com/references/logos//choctaw.jpg">  </div>
                
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 filter bunarske">
                  <img class="img-fluid" alt="Trump 29 Casino" src="http://www.pscompetitiveedge.com/references/logos/trump29.jpg">  </div>
                 
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 filter bunarske">
                 <img class="img-fluid" alt="Kimberly Clark" src="http://www.pscompetitiveedge.com/references/logos/KimberlyClarkLogo.jpg"> </div>
            </div>                 
 <div class="clearfix visible-sm"></div>
2

Do you have the viewport meta tag in place?

<meta name="viewport" content="width=device-width, initial-scale=1">

Also test with your devices on a real page as codepen doesn’t seem to work for mobiles (even with meta tag added).

I believe the 2 columns for small devices would be achieved with .col-6 as there is no col-xs-6 classes in the latest version.

3

this is actually live on a website here http://www.pscompetitiveedge.com/references.html

I changed the viewport from shrink to fit no to
```


I also made another page using col without the -6 or -xs and in smaller screens it shows all 6 columns, just tiny images now. Like this https://ibb.co/iyAdTG
[http://pscompetitiveedge.com/references-test.html](http://pscompetitiveedge.com/references-test.html)

on the Bootstrap documentation page for the grid they show they use col-(number)  also for responsive breakpoints
[https://getbootstrap.com/docs/4.0/layout/grid/](https://getbootstrap.com/docs/4.0/layout/grid/)
4

Hi,

This page is working fine on the iphone but shows one column of large images because you didn’t change the class that I suggested. i.e. change col-xs-6 to col-6.

This page isn’t working on desktop or mobile because you removed all the classes that you originally had.

You just used a class of .col which will try and fit in as many items in a row as it can. If you have 12 items of .col in a parent of .row then you get 12 across. If you had 2 items of .col in a parent of .row then you get 2 across and so on.

You need the classes from the first example except change the xs class for the col-6 that I already mentioned.

As I said the first example is showing one column of images on my iphone and would show 2 columns if you use the class as I specified.

If you have a different device issue then you will need to clarify a little more.

5

I really would like to have 6 images per row to show on wider screen sizes and in smaller mobile sizes I would like to have 2 images per row. I can’t seem to figure out how to code the col- to do that :frowning:

6

You already had 6 columns going down to 4 then 3 then 1 !

If you add the class I mentioned you will end up with 2 columns on the smallest mobile instead of 1.

Is that not what you wanted?

7

http://pscompetitiveedge.com/references-test.html

I just uploaded a new test page and used col-6 col-md-3 but it only put all images in one column

this is the code for the row of what should be 4 images

<div class="row">
  <div class="list-group gallery">    
    <div class="col-6 col-md-3 filter bunarske">
      <jpg>
    </div>
    <div class="col-6 col-md-3 filter bunarske">
      <jpg>
    </div>
    <div class="col-6 col-md-3filter bunarske">
      <jpg>
    </div>
    <div class="col-6 col-md-3 filter bunarske">
      <jpg> 
    </div>
  </div>
</div>                  
<div class="clearfix visible-sm"></div>

edit: it wouldn/t allow me to post img= code where it says jpg above

8

Too many backticks. You need 3 on the line before, and 3 on the line after.

9

do you mean to use col-3 col-md-3

PS: I’m sorry if I seem like I don’t get it. I sadly have MS now for 18 yrs and it’s messing up my brain :frowning:

10

Sorry, should have been clearer. I was referring to the code not showing. Think we had a bit of a moment where more than one of us was trying to fix that. At the moment (fingers-x), it’s showing as it should. Whether it’s correct or not is another question.

2 Likes
11

No, just change cold-xs-6 to col-6 like this:

<div class="row mb-3">
  <div class="col-6 col-sm-4 col-md-3 col-lg-2 filter bunarske"> <img class="img-fluid" alt="" src="references/logos/hardrock4.gif" /> </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2 filter bunarske"> <img class="img-fluid" alt="Paragon Casino Resort" src="references/logos/paragon.jpg"> </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2 filter bunarske"> <img class="img-fluid" alt="Tuscon Center" src="references/logos/USHomeLogo.jpg"> </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2 filter bunarske"> <img class="img-fluid" alt="Choctaw Casino" src="references/logos/choctaw.jpg"> </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2 filter bunarske"> <img class="img-fluid" alt="Trump 29 Casino" src="references/logos/trump29.jpg"> </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2 filter bunarske"> <img class="img-fluid" alt="Kimberly Clark" src="references/logos/KimberlyClarkLogo.jpg"> </div>
</div>
12

that makes everything in one column, so all the images are on top of each other

13

I made a test page here with that code so you can see test page link

14

Using Safari I see a single column.

Ufortunately, no dev tools. :slight_frown:

If it’s any consolation, the HTML passing validation, except for an aria error, narrows things down.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fpscompetitiveedge.com%2Freferences-test.html

15

I fixed it now. Thanks everyone

16

Please tell us what you found to be the problem. Surely we can learn something from you. :smile:

17

I had a few simple wrong punctuation marks. Here is what I used. OMG why can’t I post code? :frowning:

    <div class="row mb-3">
   <div class="col-6 col-sm-4 col-md-3 col-lg-2 filter bunarske"> <img class="img-fluid" alt="Hard Rock" src="references/logos/hardrock4.gif" /> </div>
   <div class="col-6 col-sm-4 col-md-3 col-lg-2 filter bunarske"> <img class="img-fluid" alt="Paragon Casino Resort" src="references/logos/paragon.jpg"> </div>
   <div class="col-6 col-sm-4 col-md-3 col-lg-2 filter bunarske"> <img class="img-fluid" alt="Tuscon Center" src="references/logos/USHomeLogo.jpg"> </div>
   <div class="col-6 col-sm-4 col-md-3 col-lg-2 filter bunarske"> <img class="img-fluid" alt="Choctaw Casino" src="references/logos/choctaw.jpg"> </div>
   <div class="col-6 col-sm-4 col-md-3 col-lg-2 filter bunarske"> <img class="img-fluid" alt="Trump 29 Casino" src="references/logos/trump29.jpg"> </div>
   <div class="col-6 col-sm-4 col-md-3 col-lg-2 filter bunarske"> <img class="img-fluid" alt="Kimberly Clark" src="references/logos/KimberlyClarkLogo.jpg"> </div>
    </div>
    <div class="clearfix visible-sm"></div>
18

fixed

Does your keyboard have backticks ` ?
3 backticks, newline
example code
3 backticks, newline

```
// code here
```

1 Like
19

thanks!

20

You’re in good company. Backticks and “smart quotes” (curly quotes) catch a lot of newbies unaware. That is one of the (many) reasons it is helpful if we can see the actual code being used by the member.

Cheers, @mlegg10

3 Likes