What is a way to show a single row of six columns on desktop and two rows of three columns on mobile devices?

I have a section with 6 images that I want to display in one row with 6 columns on desktop, and then in two rows with 3 columns each on mobile.

While I have achieved the desired layout on desktop, the images stack on top of each other in a single column on mobile. I aim for them to be displayed in two rows with three columns each.

Below is the code snippet:

<div class="row">

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

</div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To optimize your Bootstrap 4 layout for smaller screens, simply remove the "-sm" from the class name and use "col-4" instead. This will target screens with a width of less than 576px, following the mobile-first approach of Bootstrap 4 as outlined in the documentation available at https://getbootstrap.com/docs/4.0/layout/grid/

<div class="row">

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

</div>

Answer №2

If you have the following HTML code, try incorporating the provided CSS to achieve the desired output:

CSS & HTML- 

.row {
  width: 100%;
}

.row img {
  height: 100px;
  width: auto;
}

.col-sm-4 {
  height: 100px;
}

.col-sm-4:nth-child(1) {
  background: #999;
}

.col-sm-4:nth-child(2) {
  background: #888;
}

.col-sm-4:nth-child(3) {
  background: #777;
}

.col-sm-4:nth-child(4) {
  background: #555;
}

.col-sm-4:nth-child(5) {
  background: #333;
}

.col-sm-4:nth-child(6) {
  background: #111;
}

@media only screen and (max-width: 767px) {
  .col-sm-4 {
    float: left;
    width: 33.3%;
  }
}

@media only screen and (min-width: 768px) {
  .col-lg-2 {
    float: left;
    width: 16.6%;
  }
}
<div class="row">

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

</div>

Adjust the browser window size to view the results effectively.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to apply custom styles in reactJs to toggle the visibility of Google Maps?

There are three radio buttons that correspond to school, restaurant, and store. Clicking on each button should display nearby locations of the selected type. Displaying Google Map and nearby places individually works fine without any issues. class Propert ...

javascriptcssgoogle-mapsreactjsgoogle-maps-markers

Guide to passing arguments to a function within Vue's v-for loop?

Is there a way to pass the parameter {{ item.id }} to my function productos.mostrarModal() within a v-for loop in vue.js? <div v-for="item of articulos"> <a href="#" onclick="productos.mostrarModal()" > <h2>{{item.name}}< ...

javascripthtmlvue.jsvuejs2vue-component

Creating a unique input box using CSS and HTML

Could someone help me achieve an input box like the one shown in the image below? https://i.stack.imgur.com/XtVNj.png Since I am new to CSS, I am not sure how to put text inside the border of an input box. Should I style the input directly or create a di ...

javascriptcss

The malfunctioning collapse feature in Bootstrap 4 sidebar within an Angular 6 application

I am trying to find a way to collapse and reopen the sidebar when clicking on a button. I have attempted to create a function to achieve this, but unfortunately it did not work as expected. Important: I need to collapse the sidebar without relying on jque ...

angulartypescriptbootstrap-4angular6

What could be the reason for my Form styling failure?

Currently working on freecodecamp's portfolio creation exercise. It should be a straightforward task, but I'm facing a small issue that's puzzling me. I'm trying to remove the border and outline (when focused) from my contact-area form ...

htmlcssforms

The Hover Effect fails to function properly on Internet Explorer 6

I have successfully implemented a CSS hover effect that works perfectly in all browsers except for IE6. The issue arises when I add a link to the page - the hover effect functions as expected. However, if I remove the link, the hover effect stops working. ...

cssinternet-explorer-6

Using Bootstrap and PDO for Pagination

Looking for guidance on implementing pagination with PDO in PHP Since I am unable to comment yet, I have decided to post a new question: I'm curious about how to indicate which button/link is currently active when utilizing the "ANSWER" on that ques ...

phppdobootstrap-4

Utilize CSS to incorporate an image as the background of a <div> element

