showing 2 items in a row on mobile devices and 4 items in a row on larger screens with the help of bootstrap

I am currently constructing a static e-commerce platform using bootstrap. My goal is to have 2 products displayed in a row when viewed on a phone, and 4 products showcased in a row for desktop or iPad users.

<div class="container">

 <div class="row product">
    <div class="col-md-3">
        <div class="image">
            <a href="products.php?q=10020" target="_blank"><img id="10030" src="#"></a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="image">
            <a href="products.php?q=10020" target="_blank"><img id="10030" src="#"></a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="image">
            <a href="products.php?q=10020" target="_blank"><img id="10030" src="#"></a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="image">
            <a href="products.php?q=10020" target="_blank"><img id="10030" src="#"></a>
        </div>
    </div>
 </div>

Multiple rows are featured on this page layout, presenting me with a challenge that I need assistance in resolving.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

The problem you're encountering seems to be related to how your Bootstrap grid is set up.

For a clearer explanation, I've provided an example below. Make sure to focus on the classes like "col-xs-6 col-md-3".

If you need more information, check out the documentation here: https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>

<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-3" style="background-color:green;">1</div>
<div class="col-xs-6 col-md-3" style="background-color:blue;">2</div>
<div class="col-xs-6 col-md-3" style="background-color:red;">3</div>
<div class="col-xs-6 col-md-3" style="background-color:yellow;">4</div>
</div>
</div>

</body>
</html>

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

Is there a way to specify an array of route names for dynamic routing in NextJS?

I am currently utilizing dynamic routing in my application. The folder structure I am working with is as follows: -pages -department -[slug].js My goal now is to display the page only if the slug value matches one of the following: cse, eee, swe, en ...

javascriptreactjsaxiosnext.js

Activate CSS div animation when the page loads

I wanted to incorporate a box with text that would fly in from the right upon page load using animate css. Unfortunately, I encountered some issues with animate css as it disrupted the stacking order of my page. All I really need is for my 'sheree_t ...

jquerycsstransformtranslate-animation

Executing a fundamental three.js program

After downloading three.js from the official site, I encountered a strange error while trying to run a basic file. However, when I replaced the local import of the three.js file with a CDN, it started working properly. Can someone assist me in getting the ...

javascriptthree.js

Insert new data while appending to the existing array

After implementing the Schema below: var TestSchema = db.Schema({ name: { type: String, required: true, unique: true } data: [] }, { strict: false }); var Test = db.model('Test', TestSchema); I have set strict: false. My goal is to per ...

javascriptnode.jsmongodbmongoosemean-stack

Is there a way to export a React component with embedded CSS styles as a self-contained snippet?

Is it possible to export a section from my Gatsby site as a standalone HTML component with CSS styles (using styled-components) for easy insertion into a blog as a snippet? Or do I need to resort to the tedious process of manually copying all the compiled ...

htmlcssreactjsgatsbystyled-components

A more effective method for restricting the properties of a field in an aggregate query

In my MongoDB query, I am attempting to use the aggregate function to fetch data from one collection while limiting the amount of data retrieved from another collection. Here is the code snippet that I have come up with: getFamilyStats: function (req, res ...

javascriptnode.jsmongodbmongoose

Unable to update values in Google Sheets using the node.js API

I have been working on a node.js project that involves extracting the location of a cell based on a person's name and date. While I am able to determine this information easily, I encounter difficulties when trying to update the cell using the .update ...

javascriptnode.jsgoogle-sheets-api

Utilize the powerful Bootstrap 4 class to enhance the width of the horizontal rule (<hr />) element effortlessly, no need for custom CSS

Is there a built-in Bootstrap 4 class that can be used to modify the thickness and color of the horizontal ruler without having to resort to custom CSS? ...

htmlcssbootstrap-4

The Json object's size increases exponentially with each subsequent return

There seems to be a strange issue with the PHP file that is causing the JSON objects to duplicate. The first time I run the script, I receive 5 rows, which matches the number of rows in the table. However, on the second run, I get double the results. Wha ...

javascriptphpjson

The login system detected an error due to an incorrect email/username combination

I've implemented a login system on my website that allows users to create an account, log out, and then log back in. However, there seems to be an issue with the error message displaying when someone tries to log into an account that doesn't exis ...

phphtmlmysql

What's the best way to reduce the dimensions of this container in order to align them next to one another?

https://i.sstatic.net/VHahe.jpg As a novice student in the world of coding with html and css, I have embarked on a project to create a website. However, I've encountered a minor issue... I'm looking to adjust the width of these boxes so they al ...

htmlcss

Fluid animation using CSS for recently added elements in a scrolling list

I've been searching for a way to create a smooth animation effect when a new element is added to a scrolling list. For example, as a new element is added to the top of the list and older elements are pushed down, I want the transition to be visually ...

htmlcssangularscrollfrontend

The significance of Z-index in Embedded Email Subscription Code

I am encountering an issue with a pop-up window I have created for visitors to sign up for our mailing list. The problem is that the CSS menu appears on top of the pop-up, despite setting the menu's z-index to 9999. How can I adjust the z-index in the ...

cssdrop-down-menuz-index

Grabbing specific inline JSON data with jQuery's .getJSON function or a comparable method

I am trying to extract information from an array embedded within a <script> tag using jQuery's .getJSON method. According to the documentation I've come across (http://api.jquery.com/jquery.getjson/), .getJSON typically needs a URL and an e ...

jqueryarraysjsongetjsonassociative

Is it possible to send both the authRequired and WL.Server.invokeHttp values back to the client side using web services in Adapter-based authentication with Worklight?

When using Adapter based authentication with worklight and angularJs, the submitLogin procedure is called upon clicking the login button to pass the username and password as parameters. The query arises after invoking the adapter on how to return both the ...

javascriptangularjsibm-mobilefirst

Leveraging data within Gatsby to dynamically generate and display content

I am encountering a problem as a newcomer to Gatsby. In my EventsContainer, I have an UpcomingEvent component where I need to render specific data only when upcomingEvent is true. While I successfully utilized map for EventCard, I'm struggling to do t ...

javascriptreactjsdatabasegatsby

Update: When a variable changes during onUploadProgress in Vue.js, the DOM is not re

Having a bit of an issue here. I'm working on an app where users can upload images using axios. In order to enhance the user experience, I'm trying to implement a loading bar. Here's what it looks like: <div class="loadingbox" :style="{ ...

javascriptvue.jsaxios

Creating a dropdown menu within a <span> element with JavaScript

Snippet of HTML: <body onload="init();firstInit();"> Snippet of JavaScript: function init(){ var tb = new Ext.Toolbar({ renderTo: 'toolbar', height: 25 }); var ht='<table><tr>'; ht+='<td>&apo ...

javascripthtml

"Creating a never-ending scroll feature for your Vue.js application: a step-by-step

Currently working on a photo gallery project using Vue and Unsplash API. I am looking to implement an infinite scroll feature for loading images. The API I have is structured like this: "https://api.unsplash.com/photos?page=1". How can I set it up so tha ...

javascriptvue.jsinfinite-scroll

Jest and Typescript: A guide to mocking the Date object

Is there a way to mock a date object for all unit test cases in TypeScript? I have tried various JavaScript references, but they are not working due to type errors. Can someone offer a solution to resolve this issue? // Testing sampleMethod() describe(&ap ...

javascriptnode.jstypescriptjestjs