Looking to create a responsive card design that displays 4 cards on desktop and 2 cards on mobile devices

I am a beginner in web design and currently working on my website. I want to create a category section that displays 4 cards on desktop and 2 cards on mobile view.

Here is the code I have so far:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47252828333433352637077369716975">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="categories-main">
  <div class="container bg-light rounded">
    <br>
    <div class="h4 font-weight-bold text-center py-2">Categories</div>
    <br>
    <div class="row">
      <div class="col-lg-3 col-md-6 my-lg-2 my-2">
        <div class="box bg-white">
          <div class="d-flex align-items-center">
            <div class="rounded-circle mx-3 text-center d-flex align-items-center justify-content-center blue"> <img src="#" alt=""> </div>
            <div class="d-flex flex-column"> <b>Public Speech</b>
              <a href="#">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br> Categories
  <br>

I have made several attempts at adjusting the code, but I haven't been able to achieve my desired layout. I would greatly appreciate any help or suggestions from experienced developers.

htmlcssbootstrap-4

Answer №1

According to the Bootstrap documentation, the maximum number of columns is 12. To achieve this, you can use col-6 col-6 for mobile (resulting in 2 columns) and col-3 col-3 col-3 col-3 for desktop (resulting in 4 columns).

Here's a simplified example:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ffdf0f0ebecebedfeefdfabb1a9b1ad">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <div class="row">
      <div class="col-6 col-lg-3 my-lg-2 my-2">
        <div class="box bg-red">
           1
        </div>
      </div>
      <div class="col-6 col-lg-3 my-lg-2 my-2">
        <div class="box bg-blue">
           2
        </div>
      </div>
      <div class="col-6 col-lg-3 my-lg-2 my-2">
        <div class="box bg-green">
           3
        </div>
      </div>
      <div class="col-6 col-lg-3 my-lg-2 my-2">
        <div class="box bg-black">
           4
        </div>
      </div>
    </div>

Answer №2

By default, you have a grid system with 12 columns.

For example, you can structure your HTML like this: 

<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">

When the screen is xl, you will have 4 columns in a row.
When the screen is lg, you will have 3 columns in a row.
When the screen is md, you will have 2 columns in a row.
When the screen is sm, you will have 1 column in a row.

Feel free to customize the columns based on different devices according to your preferences. :)

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

Utilize Xpath to transition between different html tags seamlessly

Here is the HTML snippet I am working with: <pre> <span class="cm-string">"userId"</span> ":" <span class="cm-string">"abc"</span> "," </pre> My goal is to extract the text "abc" from the "userId" tag, which changes fr ...

javahtmlseleniumxpathselenium-webdriver

What is the best way to transform an HTML table into a jQuery array of key-value pairs?

I have an HTML table (without a tbody tag) and I am trying to convert the HTML data into key-value pairs (header-data) in a jQuery array. Currently, when I run the code snippet, the output only displays data from the last row of the table. ************Cur ...

htmljqueryarrayshtml-tablekey-value

Variations in CSS styling based on the image's individual style

Looking for assistance with aligning text with images that are wrapped by text and aligned left or right within the .html file. The desired effect is to have margin space to the right when the image is on the left (margin: 0 1rem 0 0), and vice versa, to h ...

htmlcsscss-float

What is the best way to generate a PHP loop that auto-populates content in a Bootstrap grid layout?

Currently, I am in the process of building a website for a school project. I need to figure out how to make the following PHP code loop automatically and display in a Bootstrap col-md-4 grid until there is no more content. I am feeling overwhelmed and un ...

phpmysqlbootstrap-4bootstrap-5

Optimal method for integrating AJAX-loaded views into an existing DOM structure

Picture this common scenario: You're looking at a webpage with a list of items, like this: <ul class="items"> <li class="item">Item 1</li> <li class="item">Item 2</li> <li class="item">Item 3</li> < ...

htmlajaxclient-side

Avoid showing an image when it is outside the div container

Within a single div, I have an assortment of images that are dynamically repositioned using JQuery. $("#"+carElem).css({"left": pos.left+50 +"px"}); I am currently utilizing absolute positioning (although relative positioning yields the same outcome). Is ...

javascriptjquerycss