I'm a beginner in the world of HTML/CSS and this is my practice page. I have a section with an image of a person, and I'd like to add a quote next to the image. However, I'm struggling to make the image fill the entire width and height of th ...

htmlcssimage

Searching for a comprehensive guide to web-related terminology that is widely accepted

Constantly immersing myself in studying the languages I am familiar with and exploring new development concepts and languages is a regular practice for me. When it comes to books, O'Reilly is my go-to choice, but when it comes to online resources, I&a ...

phphtmlcssprogramming-languages

Is there a specific measurement or scale for the dragging feature in jQuery UI draggables?

I'm interested in adjusting the position of my draggable element based on the distance moved by the mouse. For instance, if the scale is 1:2 and the cursor is moved 10px to the right, then the draggable should move 20px. I already have my draggable ...

javascriptjqueryhtmljquery-ui

Is there a way to transfer controller scope to a partial HTML file?

Welcome to my HTML setup <div ng-controller="filterController"> <div class="quick-view" id="quickview" data-toggle="modal" data-target="#modal-bar" ng-click="quickView(quickview)"><i class="fa fa-eye"& ...

htmlangularjsajax

Is your pagination feeling a bit sluggish?

I have been working on a basic table application that showcases dummy data with columns such as name, number, date, and more. Users have the ability to sort the table by columns and navigate through paginated pages. However, I have encountered an issue wh ...

angularjstwitter-bootstrappaginationangularjs-ng-repeatangular-ui-bootstrap

Incorporate Bootstrap rows within the Wordpress post loop for enhanced design

I have 4 bootstrap columns with unique styling for each. I am looking for a way to dynamically insert and close <div class="row"> around these columns based on the number of results returned. If there is only 1 result, the row should only s ...

wordpressloopsbootstrap-4

Ways to create interactive images

<div className="col-lg-3 col-md-3"> <li> <img src='https://i.imgur.com/fe0T4nw.png' onClick="https://arizonaatwork.com" /> </li> </div> I am currently working on a project where I need to link an image ...

reactjsbootstrap-4

The side modal features a full-height design with headers, bodies, and footers that are

I have created a side modal that extends to full height. The content in the modal body is quite lengthy, but I am facing an issue where the header, body, and footer are not equal in size. I am considering using scrollspy on the HTML body tag to potentially ...

cssmodal-dialogbootstrap-4bootstrap-modal

Preventing an image from being repeated when using Canvas drawImage() without having to clear the entire canvas

How can I prevent multiple instances of the same image from smearing across the canvas when drawing it? The platforms seem to stick together and not separate properly. Why do I have to clear the entire rectangle for everything to disappear? Does anyone ha ...

javascriptcsshtml

Import information from a MySQL table into a single input field

I am currently working on a project that involves retrieving data from a MySQL database and displaying it in a single field. Below is the MySQL code I am using: My goal is to load all the data from $row['db_numbers']; into the field. <input t ...

phphtmlmysql

A new URL must be refreshed for the link to properly bind the data received from the API call with the subscribe method

In my Angular application, I have a URL link that fetches data from the backend API using the subscribe method in a component. The expected behavior is that when this URL is accessed in a browser, the data should be displayed in the corresponding HTML comp ...

htmlangularapiurltypeerror

What is the proper way to mention JavaScript packages when including them as parameters in Angular elements within HTML?

I was looking to enhance the command to be more authoritative. <div (click)="lastCall(999)">click me</div> My attempt to utilize Number.MAX_SAFE_INTEGER resulted in an error from my computer stating that it wasn't recognized. As a result ...

javascripthtmlangulartypescript

What is the best way to extract information from a .txt file and transform it into an integer format?

I am currently working on a project involving a distance sensor that retrieves data from a Raspberry Pi and displays it on a website. The goal is to have the data stored in a .txt file and then transferred to the website for display. I am seeking assistanc ...

javascripthtmlfontsinteger