CODEWITHSUNDEEP
htmlcssbootstrap-4
Ben
Ben

Reputation: 25

col-lg-2 col-md-4 col-6 not working on bootstrap 4. At mobile view they appear with col-md-4 not col-6

<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.

Upvotes: 2

Views: 951

Answers (2)

Leonardo Perrone
Leonardo Perrone

Reputation: 1

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

Upvotes: 0

Amit Pandey
Amit Pandey

Reputation: 314

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>

Upvotes: 1

Related Questions