Issues with Boostrap grid system on smaller screens

Question

Issues with Boostrap grid system on smaller screens

I'm attempting to design a flexible web layout that displays differently on various device screens. Here's the breakdown:

2 rows 6 columns (large screens, iPad Pro, and other devices)
3 rows 4 columns (iPhone 6/7/8 plus)
4 rows 3 columns (iPhone 6/7/8 and smaller devices)

This is what I've attempted so far:

<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>
    <!-- Repeat for each column -->
</div>

On large screens, I have 2 rows and 6 columns, but on iPhone 6/7/8 plus and smaller devices, I only see one column. I'm unsure how to resolve this issue. Any assistance would be appreciated. Thank you!

css bootstrap-4

Answer 1

Answer №1

In the world of bootstrap, the layout axis is divided into 12 equal parts

If you want to customize your div class attributes, consider updating them as follows:

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

Alternatively, you can utilize vanilla CSS to specifically target various screen sizes

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

To cater to different device sizes, you can use the following max-width breakpoints:

- Mobile devices: 320px - 480px

- iPads, Tablets: 481px - 768px

- Small screens, laptops: 769px - 1024px

- Desktops, large screens: 1025px - 1200px

- Extra large screens, TV: 1201px and above

Answer 2

In the world of bootstrap, the layout axis is divided into 12 equal parts

If you want to customize your div class attributes, consider updating them as follows:

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

Alternatively, you can utilize vanilla CSS to specifically target various screen sizes

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

To cater to different device sizes, you can use the following max-width breakpoints:

- Mobile devices: 320px - 480px

- iPads, Tablets: 481px - 768px

- Small screens, laptops: 769px - 1024px

- Desktops, large screens: 1025px - 1200px

- Extra large screens, TV: 1201px and above

Answer 3

Answer №2

Discover all the predefined breakpoints offered in Bootstrap 4.5 by checking out this link: https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints

To summarize:

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

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

In essence, to achieve what you desire, 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 apply .img-fluid to images for responsive image display as well:

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

Answer 4

Discover all the predefined breakpoints offered in Bootstrap 4.5 by checking out this link: https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints

To summarize:

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

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

In essence, to achieve what you desire, 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 apply .img-fluid to images for responsive image display as well:

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

Answer 5

Answer №3

The grid system in Bootstrap3 is divided into four distinct classes:

xs (designated for phones with screens less than 768px wide)

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

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

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

.img-responsive {
  margin: 0 auto;
}

/* Dimensions of iPhone 6/7/8 Plus - 414px and 736px width */

@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="/jquery.js"></script>
  <script src="/bootstrap.min.js"></script>

<div class="row">
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="/cat-image.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2 ">
        <img src="/cat-image.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="/cat-image.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="/cat-image.png" alt="" class="img-responsive">
    </div>
...

Answer 6

The grid system in Bootstrap3 is divided into four distinct classes:

xs (designated for phones with screens less than 768px wide)

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

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

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

.img-responsive {
  margin: 0 auto;
}

/* Dimensions of iPhone 6/7/8 Plus - 414px and 736px width */

@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="/jquery.js"></script>
  <script src="/bootstrap.min.js"></script>

<div class="row">
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="/cat-image.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2 ">
        <img src="/cat-image.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="/cat-image.png" alt="" class="img-responsive">
    </div>
    <div class="col-xs-4 col-sm-3 col-md-2">
        <img src="/cat-image.png" alt="" class="img-responsive">
    </div>
...

Issues with Boostrap grid system on smaller screens

Answer №1

Answer №2

Answer №3

Similar questions

change the css style with the !important rule to muiStyle

Design a sophisticated background using CSS

Different methods to incorporate Glyphicons without relying on Bootstrap CSS

Create a hover effect for a list item that displays an image and text simultaneously

Is it possible to utilize v-html with message data in Vue without any limitations on the <title> element?

Switch from Index.html to Index.html#section1

How can I create an image link with a hover effect using HTML and CSS?

Is there a way to trigger the opening of a new file or page when a CSS animation comes to an end?

Make Webpage Height Adjust to Browser Size

Create unique list markers by utilizing the "::marker" and "content" properties

Use JavaScript to add a div element to the page ten times every time the button is clicked

Troubleshooting border styling problems on an iPad for a table

Bootstrap 4 tooltip/popover with automatic fallback placement (utilizing two possible placement options)

Which specific element of CSS should be adjusted to ensure compatibility with Internet Explorer?

What is the purpose of the tabindex in the MUI Modal component?

Conceal table rows with JQuery in html

One way to display a div's inner HTML as its background is to apply a CSS rule

A slew of problems arises from this horizontal list

Steps for eliminating a column from a table

CSS: Header overlapping navigation menu, disrupting hover effects