Tips for displaying cards with responsive design utilizing Bootstrap 5

How can I display cards responsively for mobile, desktop, and iPad? My goal is to have:

- One column for mobile

- Two columns for iPad

- Four columns for desktop

The current code only works for mobile and desktop, not for iPad. On my iPad, it's showing four columns instead of two. How do I write CSS specifically for iPad? If anyone has a solution, please help.

CSS:

<div class="col-md-12"> 
<div class="row grid">

<div class="col-lg-3 col-md-4"> Card 1 </div>
<div class="col-lg-3 col-md-4"> Card 2 </div>
<div class="col-lg-3 col-md-4"> Card 3 </div>
<div class="col-lg-3 col-md-4"> Card 4 </div>
<div class="col-lg-3 col-md-4"> Card 5 </div>
<div class="col-lg-3 col-md-4"> Card 6 </div>
<div class="col-lg-3 col-md-4"> Card 7 </div>
<div class="col-lg-3 col-md-4"> Card 8 </div>
<div class="col-lg-3 col-md-4"> Card 9 </div>
<div class="col-lg-3 col-md-4"> Card 10 </div>
<div class="col-lg-3 col-md-4"> Card 11 </div>
<div class="col-lg-3 col-md-4"> Card 12 </div>
<div class="col-lg-3 col-md-4"> Card 13 </div>
<div class="col-lg-3 col-md-4"> Card 14 </div>
 
</div> 
</div>
cssresponsive-designbootstrap-5

Answer №1

Check out Boostrap's documentation for examples

When working with Bootstrap's 12 column grid system, you can use the following classes:

  • col-lg-3 - for four columns, 12 / 4 == 3
  • col-md-6 - for two columns, 12 / 2 == 6
  • col-xs-12 - for one column, 12 / 12 == 1

For more information on screen sizes covered by lg, md, xs, and others, refer to the grid-options section in the docs.

