I’m writing a pet project that needs to be mobile responsive and I have a problem with white space in the Carousel component, I don’t know how to remove it, can someone help me? This is looks like page on PC https://imgur.com/a/3zwNDnl This is looks like mobile devices https://imgur.com/a/qEwPDdC And I want to remove the… Read More How to remove empty space in React and Bootstrap 5
I am trying to add Bootstrap into my react project with material. Here is one of my component import { styled } from "@mui/material/styles"; import Paper from "@mui/material/Paper"; import Container from "react-bootstrap/Container"; import Row from "react-bootstrap/Row"; import Col from "react-bootstrap/Row"; export default function RecipeLanding() { const Item = styled(Paper)(({ theme }) => ({ backgroundColor: theme.palette.mode… Read More React-Bootstrap cols not showing side by side and shows in new line
I have a nav bar, it the nav bar I have some links. when I click on one of the links I want to jump to a specific part of the page. I tried to implement the ‘jumping motion’ for the "pricing" button. here is the nav bar code:: const NavigationBar = () => {… Read More How to jump to a element in a different part of the page?
I have been designing an web app using react and react bootstrap. In my case, I use a cdn to load the bootstrap css files and bootstrap.min.js in addition to using the react-bootstrap library. Everything works fine, except for the close button. The close button seems to do nothing at all. MessageBox.js: import Modal from… Read More React-Bootstrap 2022: Modal Will Not Close When X button clicked
I am trying to create a content inside a panel. Even if it is static, it appears flowing to the left in Bootstrap. How can I enter it in the corresponding panel? I’m pretty much copying the Bootstra example. Attached image of the visible result. This content is generated in React, so "class" is "className".… Read More Content outside the Tab-nav panel – Bootstrap
I have a simple card using Mui mui/material. I want to layout the content using bootstrap col-xs-12 col-sm-6 col-md-3. I’ve already installed bootstrap to my project using npm install –save bootstrap, however the columns layout is not working. Can someone let me know if I did something wrong? <div className="container gallery-container"> <div className="tz-gallery"> <div className="row">… Read More React JS Bootstrap Column layout not working
I just learned react and I am building a simple blog app in react and I am trying to send props on button click But the props is not showing in the another functional component. I am using react-bootstrap for modal (which is second component). And I am using for edit the current blog when… Read More Send props to another functional component on click
I am making a table using react-bootstrap link Table component: <Table ordered hover> <thead> <tr> <th>Headers…</th> … </tr> </thead> <tbody> <tr><td>Content here…</td></tr> </tbody> </Table> Table content has been omitted for brevity. This table has a lot of content, and thus I want the table’s content to be scrollable, with the table header remaining sticky at… Read More Table Sticky header – Only the text is moving
I am trying to build one table using props, and pass the value from that table to another function. But for some reason, the result is not displaying. What have I done wrong? import Table from "https://cdn.skypack.dev/react-bootstrap@2.5.0"; function Tables(props) { return ( <Table> <thead> <tr> <th>a</th> <th>b</th> <th>c</th> </tr> </thead> <tbody> <tr> <td>{props.first}</td> <td>{props.second}</td> <td>{props.third}</td>… Read More using props to get value from a table
Okay there is definitely a quick solution for this I just can’t figure out. Just a description of what I am trying to do: Whenever I hover over a certain card, I would like to see the description of that item and only that item. But instead what’s obviously happening, as you can see from… Read More How do I show data on one card when hovering and not on all?