The Bootstrap 5 class "col-md-4" seems to be malfunctioning

My goal is to create a grid layout with 3 columns and 2 rows using Bootstrap cards, but I'm encountering an issue where all the cards are centered and stacked on top of each other. Can someone please assist me in resolving this problem?

Service.js

const Service =() =>{
    return(
      <div>
        <div className="my-5">
          <h1 className="text-center">Our Services</h1>
        </div>
        <div className="container-fluid mb-5">
          <div className="row">
            <div className="col-10 mx-auto">
              <div className="row gy-3">
                {Sdata.map((val, ind) => {
                    return(
                      <Card key={ind} imgsrc={val.imgsrc} title={val.title} />
                    )})}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };

Card.js

const Card =(props) =>{
    return(
      <div>
            <div className="col-md-4 col-10 mx-auto">
                <div className="card">
                    <img src={props.imgsrc} className="card-img-top" alt={props.imgsrc} />
                        <div className="card-body">
                            <h5 className="card-title font-weight-bold">{props.title}</h5>
                            <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <NavLink to="#" className="btn btn-primary">Go somewhere</NavLink>
                        </div>
                </div>
            </div>
        </div>  
    );
  };

Answer №1

"All the cards are centered and displayed one after the other".

The columns within an outer div must be placed directly in the parent row without any additional wrapping. Remove the outer div surrounding the columns.

const Card =(props) =>{
    return(
            <div className="col-md-4 col-10 mx-auto">
                <div className="card">
                    <img src={props.imgsrc} className="card-img-top" alt={props.imgsrc} />
                        <div className="card-body">
                            <h5 className="card-title font-weight-bold">{props.title}</h5>
                            <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <NavLink to="#" className="btn btn-primary">Go somewhere</NavLink>
                        </div>
                </div>
            </div>
    );
  };

Check out the React demo on Codeply

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 most effective method for implementing a fallback image in NextJS?

Lately, I've been immersed in a NextJS project that involves utilizing the YoutubeAPI to retrieve video details, such as thumbnail URLs. When it comes to fetching a full resolution image, the thumbnail URL typically follows this format: https://i.yti ...

Include a search query parameter in the URL by adding "?search=" to connect with a

In my react/typescript application, I have a client and server setup. The client requests data from the server and displays it using React. When making a request for data on the client side, this is how it's done: export const createApiClient = (): A ...

Beautiful Web Address Exclusively for .html Files

The other day I experimented with converting my html pages into clean urls using some [.htaccess] code: RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^([^\.]+)$ $1.html [NC,L] While this successfully worked for my html pages, it c ...

Iframe Loading at Lightning Speed

I have set up a script to load my iframe, but I noticed that the script loads the iframe content too quickly. Is there a way for me to configure it to preload all CSS images and content in the background before showing the full iframe content? Here is my ...

php log in button with a redirect feature

As a complete beginner, I created a basic login.php. However, I am unsure how to make the login button redirect to another page. Below is the script I currently have: <php //Initiate the Session session_start(); require('connect.php'); ...

Add a decorative frame around the heading and text block

I'm looking to encase both the header and paragraph in a single border. Right now, they each have their own separate borders. How can I combine them into one? <style type="text/css> h1, p { font-family: consolas; border: 2px solid #73AD21; bor ...

Radio button selection with table layout

I am designing a quiz template with radio buttons. However, I would like them to be stacked vertically instead of side by side. Why doesn't the <br/> tag work? I'm having trouble understanding it. Can someone assist me? Here is my code: ...

What is the relationship between `overflow:hidden` and the inability of `position:sticky` to function properly?

Within the code snippet provided, there is a sticky div positioned inside a container. It adheres to the top of the scrolling panel while remaining within its designated container at all times. This mimics the behavior seen in iOS' UITableView headers ...

A strategy for concealing the selected button within a class of buttons with Vanilla JS HTML and CSS

I have encountered a challenging situation where I am using JavaScript to render data from a data.json file into HTML. Everything seems to be functioning correctly, as the JSON data is being successfully rendered into HTML using a loop, resulting in multip ...

React.map does not retrieve the specific value

I am facing an issue with my list of items. I have implemented it using mui list, and I have also added a button for editing the list. However, when I click on an item, I am getting the value of the last item instead of the one I clicked on. Below is my f ...

Is there an issue with using React packages as static files with Express?

Seeking assistance with Okta and React production build compatibility. I have deployed my app using Express.js on the backend and React.js on the front-end. However, when serving the React build through Express and trying to make calls to the '@okta/o ...

How to perfectly position an image within a fixed full screen container

When you click on a thumbnail image, a full-screen overlay with a larger version of the image will be triggered using JavaScript. To ensure that the image is centered and resized inside the black overlay when the browser window size changes, I attempted t ...

Using Bootstrap to align items to the right in a navigation bar

I've been attempting to align certain elements to the right in the navbar using Bootstrap by utilizing mr-auto, but it doesn't seem to be functioning properly. What steps should I take to ensure it works correctly? Below is a snippet of my index. ...

Looking to show an image when a checkbox is ticked and hide it when it is unticked in HTML?

How do I make a specific image appear when a user clicks on a checkbox? I'm unsure if I should use jQuery, Ajax, or another method. What is the best approach for this task? Your assistance would be greatly appreciated. I have successfully created the ...

I'm currently troubleshooting why the radio buttons in my form seem to be coming up as undefined

I am currently working on a form and trying to validate it using my own code. Even though I can successfully retrieve values for radio buttons by triggering an alert when clicked, the form validator keeps returning these radio values as undefined. What cou ...

Child element triggering React's onClick event

Click Handler. const handleClick = (event) => { console.log(event.target); } Return. { menu.map((menuItem, index) => ( <div onClick={handleClick}> <div>{menuItem.text}</div> <img src={menuItem.ima ...

Spooky 'outline' emerges with rounded corners in Internet Explorer 11 and Microsoft Edge

I encountered an unusual issue in IE11 and Edge (on Windows 10) where a strange, transparent border appears in the HTML/CSS code. <!DOCTYPE html><html> <head> <style> body { background-color:red; ...

<h1> </h1> Using attributes in a JavaScript function

Hello, I am trying to figure out how to inherit the h1 style CSS inside a JavaScript function called myFunction. Currently, when the button is clicked, it just displays the default h1 style. Any help would be appreciated. Thank you! <html> <st ...

The Array map function is not displaying the list within a React component that is based on a Class

I am having trouble displaying a list of food items in my Parent component FoodBox.js and its child component FoodItems.js. I am using the map() method, but the <ul> element is showing up empty. Here is my code for FoodBox.js const FOOD_ITEMS = [ { ...

Challenges encountered while configuring React Bootstrap

Recently, I embarked on my journey to learn React with Bootstrap by following a tutorial that can be found here. The first step of installation involves running the command: npm install react-bootstrap@next bootstrap However, upon executing this command ...