div {
  border: 1px dashed lightblue;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75171a1a01060107140535405b455b47">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="col-md-12">
  <div class="row grid">
    <div class="col-xs-12 col-md-6 col-lg-3">Card 1</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 2</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 3</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 4</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 5</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 6</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 7</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 8</div>
  </div>
</div>

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 CSS max-left or min-left positioning to an absolute element?

I currently have an element with the CSS properties: position:absolute; left: 70%; Is there a way to restrict this element from moving more than 900px from the left side? Similar to max-width but for positioning? ...

htmlcssmarkup

Rendering HTML5 and CSS3 on Internet Explorer 8

My coding knowledge is limited, but I am conducting research for our front-end developers. Our goal is to revamp our portal application using CSS 3 and HTML 5 in order to achieve an adaptive layout that can accommodate different browser widths. The curre ...

htmlcssbrowserinternet-explorer-8version

Having trouble with my WordPress theme not recognizing my CSS file

My file path is displayed below: D:\web server\blog.dev.cc\wp-content\themes\ablog\css for java script file path D:\web server\blog.dev.cc\wp-content\themes\ablog\assets\js Despite checking ...

csswordpressfunctionbootstrap-4stylesheet

Accessing a specific child div within a parent div using JavaScript and CSS

Struggling to target and modify the style of the child div within id="videoContainer" <div id="videoContainer"> <div style="width: 640px; height: 360px"> <------- this is the target <video src ...

javascripthtmlcssecmascript-6

Maintaining an even distribution of flex children on each line as they wrap to the next line

I am curious about finding a way to maintain an even distribution of elements on each line, including the last one, using flex-wrap or any other flexbox technique. For example, let's say I have a flexbox with 6 elements. When it wraps, I would like t ...

htmlcssflexbox

JavaScript: The functionality of calling functions through buttons ceases to function once the page is updated without reloading

I am trying to create a program that consists of one HTML page, where I can dynamically update and populate it with different elements using JavaScript. The main feature of the program is a button that remains constant in every version and displays a mod ...

javascripthtmlcssfunctionweb

determining the perfect size of a container by analyzing its content

Displayed here is a snapshot of content included in form validation for a website project that's currently in development: The content is currently situated within a div element with its width set to 20%. Initially, without this rule, the div spanned ...

css

What's the reason for the icon not updating in the responsive mode?

I am venturing into the world of responsive web design for the first time. My aim is to create a website menu that drops down when the menu icon is clicked, using the onclick command in JavaScript. However, upon inspecting my browser, I noticed an uncaught ...

javascripthtmlcss

Height not being generated by Div element

I am encountering an issue with a div element that contains an h2 and three nested div elements. Despite not explicitly setting a height for the container div, it is not expanding to accommodate the varying heights of the inner divs. This problem is causin ...

csshtmlheight

Switching icon with jQuery upon clicking

I'm just starting to learn jQuery and I'm working on changing the font icon class when clicked to display a drop down. Right now, it changes the icon and drops down the content as expected. However, I'm facing an issue where I want the icon ...

javascriptjqueryhtmlcssfont-awesome

Replacing the content of li elements

I have come up with a code snippet that generates li elements with input values after submitting the form. However, there is an issue where if you start typing in the input field again, it will overwrite all existing li elements. import './App.css&apo ...

htmlcssreactjs

Ensuring the HTML5 video poster matches the dimensions of the video content

Is there a way to adjust the HTML5 video poster so it perfectly fits the dimensions of the video itself? Check out this JSFiddle demonstrating the issue: http://jsfiddle.net/zPacg/7/ Here's the code snippet: HTML: <video controls width="100%" h ...

csshtmlattributeshtml5-video

Conditional rendering of a component in ReactJS while maintaining the "empty" space

Is there a way to conditionally render a component without affecting the layout of other components? I'm trying to avoid unwanted shifts caused by this div https://i.sstatic.net/g1eUd.gif Do you have any suggestions? Here is a snippet of my code: ...

javascriptcssreactjsmaterial-ui

Center text in the v-text-field label

Greetings! I've attempted various methods to center the label in my v-text-field, but unfortunately none of them have been successful. Please see the code snippet below: HTML Code <v-text-field dark class="centered-input" label="your code">< ...

htmlcssvue.jsvuetify.js

Bootstrap navigation bar unresponsive on mobile devices

<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark"> <a class="navbar-brand" href="#">Yehee-Lounge</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav ...

htmlcsstwitter-bootstrapbootstrap-4

Why isn't my .gif animation appearing on Google Chrome? Can anyone suggest a reason for this issue?

const urlToLoad = "winners.php"; const ajaxLoader = '<div class="preloaders"><img src="img/preloader.gif" alt="Loading..."></div>'; $(".page").click(function(){ $(".main").html(ajaxLoader).load(urlToLoad); }); I am trying ...

jqueryhtmlcssgoogle-chromeanimated-gif

Is there a way to show a progress bar that functions as the background for a table row

My table is structured as follows: th1 th2 th3 th4 th5 th6 td1 td2 td3 td4 td5 td6 td1 td2 td3 td4 td5 td6 I am looking to incorporate a feature where new rows are dynamically added using a form that triggers ...

javascripthtmlcssajaxhtml-table

Best practices for displaying output in Python Flask after submitting an HTML form

Embarking on my first web development project, I delved into Flask. Recently, I created a basic temperature converter, running it on my local host. The webpage featured a form input for entering a value, two radio buttons for selecting Fahrenheit or Celsiu ...

pythonhtmlcssflaskpython-requests

Adjust font style within an HTML/CSS document

I recently obtained the source code for an online portfolio project, but I'm struggling to figure out how to modify the font style. Can anyone provide guidance on this issue? https://github.com/akashyap2013/PortFolio_Website ...

htmlcssfont-family

Placeholder fails to appear

After implementing some jQuery validation, I wanted to display a text as a placeholder when the user skipped out of an input field without entering anything. This is the code I wrote: $('input[type="text"]').on('blur', function() { ...

javascriptjqueryhtmlcss