HTML Crossword Puzzles

This intriguing puzzle exclusively allows lowercase letters. How can I modify it to accept both upper and lowercase letters? Alternatively, is there a way to prompt the user to disable caps lock? HTML <body onload="initializeScreen()"> ...

javascripthtmlcsscrossword

How do I position a div right below a button using CSS and Jquery?

I have a button that, when hovered over, reveals a hidden div element. Is there a way to position this div directly beneath the button once it is revealed? <script type="text/javascript> $(document).ready(function(){ $(".plans").hover(function() ...

jquerycss

Combine two FontAwesome icons in a stacked manner

Is there a way to group 2 icons together and display them one above the other? I attempted to use the fa-stack class, but the images are overlapping. How can I achieve this layout? <span class="fa-stack fa-lg"> <i class="fa fa-envelope fa-stack ...

cssfont-awesome

Create a div element that is set to be 30 pixels smaller than its containing div

I am trying to achieve a specific layout where I have a nested div structure. The parent div has a width set in percentage (80%) and I want the child div to be slightly narrower by 30px. Can anyone provide guidance on how I can accomplish this? Do I need ...

javascripthtmlcss

Using Media Queries to Optimize Image Display for Higher Pixel Densities: @2x, @3x,

My current project involves supporting various pixel ratios on the website I am developing. I want to make sure that I include all necessary browser prefixes to ensure compatibility with a wide range of devices and browsers. While I am using SVGs whenever ...

imagecssmedia-queriesretina-display

Menu that drops down from the trigger control

Looking for a more efficient way to display a dropdown menu div with the tags below on click of multiple buttons. Instead of hiding the div under each button or making an Ajax call to render the content every time, I am exploring options to hide the div ...

jquerycssajaxjquery-ui

Adjust the vertical position of the image with HTML and CSS

I want to adjust the positioning of the image below the blue navigation bar so that it aligns with the main content area below, creating the appearance of a shaded box around the webpage's content. The image in question is boy_top.png. Is there a way ...

csshtml

Populating numerous HTML tables from a database table that has been loaded with data from a CSV file

My current website features a simple interface where users log in and can either Upload or View data. They have the option to upload a CSV file with around 300 fields or search for specific records already uploaded, sorted by certain keys. I have an HTML ...

phphtmlmysqlcsvhtml-table

Is it possible for ColdFusion to transmit HTML5 Server-Sent Events using utf-8 encoding?

When using <cfcontent type="text/event-stream"> in ColdFusion, I encountered an issue where non-English characters were displayed as question marks: ???????123123???? ???. Interestingly, the rest of the page was able to display non-English characters ...

htmlgoogle-chromecoldfusionserver-sent-events

Issues with custom logo and menu/sidebar toggle on Wordpress

Hello everyone, I am currently facing some difficulties with my new WordPress blog that utilizes the Skilt-Theme. Specifically, I'm having trouble with the custom-logo and sidebar-toggle features. When there is no logo present, you can see the layout ...

csswordpressheadergraphical-logo

My HTML, JS, and Canvas project is experiencing issues with displaying images from my JS scripts

I'm attempting to animate 3 boats using JavaScript within a Canvas element. However, I've encountered a problem with my project where the startGame function isn't displaying the images I've selected. Strangely, it only seems to work wit ...

javascripthtmlcsscanvasvisual-studio-code

Adding alternative text to background images is a crucial step in ensuring their accessibility. Providing alt text allows screen

One challenge I am facing is that my website displays images as background images using background-size: cover to fill the element completely and crop out any excess parts of the image. However, these images are not just decorative; they are essential for ...

htmlcssaccessibility

``I am having difficulty with Bootstrap as it seems to be hiding my field or

I'm currently working on a webpage that uses Bootstrap. It has a form with a label and text input field. When I add the class="custom-control-input" to the input field, Bootstrap hides it. Can someone explain why? If I don't include the class, ...

css

Using jQuery to target adjacent elements excluding those that are separated by other text

I have been attempting to locate and combine adjacent em tags within paragraphs, but it has proven to be a more challenging task than I initially anticipated. Let's explore some examples to illustrate this issue: <p><em>Hello</em>&l ...

javascriptjqueryhtmltraversal