What are some ways to create a responsive Grid in React JS with the help of Bootstrap?

Utilizing bootstrap in my react js project, I am implementing css grid to showcase some cards. However, I am encountering responsiveness issues.

import React from "react";
import "./Project.css";
export const Project = () => {
  return (
    <div>
      <div className="container tracked">
          <div className="card">
          <div className="face">
            <div className="content">
              <h2 className="titler">TITLE</h2>
              <p>
                BLABLA</p>
            </div>
          </div>
          <div className="face">
            <h4>Product Search</h4>
          </div>
          </div>
       </div>
   );
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

.tracked{
    width: 1200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 15px;
    margin: 0 auto;
}

I aim to have three cards in a row while ensuring responsiveness. Currently, the display is not responsive, despite functioning well on desktop screens.

cssreactjsbootstrap-4

Answer №1

Visit this SampleWebsite

import { SampleContainer, SampleRow, SampleCol } from "samplereact";

const gridExamplesPage = () => {
  return (
    <SampleContainer>
      <SampleRow>
        <SampleCol size="4">.col-4</SampleCol>
        <SampleCol size="4">.col-4</SampleCol>
        <SampleCol size="4">.col-4</SampleCol>
      </SampleRow>

      <SampleRow>
        <SampleCol sm="4">.col-sm-4</SampleCol>
        <SampleCol sm="4">.col-sm-4</SampleCol>
        <SampleCol sm="4">.col-sm-4</SampleCol>
      </SampleRow>

      <SampleRow>
        <SampleCol md="4">.col-md-4</SampleCol>
        <SampleCol md="4">.col-md-4</SampleCol>
        <SampleCol md="4">.col-md-4</SampleCol>
      </SampleRow>

      <SampleRow>
        <SampleCol lg="4">.col-lg-4</SampleCol>
        <SampleCol lg="4">.col-lg-4</SampleCol>
        <SampleCol lg="4">.col-lg-4</SampleCol>
      </SampleRow>

      <SampleRow>
        <SampleCol xl="4">.col-xl-4</SampleCol>
        <SampleCol xl="4">.col-xl-4</SampleCol>
        <SampleCol xl="4">.col-xl-4</SampleCol>
      </SampleRow>
    </SampleContainer>
  );
}

export default gridExamplesPage;

Answer №2

If you give it a try, please let me know if it works for you. I have implemented the grid system using Bootstrap. If you have any doubts, check out this link: (https://getbootstrap.com/docs/4.0/layout/grid/).

Best regards, Parthasarathi RV

import React from "react";
import "./Project.css";
export const Project = () => {
  return (
    <div>
      <div className="container-fluid text-center">
        <div className="row">
          <div className="col-lg-4">
             <div className="card">
               <div className="face">
                <div className="content">
                  <h2 className="titler">TITLE</h2>
                  <p>BLABLA</p>
                </div>
              </div>
              <div className="face">
                <h4>Product Search</h4>
              </div>
            </div>
          </div>
          <div className="col-lg-4">
             <div className="card">
               <div className="face">
                <div className="content">
                  <h2 className="titler">TITLE</h2>
                  <p>BLABLA</p>
                </div>
              </div>
              <div className="face">
                <h4>Product Search</h4>
              </div>
            </div>
          </div>
          <div className="col-lg-4">
             <div className="card">
               <div className="face">
                <div className="content">
                  <h2 className="titler">TITLE</h2>
                  <p>BLABLA</p>
                </div>
              </div>
              <div className="face">
                <h4>Product Search</h4>
              </div>
            </div>
          </div>
        </div>
       </div>
      </div>
   );
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer №3

To utilize bootstrap in your project, follow these steps: begin by installing bootstrap:

npm install --save bootstrap

alternatively,

yarn add bootstrap

next, import the css into your project

import 'bootstrap/dist/css/bootstrap.css'

You can also leverage react-bootstrap:

npm install react-bootstrap

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

Unable to display divs in a stacked format using Bootstrap 5

I need help aligning div's vertically on the page. Currently, all my elements are displaying next to each other instead of stacking one below the other. body { height: 100vh; } <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi ...

javascripthtmlcssalignmentbootstrap-5

Ensure that the <TabPanel> content occupies the entire width and height of its parent container

Currently, I am working with React and material-ui. Specifically, I am utilizing an appbar with tabs and my goal is to have the content of each tab expand to full width and height when selected. If you'd like to see an example, check out this sandbox ...

javascripthtmlcssreactjsmaterial-ui

Ways to refresh UI in ReactJS without triggering a specific event

In my React application, I am displaying various pictures and GIFs that users can attach to a post. Currently, each image has an onClick handler which triggers either a modal with different options or deletes the picture if the user holds down the ctrl key ...

javascriptreactjs

What could be causing this hydrating error to pop up in NextJS when I refresh the page?

Upon refreshing my page, I encountered the following errors: The text content does not match the server-rendered HTML. Hydration failed because the initial UI does not align with what was rendered on the server. An error occurred while hydrating, causing ...

reactjsnext.jssanity

Enhance your React development with the power of React-hot-loader 3, React-router 4, and Webpack-hot-middleware for seamless

I am trying to set up React-hot-loader 3 with React-router 4 and the latest version of Webpack-hot-middleware (2.18.2). Below is my code for server.js: const express = require('express'); const bodyParser = require('body-parser'); con ...

reactjswebpackwebpack-hmr

What are the reasons behind the ineffectiveness of !important in CSS?

I am looking to increase the font-size of all text on my website to 200%, you can find some test code in this Fiddle link. If it is a PX issue, why does the code work when I add the style to "<h2>"? <div> <h2 class="test" style="font-size: ...

htmlcss

Is it possible for react-dnd to be compatible with a higher order component?

I am currently developing a form builder and one of the functionalities I need to implement is the ability to re-order fields. To achieve this, I decided to consolidate all the drag and drop code into one reusable location using a higher order component. H ...

reactjsreact-dnd

Unveiling the search bar as it expands horizontally from the center, causing the submit button to slide to adjust

Wishes and Aspirations My goal is to design an .input-group with one input[type=text] and one button[type=button]. Initially, the text box should be hidden, leaving only the button visible at the center of the page. Upon activation, the text box should ...

jqueryhtmlcssjquery-animatebootstrap-4

"Enhance your webpage with a captivating opaque background image using Bootstrap

I'm new to exploring Bootstrap and I am currently experimenting with options for displaying content with a semi-transparent background image. Currently, I am using a "well" but I am open to other suggestions. I have managed to place the image inside t ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Is it possible to specifically focus on Google Chrome?

Can anyone help me with positioning the update button on www.euroworker.no/order? The button works fine in Firefox and Internet Explorer, but it's not displaying correctly in Chrome or Safari. I've tried targeting Safari and Chrome specifically, ...

csssafarigoogle-chrometarget

storing user authentication with react and redux

I have a couple of key questions (not looking for code, just exploring different perspectives). When utilizing react, react-router, and redux, what is the optimal strategy for implementing user authentication using jwt? After researching numerous articles ...

reactjsreduxreact-routerreact-redux

Encountering a type error with gatsby-plugin-dark-mode in a Typescript Gatsby setup

Issue with Layout warning in index.tsx when hovering: (alias) const Layout: ({ children }: Props) => JSX.Element import Layout Type '{ children: Element[]; }' is missing the following properties from type 'Props': theme, >toggle ...

reactjstypescriptgatsby

Having trouble displaying a background image on a React application

Public>images>img-2.jpg src>components>pages>Services.js> import React from 'react'; import '../../App.css'; export default function Services() { return <h1 className='services ...

javascriptcssreactjsimagebackground

Using React's useState hook with an array of objects

When I have 3 different inputs, my goal is to capture their states while updating the onChange input attribute. The desired state format should be structured as follows: [{lang: (inputName), text: (inputValue)}, ..]. This is what I attempted: function onC ...

javascriptarraysreactjsstate

Having trouble with the POST request in React Native with Redux?

When attempting to access a mock authentication API through axios, the action flow is as follows: Dispatch loginRequest Make API request If successful, dispatch loginSuccessful If failed, dispatch loginFailure The issue arises when the loginRequest acti ...

reactjsreact-nativeaxiosredux-thunk

What causes the variation in typing behavior between specifying props directly on a component versus nesting them inside another prop?

Understanding the next component might be a bit tricky, so let's delve into it (Check playground): type Props<T> = { initValue: T, process: (value: T) => T } export const Input = <T,>({ initValue, process, }: Props<T>): ...

reactjstypescripttypescript-generics

Understanding the relationship between CSS height and line-height can help developers create more

Is there a way to use CSS to set the height of a box based on its own line-height or its parent's line-height? This feature would make it much simpler to create text areas that are a specific multiple of lines, for example, displaying exactly three l ...

css

What is the most efficient method for updating URLs in CSS files before the website goes live?

The project I am currently working on has been worked on by various coders with different backgrounds. One of my recent achievements was writing a clean Capistrano recipe to minimize CSS and JS files. Now, the challenge ahead is figuring out how to identif ...

cssregexbashcapistranoweb-deployment

The specified height for input[type=button] in Firefox/Safari is adjusted by subtracting the padding and border

When implementing the following CSS: input[type=button] { background-color: white; border: 1px solid black; font-size: 15px; height: 20px; padding: 7px; } along with this HTML: <input type="button" value="Foo" /> I anticipate that the t ...

htmlcssheightpadding

Is it possible to place a list/accordion above a button in Semantic UI?

Check out this rough code sandbox here There seems to be an issue with the accordion overflowing behind the button on the left side. I attempted to add style={{position: 'absolute', bottom:'2%', overflow: 'scroll'}} to the A ...

javascripthtmlcssreactjssemantic-ui