Questions tagged [react-bootstrap]

There seems to be an error popping up repeatedly that I believe should not exist. The specific error message reads: ./src/App.js 21:24-31 './components/Navbar/Navbar' does not contain an export named 'Navbar1'. However, here is the code snippet for Navba ...

As a newcomer to the world of react, I am facing an issue with the <NavDropdown.Item> component within the given class: import React, { Component } from 'react'; import { Nav, Navbar, NavItem, NavDropdown } from 'react-bootstrap'; ...

In my React app, I am utilizing React-bootstrap and specifically the Card & CardGroup components. I need assistance in ensuring that all the cards have the same height. JSX component: <Card style={{flex: 1}} className="card"> ...

After setting up my react.js, I encountered an issue where importing bootstrap components such as Container, Row, Col causes the screen to turn white. It seems that HTML and CSS are being disabled, resulting in a completely blank web page. Any ideas on ho ...

React is not my strong suit, but I need to test a React application. The issue arises when attempting to run the server using gulp nodemon, resulting in numerous errors. It seems that the application is built on an outdated version of React and some libra ...

Hey there! I'm currently trying to implement a modal popup in react-bootstrap, but I keep running into an error that says "Props not defined". I followed the instructions from the react-bootstrap documentation, but I can't seem to figure out what's causing ...

I'm looking to decrease the dimensions of my datetime picker box. Here's an image of my current dateTimePicker: https://i.stack.imgur.com/MeJlq.png Below is the component I'm using: import React, { useState } from 'react'; import ...

After setting up my ReactJS application with React-Bootstrap on Webpack 2, I encountered an error when trying to run it: ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./app/css/bootstrap.css Module not found: Error: Can't resolve '../fonts/glyphic ...

I'm struggling with styling the footer of my react portfolio project. I specifically want to include Github and LinkedIn icons side-by-side at the bottom of the screen, but currently, they are stacked vertically in the middle of the page with too much spac ...

Currently, I'm in the process of developing my own web-based version of a painting software similar to MS Paint using React. The initial javascript canvas code has been completed, and now I am focusing on creating an aesthetically pleasing GUI that include ...

In the React app I'm working on, everything was functioning properly until I added more fields to a form. For some reason, "First Name", "Middle Name", and "Last Name" inputs are unresponsive when I try to type in them. I followed the same process to add ...

I recently upgraded to React 18 by following a guide. However, I encountered errors on certain pages within my application post-upgrade. After upgrading to React 18, the use of ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported. Interes ...

