What is the best way to showcase a consistent number of images in a row across various devices?

I'm trying to figure out how to display a set of images in a row using Bootstrap grids. On large devices, I want 4 images displayed, on small and medium devices I only want 2 images shown. However, when I resize the screen to a smaller size, the images take up the full width instead of just 50%, resulting in 1 image per row.

How can I adjust my Bootstrap code to make the images take up only 50% of the width so that 2 images are displayed in a row?

img{
  height: 200px;
}
<div class="row pr-3 pt-1 pl-3 pb-3">
  <div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3"> 
       <img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap">
       <div class="card-body">
            <h5 class="card-title">grid1 </h5>
     
       </div>
  </div> 
  <div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3"> 
       <img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap">
       <div class="card-body">
            <h5 class="card-title">grid2</h5>
        </div>  
 </div>
 <div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3"> 
      <img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap">
      <div class="card-body">
           <h5 class="card-title">grid3</h5>
      </div>
 </div>
 <div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3"> 
      <img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap">
      <div class="card-body">
           <h5 class="card-title">grid4</h5>
           </div>
 </div>  
 </div>
            

Answer №1

Update the grid class to col-md-6 instead of col-md-3

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

React encountered an abrupt end of JSON input unexpectedly

As I embark on my coding journey, I am delving into the world of React. However, as I try to create a new app, I encounter an error message stating "unexpected end of JSON input." While installing packages and waiting patiently, the console throws an err ...

What is the best way to ensure the footer is always positioned at the bottom of each page

Hey there, I'm having an issue with printing a large table on my HTML page. I want the footer to appear at the very bottom of every printed page, but so far I haven't found a perfect solution. I came across using tfoot, which prints the footer at ...

What is the best way to manage a batch of files in a response from an Ajax POST request?

Currently, I am utilizing the OGRE web client to convert GeoJSON text data into ESRI shapefiles by making a POST request with Ajax. var data = { "type": "FeatureCollection", "features": [{ "type": "Feature", "geometry": { "type": "Point", "coord ...

Transmit a basic JSON object from a Node.js server to an index.html webpage

People often overlook this seemingly simple solution when I search for it on Google. My goal is to send a basic json message or file to my index.html page. Here's the Node.js code: const express = require('express'); const app = express(); ...

How to implement horizontal scrolling in an Ionic/AngularJS app

Struggling to implement a scroll navigation with ionic, but encountering issues with navigation and styling. Seeking guidance on how to achieve the desired outcome: Desired navigation look: https://i.sstatic.net/vQ2CS.png Current implementation showcases ...

Utilizing jQuery's AJAX method to extract and interpret the response

It's frustrating me because I've done this so many times before, and now it's not working. Something is definitely off, but I can't seem to pinpoint the issue. I'm currently utilizing the jQuery .get method to fetch html content f ...

Can you explain the use of the 'this' keyword in map() and call() functions?

Recently, I've been revisiting my understanding of how to use call() and map() with a NodeList in JavaScript. It was quite easy to find information on how call() works, and there are plenty of examples of how it can be used with map(). However, whil ...

Font Awesome icons occasionally display as squares, but typically they render correctly

I've noticed a strange issue on my website where the font awesome icons sometimes display as squares instead of their intended design. After searching through forums, it seems that my situation is different from others experiencing similar problems. I ...

Utilizing jQuery for AJAX requests on a timed loop

I'm puzzled by a situation involving an AJAX call within an interval. It seems that the code doesn't work as expected, and I'm wondering why. Initially, I had this code snippet which wasn't functioning properly: setInterval($.ajax({ ...

Guide to assigning an integer value to a string in Angular

Is there a way to change integer values in a table to actual names and display them on a webpage by setting a scope in the controller and passing that string to the HTML? For example, this is an example of the HTML code for the table row: <thead> ...

Issue exporting excel file in Angular using ExcelJS: encountering error TS2307 stating "Cannot find module 'stream'" and error TS2503 indicating "Cannot find namespace 'NodeJS'"

Exporting an excel file using ExcelJS has been a challenge for me. When I checked my console in the VS Code terminal, I encountered the following errors: ERROR in node_modules/exceljs/index.d.ts:1398:22 - error TS2307: Cannot find module 'stream&apo ...

How can I use querySelector in JavaScript to target all div elements that have the same class?

I'm having an issue with the document.querySelector in my JavaScript code. It currently only selects the first div that contains the class "test", but I need it to select all such divs. Is there a way to achieve this using my existing JavaScript? ...

Styling a specific element in Svelte without needing a globally unique identifier

How can I target just the outer div using a css selector? <div> <div>...</div> <div>...</div> </div> <style> OUTER.DIV.ONLY { background: url(outer.png); } </style> Alternatively, I& ...

Angular-cli: The launch speed needs improvement

Looking for ways to speed up the launch time of my Angular2 application. Currently, it takes 10-12 seconds to load. The application has multiple modules that are loaded using lazy loading. Here is a snippet from my package.json file: { // Package deta ...

Tips for changing the width of a child element in CSS without impacting the parent's width

Here is the scenario: <div class="parent"> <div class="sizer" /> <div class="child" /> </div> .sizer { width: 200px; } .child { position: relative; width: 400px; } I am facing restrictions - I cannot explicitly set the width ...

The srcSet functionality in the Image component seems to be malfunctioning in the next.js framework, as it is failing to display

Check out my Next.js code snippet below: import React from "react"; import style from "@/styles/Home.module.css"; import Image from "next/image"; function index() { return ( <> <div className="contai ...

Implementing yup validation to check if a form field begins with the same value as another input field

In my form, I have two fields - carriercode and billnum. I want to ensure that the value in the billnum field always starts with the carriercode as a prefix. For example, if carriercode=ABCD, then billnum should start with ABCD followed by any combination ...

Creating a structured HTML/PHP page for permanent redirection to another webpage

I'm trying to restructure a part of my website, but I'm struggling to figure out how to do it. This is in the context of a logged-in user: On page 1, the user clicks a button to navigate to page 2 On page 2, the user performs an OPERATION to go ...

Transforming jquery code into angularjsAre you looking to migrate your

I am currently struggling with converting a jQuery function into an AngularJS function. Here is the specific code snippet: $('p').each(function() { $(this).html($(this).text().split(/([\.\?!])(?= )/).map( function(v){return '< ...

Take up the full vertical and horizontal space of the elements in each image

Issue: I'm facing a problem with my image slider where I am unable to occupy the full width and height (100%) of the drosp and abc classes. Inquiry: How can I ensure that all images fill their entire space without compromising on quality? code < ...