0

I'm trying to create responsive web layout where i should have different view in different devices screen.

  1. 2 rows 6 columns (large screen, iPad Pro and other devices)
  2. 3 rows 4 columns (iPhone 6/7/8 plus)
  3. 4 rows 3 columns (iphone 6/7/8 and smaller device)

this is what i have tried

<div class="row">
    <div class="col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="col-xs-2 col-md-2 ">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class=" col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>

    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class=" col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class=" col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
    <div class="  col-xs-2 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="">
    </div>
</div>

i've 2 row 6 colum in big screens but in iPhone 6/7/8 plus and iphone 6/7/8 and smaller device i get only one column. i don't know how to fix it, hope my problem is clear :) thanks

ted
  • 7
  • 2

3 Answers3

0

In bootstrap layout axis is divided by 12

you probably need to replace this in your div class attributes

 class="  col-xs-4 col-sm-3 col-md-3 col-lg-2 col-xl-2"

you also can use vanilla CSS to target different screen sizes

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

where for max-width in different devices you can use:

320px — 480px: Mobile devices.

481px — 768px: iPads, Tablets.

769px — 1024px: Small screens, laptops.

1025px — 1200px: Desktops, large screens.

1201px and more — Extra large screens, TV.

danial dehvan
  • 187
  • 1
  • 15
0

You can see all the available pre-set breakpoints in Bootstrap 4.5 here: https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints

To summarize:

  • Extra small devices (portrait phones, less than 576px)
    • media query: none
    • column class name: col-*
  • Small devices (landscape phones, 576px and up)
    • media query: @media (min-width: 576px)
    • column class name: col-sm-*
  • Medium devices (tablets, 768px and up)
    • media query: @media (min-width: 768px)
    • column class name: col-md-*
  • Large devices (desktops, 992px and up)
    • media query: @media (min-width: 992px)
    • column class name: col-lg-*
  • Extra large devices (large desktops, 1200px and up)
    • media query: @media (min-width: 1200px)
    • column class name: col-xl-*

And Bootstrap Grid system is using 12 columns per row: https://getbootstrap.com/docs/4.5/layout/grid/#grid-options


In other words, to construct what you want, you would need:

  • 3 columns per row (iphone 6/7/8 and smaller device)
    • 12 / 3 = 4
    • column class name: col-4
  • 4 columns per row (iPhone 6/7/8 plus)
    • 12 / 4 = 3
    • column class name: col-sm-3
  • 6 columns per row (large screen, iPad Pro and other devices)
    • 12 / 6 = 2
    • column class name: col-md-2

<div class="container-fluid">
    <div class="row">
        <div class="col-4 col-sm-3 col-md-2">
            </img />
        </div>
        ...
    </div>
</div>

demo: https://jsfiddle.net/davidliang2008/aoc3ksve/3/


You can use .img-fluid on images to get responsive images too:

demo: https://jsfiddle.net/davidliang2008/aoc3ksve/5/

David Liang
  • 20,385
  • 6
  • 44
  • 70
  • thanks for explaination but your code doesn't solve my problem . i get 3 rows and 5 columns which i didn't want. what i realy want is 3 rows 4 columns (iPhone 6/7/8 plus) 3. 4 rows 3 columns (iphone 6/7/8 and smaller device) and in other screen 2 rows 6 columns – ted Oct 27 '20 at 10:36
  • @ted: you're using Bootstrap 4 aren't you? There are some breaking changes between Bootstrap 3 and 4, and replacement of `col-xs-*` to `col-*` is one of them. Have you seen my demo links up there? If you're indeed using Bootstrap 3, please update your tag from bootstrap-4 to bootstrap-3. – David Liang Oct 27 '20 at 16:06
0

The Bootstrap3 grid system has four classes:

xs (for phones - screens less than 768px wide)

sm (for tablets - screens equal to or greater than 768px wide)

md (for small laptops - screens equal to or greater than 992px wide)

lg (for laptops and desktops - screens equal to or greater than 1200px wide)

.img-responsive {
  margin: 0 auto;
}

/* Here 414px and 736px are width of iPhone 6/7/8 plus */

@media only screen and (min-width: 414px) and (max-width: 736px) {
  .col-xs-4 {
     width: 25%;
  }
}
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="row">
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2 ">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>

    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="https://icons.iconarchive.com/icons/iconka/meow/96/cat-purr-icon.png" alt="" class="img-responsive">
    </div>
</div>
Rafee Shaik
  • 681
  • 4
  • 10