Query I am encountering an error message in webpack that says: Error: Cannot find module 'react-bootstrap-validtion' at Function.Module._resolveFilename (module.js:339:15) at Function.Module._load (module.js:290:25) at Module.require (module. ...

I recently downloaded a Reactbootstrap theme and managed to integrate it with NextJS successfully. However, I am facing an issue where my <div className="main-panel"> in the Layout.js is extending slightly beyond the window. It seems like t ...

We are developing an application using ReactJS as the frontend framework. When it comes to choosing a UI library for the look and feel, we are debating between Material-UI and BootStrap. Our top priority is stability. Can anyone recommend which of these ...

In the process of developing an ecommerce web application using react/redux, I find myself facing two main challenges: How can I implement a mega menu similar to the one seen on AWS (https://aws.amazon.com)? What is the best way to design a category ...

After installing react-bootstrap version 5.1.3, my app was functioning normally. However, the trouble started when I tried copying and pasting a specific component, causing the app to get stuck in an infinite loop. Surprisingly, the terminal application co ...

I am currently troubleshooting the SummerNote mention library and encountering an issue - Uncaught TypeError: $node.attr(...).tooltip is not a function The versions I am using are: - "react-summernote": "^2.0.0", - React version: "react": "^16.8.6", ...

My file currently contains keys for each child component, but it is still raising an error internally. I am unsure if I can resolve these issues on my own. export default function SecondaryNav(props:NavItems) { const router = us ...

<CancelButton className="exitBtn"/> .exitBtn{ height:40px; width:35px; } I'm trying to adjust the dimensions of the cancel button, but for some reason it's not working. Can someone provide guidance on how to successfully ...

Currently, I am using a search field in my application that displays data as dropdown items when the user is typing. The library being utilized is React Bootstrap (bootstrap 5) and it's functioning perfectly. However, an issue arises where the dropdown p ...

When a 401 error is returned from the API, I need to show an error message in the component. My approach involves using an unbound state and ES6. However, I encountered this error: Cannot read property 'setState' of undefined Below is the login ...

Hello everyone! I'm currently working on a project with react js and I have a question for you all. Do you think it's excessive to combine MUI Components and React Bootstrap in the same app? ...

I have been struggling to find a solution to my problem without resorting to custom CSS classes. I'm wondering if it's possible to achieve what I need using only flex classes. Here is the code for a simple navbar component: <Navbar bg="dar ...

I am currently working on customizing the react-bootstrap-daterangepicker to achieve a specific look: My goal is to have distinct background colors for when dates are selected within a range and when the user is hovering over dates to make a selection. I ...

Currently, I am working on a simple CRUD application in React JS version 18.0.0. One issue that I am facing is related to styling in one of my components, let's call it Home. Strangely, the styles from other components are also being applied to the Home ...

I've been working on incorporating a dropdown menu using React. The <Dropdown></Dropdown> element is embedded within the component's return(). <Dropdown> <Dropdown.Toggle className="btn btn-dark"> < ...

I am working with a group of ToggleButtons in my app and I want to customize their background colors. Currently, all the buttons have a gradient defined by <.untoggled-button> class, with an added blue overlay for unselected buttons. However, I am fa ...

Currently, I am working on a project where I am utilizing react-bootstrap to create a user interface for entering customer information. The setup involves tabs structured as follows: <Tab.Container id="CustTabs" defaultActiveKey="Details"> ...... ...

Feature For Managing User Creation and Editing In the code snippet below, I am conditionally setting the isActive state within the useEffect While I am able to update the other fields of user_data and the state, the setIsActive function is not properly u ...

When a user clicks on the "View Tasks" button, I want to display the relevant tasks specific to that user. However, currently all React Bootstrap Collapse Components open up and show tasks for every user instead of just one. This issue arises because the o ...

I'm facing an issue with my React code for uploading an image. It doesn't seem to be working and I can't figure out why. Can someone please assist me? return ( <div> <FormContainer> <h1>Edit Product</h1> ...

Is there a way to use the bootstrap load spinner to mask the delayed information retrieval from a url and enhance the website's interactivity? ...

I have integrated react-bootstrap and react-imask using their example with IMaskMixin as shown below: import { IMaskMixin } from 'react-imask'; import { FormControl } from 'react-bootstrap'; const MaskedFormControl = IMaskMixin(({input ...

Lately, I've encountered an issue with npm build after upgrading to the latest version of react-bootstrap (1.0.0-beta.6). While creating an optimized production build... Failed to compile. Module not found: '@restart/context/forwardRef'. Please ensure th ...

Currently I am developing a restaurant website using Reactjs. Everything was going smoothly until I encountered an error message while running "npm start" in localhost. Instead of displaying my website, the browser is showing me an error stating page unres ...

Whenever the button is clicked, my intention is for a modal to open. I have written the code for it, but I'm encountering errors that I can't seem to resolve. Here's the snippet of my code: import React from "react"; import { M ...

I am facing an issue with a modal in my React component. When I open the modal, it does not completely close when I try to click away or hit the close button. The backdrop disappears but the modal itself remains on the screen. (Screenshots attached for r ...

Seeking to create a system where clicking an item in the navbar loads a new component on the screen, I am faced with the challenge of maintaining state while also updating the URL. Allow me to provide more details: Below is my current navbar code snippet: ...

Currently, I am developing a complex code using React Bootstrap and focusing on creating a Dropdown list that fetches data from the backend database. <Dropdown> <Dropdown.Toggle variant="success" id="dropdown-basic"></D ...

Struggling to find a way to override React Bootstrap css without resorting to inline styles. Currently working on rendering an Alert component. https://i.stack.imgur.com/KiATb.png Tried making some CSS modifications, but they're not taking effect du ...

As a newcomer to react, I am exploring a modal component import React, { useState, useEffect } from 'react'; import { Modal, Button } from "react-bootstrap"; function TaskModal(props) { return ( <Modal show={pro ...

Exploring Next.js, I stumbled upon the <Link/> component for page navigation. However, as I utilize the react-bootstrap library for my navbar, it offers a similar functionality with Nav.Link. Should I stick to using just Link or switch to Nav.Link? ...

LocationSearchComponent.js I'm having an issue with empty icon showing as  const LocationSearchComponent = () => { return ( <Form className="locationForm"> <Form.Group> <Form.Contro ...

I have been working on customizing the Navbar in my React app using Typescript's styled components. However, I am facing difficulties in restyling the default styles from Bootstrap that I have copied. Here is an example of the React Bootstrap Navbar c ...

Recently upgraded to NextJS version 12 and I'm currently developing a small application. However, I've encountered an issue when trying to use a Col with a size of 0. Here is the JSX code snippet: <Container> <Row> <Col xs= ...

I'm puzzled as to why the .btn-primary class is being used here instead of .btn-outline-* which should display with the correct background color. The current bluish background seems out of place. import React from "react"; import Button from ...

Every time I try to use a component from 'react-bootstrap', I encounter a strange error. Here is a small example where I am importing the "HelpBlock" component. import PropTypes from 'prop-types'; import React from 'react'; import HelpBlock from 'react-bo ...

I have integrated react-bootstrap into my project. I am currently attempting to keep a tooltip always displayed, but I am facing some challenges in achieving this. Below are the approaches I have tried so far: <Card style={{width: '10rem'}} ...

My Navbar code looks like this: <Navbar.Collapse> <Nav> <NavItem eventKey={1} href={`${process.env.PUBLIC_URL}/`}> Blah </NavItem> <NavItem eventKey={1} href={`${process.env.PUBLIC_URL}/SomePage`} ...

Trying to install Parallelshell but encountering a persistent warning. I've checked the package file multiple times without finding a solution. Can someone assist me with this issue? ...