2
<div class="container">
  <div class="row space">
         <div class="col-sm-12 col-md-4 col-lg-2">
            <a href="#"><img src="background.jpeg" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
        <div class="col-sm-12 col-md-4 col-lg-2">
            <a href="#"><img src="background.jpeg" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
            <a href="#"><img src="" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
</div>
</div>

This is the code and on large screens they appear col-2 but at medium and small they appear col-4.

Ben
  • 25
  • 4
  • Does this answer your question? [Why are my CSS3 media queries not working?](https://stackoverflow.com/questions/7859336/why-are-my-css3-media-queries-not-working) – disinfor Jul 23 '20 at 18:32

2 Answers2

1

You are probably checking it on a different sized device. if you need to apply css for extra small devices use col-6(which is not there in your above code) instead of col-sm-6. or may be both as per your requirement. Please find the guidelines for using grid layout of bootstrap.

The Bootstrap 4 grid system has five classes:

.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)

In your code, you can do this. 

<div class="container">
  <div class="row space">
         <div class="col-lg-2 col-md-4 col-sm-6 col-6">
            <a href="#"><img src="background.jpeg" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
        <div class="col-lg-2 col-md-4  col-sm-6 col-6">
            <a href="#"><img src="background.jpeg" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
        <div class="col-lg-2 col-md-4  col-sm-6 col-6">
            <a href="#"><img src="" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
</div>
</div>
Amit Pandey
  • 274
  • 4
  • 16
  • Still doesn't work. On mobile view it appears with col-4 not 6. I don't know how clear this is. Thanks for answering – Ben May 29 '20 at 10:06
  • what is the width of mobile? if you are using simulator, which device you are selecting? also, what do you mean by appears col-4, how much width do you want it to take on that mobile view, may be if you mention it in % i can help. – Amit Pandey May 29 '20 at 10:11
  • Depends on the mobile but its below 768px. I want below this 768px to appear 50% so to be col-6. – Ben May 29 '20 at 10:13
  • so, on below 786, how much width do you want you columns to take? – Amit Pandey May 29 '20 at 10:14
  • Still the same. col-md overrides col-sm i think – Ben May 29 '20 at 10:28
  • It looks fine to me, if this doesn't works for you, i dont know what you are expecting, may be you have some more code which is affecting this part of your code, or may be you are not clear, i tried it, and works perfectly fine for me. – Amit Pandey May 29 '20 at 10:37
  • 1
    my code didn't had this line these made the difference – Ben May 29 '20 at 10:41
  • 1
    Thanks. You were really helpful – Ben May 29 '20 at 10:43
0

For those who might have not read the comments of the selected answer:

Adding the required Bootstrap meta tags, like @Orest mentioned, solved the problem for me.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   ...
   </head>
...
</html>

Reference: https://getbootstrap.com/docs/4.1/getting-started/introduction/#starter-template

Leonardo Perrone
  • 1