Achieving a consistent display of three cards lined up in a row

Is there a way to ensure that 3 cards are always displayed in a row on all device sizes? Currently, the layout breaks into another row when the screen is minimized. Thank you!

function DisplayCards() {
const [items, setItems] = useState([{}, {}, {}, {}, {}, {}]);
return (
    <div class="row row-cols-1  row-cols-md-3 ">
        {items.map((item, key) => (
            <div class="col mb-4">
                <Card className="nesto ">
                    <Card.Img variant="top" src="holder.js/100px160" />
                    <Card.Body>
                        <Card.Title>Card title</Card.Title>
                        <Card.Text>
                            This is a wider card with supporting text below
                            as a natural lead-in to additional content. This
                            content is a little bit longer.
                        </Card.Text>
                    </Card.Body>
                    <Card.Footer>
                        <small className="text-muted">
                            Last updated 3 mins ago
                        </small>
                    </Card.Footer>
                </Card>
            </div>
        ))}
    </div>
);

}

Answer №1

Switch to using col-4 instead of col mb-4

function DisplayCards() {
     const [items, setItems] = useState([{}, {}, {}, {}, {}, {}]);
     return (
    <div class="row row-cols-1  row-cols-md-3 ">
        {items.map((item, key) => (
            <div class="col-4">
                <Card className="nesto ">
                    <Card.Img variant="top" src="holder.js/100px160" />
                    <Card.Body>
                        <Card.Title>Card title</Card.Title>
                        <Card.Text>
                            This is a wider card with supporting text below
                            as a natural lead-in to additional content. This
                            content is a little bit longer.
                        </Card.Text>
                    </Card.Body>
                    <Card.Footer>
                        <small className="text-muted">
                            Last updated 3 mins ago
                        </small>
                    </Card.Footer>
                </Card>
            </div>
        ))}
    </div>
);

Answer №2

Utilize the React Bootstrap grid system

  <Container>
    <Row>
      <Col xs={4}>One of three columns</Col>
      <Col xs={4}>One of three columns</Col>
      <Col xs={4}>One of three columns</Col>
    </Row>
  </Container>

When creating a row inside a container, each column within the row will span 4/12 (=1/3) of the Row's length. By setting xs={4}, the column will always occupy 1/3 of the screen on larger devices. View a functional demo here: https://codesandbox.io/s/react-bootstrap-grid-example-forked-g18st?file=/src/index.js. In this example, I have connected each item to an element within , where every three items will automatically move to a new line and repeat.

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 steps can I take to avoid encountering the `@typescript-eslint/unbound-method` error while utilizing the `useFormikContent()` function?

Recently, I updated some of the @typescript-eslint modules to their latest versions: "@typescript-eslint/eslint-plugin": "3.4.0", "@typescript-eslint/parser": "3.4.0", After the update, I started encountering the fo ...

A guide on designing a personalized search bar for MUI-Datatables with a sleek outlined style

Check out the default UI from MUI-Datatables v4.3.0 here: https://i.stack.imgur.com/rbHgD.png I want to create a style similar to this: https://i.stack.imgur.com/AUHqC.png Just so you know, I am using the following packages: "@mui/material": &q ...

The mixin animation received 2 arguments, even though it only accepts 1

Below is the sass code snippet, @include animation(swayb $speed ease infinite 3s, reset 1s ease forwards 5s); When I try watching using compass watch on my Ubuntu machine, it triggers an error, (Line 2500 of _includes/_common.scss: Mixin animation tak ...

Can the @font-face src URL be modified?

We have integrated FontAwesome with Bootstrap on our website. However, we encountered an issue when using FA with a custom minifier as it tries to load fonts from a relative path, leading to a 404 error due to the structure of the minified URL. To address ...

What is the method for adjusting the width of a v-card based on its height?

I have a changing number of v-cards that are displayed based on their quantity. My goal is to maintain an aspect ratio of 16/9, but only adjust the width. To achieve this, I believe I need to make the width dependent on the height, although I am unsure ho ...

Assign a value using the select component from Material UI

I just finished creating a dropdown menu const [selectedValue, setSelectedValue] = useState(''); const handleSelectionChange = (e: any) => { //setSelectedValue(e) console.log('value', selectedValue) } .... <Fo ...

Troubleshooting the Full Height Feature for Sidebar (Panel) in Twitter Bootstrap

I'm having issues with the Sidebar (Panel) in Twitter Bootstrap. I'm encountering some trouble with how it is displayed. Below is the CSS code I am using for the sidebar: .sharecartside .content { height: 100% !important; min-height: 10 ...

Integrating React js with Layout.cshtml: Mastering the Fusion of React Routing and ASP.NET MVC Routing

My current project involves an ASP.NET MVC core application with the View written in cshtml. The routing follows the conventional asp.net mvc routing pattern. However, I've recently implemented a new module using React JS. Now, I'm faced with the ...

How can I apply a border to individual table cells in HTML without affecting the entire table?

Struggling to apply a border on table cells, especially when using rowspan. Desiring a table layout with 4 cells - one large cell on the left and three smaller cells on the right side of it. Below is the code snippet I attempted: jsfiddle[dot]net/1fv4dz ...

Strange spacing appears after image tags

My efforts to remove the space (red) between the <img> and the <div> have been unsuccessful. I have minimized it as much as possible. After researching similar threads, it seems that whitespace or newlines between inline-box elements can cause ...

Adjust the size of the image within a designated container to decrease its proportions when there is an excess of text present

I am working on a project where I need to resize an image based on the available space within its container. When there is text in the description, the image should adjust its size accordingly without pushing the text upwards. I am using React for this pro ...

CSS media queries to exclude a property for mobile devices

I have a CSS class with the width property set to calc(100% - 17px). However, I want to ignore this property completely for devices with specific resolutions. I've tried using media queries and values like initial, inherit, and unset for the width pro ...

I am seeking to modify the button color in React by utilizing Material UI

Using the following version: npm view react version # 17.0.2 This is my code snippet: import React from 'react'; import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; import Image from "material ...

Adjusting the gaps between each item in a list

Currently, I am working on developing a minimalist single-page website. However, I am facing challenges with spacing in the navbar section (as demonstrated below). When using an unordered list, everything looks good until the list overlaps with the centra ...

What is the best .scss file to use for updating the site?

Currently in the process of learning SASS and Bootstrap 4, I have set up some .scss partial files and imported them into my site.scss file as required. Making changes to Bootstrap involved modifying my _my-theme.scss file. But now, I'm wondering about ...

Error: The window object is not defined in NextJS

I've encountered an issue while trying to build the app for production. The error message states: ReferenceError: window is not defined. I'm struggling to find a solution. FullCode: const [windowSize, setWindowSize] = useState<WindowInfo>( ...

Navigation menu consist of two horizontal rows

I'm facing a challenge. I have a total of 8 links (one being a button) on a navigation menu that I need to display in two rows on the right side. I'm having difficulty aligning them properly while also justifying them to the right. Essentially, t ...

React Material UI with outlined textfield that adjusts its width based on dynamic label size

When using the textfield variant outlined, a dynamic label is displayed. However, there seems to be an issue where the top line width does not adjust when the label changes. <TextField id="debtorIin" name="debtorIin" labe ...

challenge encountered while trying to remove ScrollTop feature on mobile gadgets

Currently facing a challenge with responsive design - I have implemented a sticky navbar effect that works seamlessly on desktop, but causes usability issues on mobile. When scrolling down on the mobile version, the sticky navbar obscures the text on the s ...

The CSS child selector seems to be malfunctioning as it is affecting all descendants of the specified type

Struggling with creating a menu containing nested lists. Attempted using a child selector (#menu-novo li:hover > ul) to display only immediate descendants, but all are still showing. Any suggestions or solutions for this issue? #menu-novo-container { ...