What's the best way to arrange the layout to ensure that every row contains exactly three items that are evenly spaced apart?

Struggling to figure out how to display three items in each row with even spacing using react js and bootstrap.

I've been grappling with this for hours today, trying to implement grid layouts on the page. I managed to render 3-4 items on each row, but the lack of spacing makes it look messy. What I really want is to render 3 items in each row with some spacing between them.

import React from "react";

const Recipes = (props) => (
    <div class="container">
    <div class="row">
     { props.recipes.map((recipe)=> {
        return (
        <div key={recipe.recipe_id } style={{display:"flex", flexDirection:"column", justifyContent:"space-between"}}>
            <img src={recipe.image_url} alt={recipe.title} style={{width:"200px", height:"200px"}}/>
            <h3>{ recipe.title }</h3>
            <h5>{`By: ${ recipe.publisher}`}</h5>
         </div>
            )
        })}

    </div>
    </div>
)

export default Recipes;

I managed to render varying amounts of items on each row, but the lack of spacing creates a messy look. What I really want is to display 3 items in each row with some space between them.

Answer №1

Your approach seems to involve a combination of Bootstrap's row class and manual styling using flexbox for the rest. While I am not as familiar with Bootstrap, you could potentially achieve consistent columns by wrapping each of your elements (img, h3 & h5) in a col-md-4 className. This should result in 3 uniform columns, as Bootstrap's grid system consists of 12 columns, hence 12 / 4 = 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

Explore button that gradually decreases max-height

I have a "Show More" button that expands a div by removing the css attribute max-height, but I want to add an animation similar to jQuery's slideToggle() function to smoothly reveal the rest of the content. This is the code I am using: <div id="P ...

The error message "Theme does not include property 'navHeight'" is indicating that the 'navHeight' property is not defined within the 'Theme' type. This issue occurs when using MUI v5 syntax with Types

When attempting to incorporate MUI with new props declared in the Interface inside the theme.ts file (as suggested by the MUI docs), I encountered the error mentioned above while theme.palette.primary.main does work. Despite trying various solutions like i ...

Discovering a way to retrieve objects from an array of objects with matching IDs

Here is a code snippet I put together to illustrate my objective. arr = [ { id:1 , name:'a', title: 'qmummbw' }, { id:2 , name:'b', title: 'sdmus' }, { id:2 , name:'', title: 'dvfv' }, ...

Creating a user-friendly interface for the admin to easily upload photos by implementing a php/bootstrap/js code within the panel

I'm currently in the process of creating an online website as part of my thesis project. I've been researching this specific code, but unfortunately, I haven't been able to find a solution. In the admin section of the site, I need to enable ...

What's the best way to target an input that's appearing as it slides in from the edge of the screen?

My webpage has an element called #cols that is three times wider than the <body>. This element contains three columns, each exactly as wide as the <body>. When a button is clicked, the #cols element slides over by the width of one column while ...

Using regular expressions, you can eliminate a specific segment of a string and substitute

Provide a string in the following format: lastname/firstname/_/country/postalCode/_/regionId/city/addressFirst/addressSecond/_/phone I am creating a function that will extract the specified address parts and remove any extra parts while maintaining maxim ...

Refreshing an HTML table using instance variables from a C# class (utilizing jQuery and AJAX)

Explore <script type="text/javascript"> $(document).ready(function () { $("#viewDetails").click(function () { $.ajax( { type: "POST", url: '@Url.Action("GetDetail", "ControllerName")' ...

Struggling to verify identity with MongoDB using node.js

After struggling to implement authentication for my mongo database, I finally made progress. Following multiple tutorials and resolving some technical issues (upgrading my server from version 2.4), I successfully added a user. In one shell, I start the s ...

What is the best way to transfer information from a client to a server using Meteor?

I am currently developing an application and have encountered an issue. I have an HTML page located in the './public' folder. Within the './public/js' directory, there is a script that gathers data after a form is submitted on this page ...

Sure, confirm that the array of objects is only allowed to have one object that matches the specific property and value

Using Formik's FieldArray to dynamically add objects to an array, triggering the rendering of additional form elements as objects are added using push(). The schema in use: const EMAIL_SCHEMA = Yup.object().shape({ address: Yup.string().email().req ...

Guide on creating a hand-drawn pencil circle using only CSS!

Is anyone familiar with how to create a hand-drawn pencil circle hover effect using pure CSS, without relying on SVG like the one featured on CodeMyUi? I've seen examples accomplished with SVG, but I'm specifically interested in achieving it usin ...

Place 4 divs within 2 divs, with one aligned to the left and the other to the right

I'm currently working on a small project using Angular 2 for an experiment, where I need to place 4 divs, each containing an image, within 2 divs. However, all the divs (with images) are stacked vertically instead of being placed next to each other, ...

Show a specific div using jQuery fadeIn() when the user reaches the top of an HTML section

The code below has a specific purpose: 1) Determine the current scroll position. 2) Locate the parent article and determine its offsetTop for each .popup_next which represents a section on the site. 3) Calculate an offset value by adding 30px to the off ...

Does Parsley.js offer a way to configure so that the parsley-success field is not added to an input if it should be completely ignored?

Currently, I am excluding one input and adding the success class (which is fine with me) $('form').parsley({ excluded: '[data-parsley-sum-total="all"]' }); However, there are several other inputs without any validations that I do not wa ...

What is the best way to show an SVG icon in React without having to make an HTTP request for the file?

A special requirement for a react application is to display icons in certain parts of the application while offline. The use of inline svg is particularly fitting for this purpose. import React from 'react'; // Utilizing inline svg to showcase i ...

Trouble customizing Mui v5 styles with themes in styleOverrides

I'm attempting to style using theme overrides according to the instructions in the provided documentation. You can find my code in this sandbox: import * as React from 'react'; import { ThemeProvider, createTheme } from '@mui/material/ ...

I'm in the process of developing a React application that will display live sensor data in graph form

My current project involves building a react app that visualizes real-time data from IoT sensors, including temperature, humidity, and pressure. I want the app to store this data so users can log in at any time to view specific information based on time, d ...

Animating Text with CSS for Different Message Lengths

I have been exploring alternatives to the marquee tag and discovered a way to achieve this through CSS. However, the messages I am working with vary in length. Is there an alternative to setting the '45s' attribute to maybe 100% so that regardles ...

Understanding the variations in behavior of the history.go(-1) method across various browsers

Is history.go(-1); consistent across all browsers? I've noticed different behaviors on various browsers. In my code, I have a line similar to javascript:history.go(-1); On the first page, there are three checkboxes. Users can only select two of them ...

Generate a new entry for a singular piece of data within an array

I am working on a matchmaking system where two players of the same level are matched and joined in one array. My goal is to include a second data in the array for players who do not have a match. Example: EntryID: “15”, player: ”testing11”, level: ...