Questions tagged [reactstrap]

Stateless React Components for Bootstrap 4.

React Bootstrap 4 components that favor composition and control. The library does not depend on jQuery or Bootstrap javascript. However, Poppers.js via react-popper is relied upon for advanced positioning of content like Tooltips, Popovers, and auto-flipping Dropdowns.

The library documentation can be found in github.

778 questions
12
votes
7 answers

Module not found: Can't resolve '../../assets/img-3.jpg' in ''

I am trying to import some local images into reactjs. But it's not working. I am using reactstrap to make a carousel. This is the error: Module not found: Can't resolve '../../assets/img-3.jpg' in…
aditya kumar
  • 2,905
  • 10
  • 39
  • 79
11
votes
2 answers

How to customize bootstrap 4 in reactjs app with reactstrap dependency?

I start developing a React app with reactstrap. I followed the Get Started running the following commands : npm install -g create-react-app create-react-app my-app cd my-app/ npm start npm install bootstrap --save npm install --save reactstrap@next…
frouo
  • 5,087
  • 3
  • 26
  • 29
9
votes
6 answers

React - Material UI vs Reactstrap

I'm going to start a react project. I want a little clarification about the choice of Material UI over Reactstrap. Material UI is better than Bootstrap as mentioned in another comparison of Bootstrap vs Material UI for React?. But I'm a little…
DevLoverUmar
  • 11,809
  • 11
  • 68
  • 98
9
votes
8 answers

reactstrap tooltip dynamic id

I am developing a react application and using reactstrap. I am using Tooltip Component of reactstrap which requires a target attribute, a value of target element's id. This id is being geneated dynamically and seems reactstrap tooltip doesn't like…
Priyank Thakkar
  • 4,752
  • 19
  • 57
  • 93
9
votes
2 answers

Module not found: 'cldr' in ... \globalize\dist\globalize

In my React app, I am trying to use the DateTimePicker component included with the react-widgets package. I am also using Bootstrap 4 components via reactstrap. I have installed the modules: npm install --save bootstrap@4.0.0-beta…
Nyxynyx
  • 61,411
  • 155
  • 482
  • 830
8
votes
2 answers

React: Production build looks different from development build

I have a React/Django app that's behaving differently when built for production that it does when run on the development server. The development version is how I want it to look. There are a number of issues with the CSS. Text is a different font,…
yhghy
  • 141
  • 2
  • 10
8
votes
4 answers

Open the collapsible menu by default based on the id

I am making a nested menu and submenus and everything has been done as of now.. I am now in the need to make this collapsible menu to get opened by default based on the id given.. You could also take a look at the complete working code snippet…
user12856847
8
votes
2 answers

Use Bootstrap "prepend" with react-select

I'm trying to use the Bootstrap input-group-prepend with react-select, however react-selects' styling doesn't seem to be the current bootstrap/reactstrap and so doesn't want to work together. The select box doesn't merge with the prepend element…
Vereonix
  • 1,341
  • 5
  • 27
  • 54
8
votes
2 answers

Invalid prop `children` supplied to `DropdownItem` expected a ReactNode

components: DropdownItem reactstrap version ^8.0.0 react version ^16.8.6 bootstrap version ^4.3.1 I am using reactstrap dropdown. And I am trying to populate the dropdown items using a map function render() { return (
John
  • 272
  • 1
  • 3
  • 12
8
votes
5 answers

set color to Reactsrap Navlink

I would like to set color "white" to my react component (Navlink). Home and logs link are always dark :( The white color is never set. I use Reacstrap, Bootstap 4. I separate js with css Here my code : Sidebar.js import React from 'react'; import {…
Vana
  • 753
  • 3
  • 11
  • 20
8
votes
5 answers

Module not found when import .jsx file

I can't find out the solution. I'm using Reactstrap (CSS framework), React, Express, and Webpack. I was success to import App.jsx file on index.jsx. Then, I tried to import NavbarTemplate.jsx file on App.jsx by using the same way. But, it displayed…
Rido
  • 717
  • 4
  • 10
  • 23
8
votes
6 answers

Reactstrap and React-router 4.0.0-beta.6 - active

I'm using Reactstrap and React-router 4.0.0-beta.6 in the educational project that is located on gitlab with custom domain. According to Reactstrap docs: that's the way I should use active navlink import { NavLink } from 'reactstrap' ... …
Taras Yaremkiv
  • 3,440
  • 7
  • 32
  • 54
7
votes
6 answers

Error overriding peer dependency - npm install reactstrap

"@popperjs/core": "^2.6.0", "@testing-/jest-dom": "^5.11.9", "@testing-/react": "^11.2.3", "@testing-/user-event": "^12.6.2", "bootstrap": "^4.6.0", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.1", "react-transition-group":…
7
votes
2 answers

Making whole card clickable in Reactstrap

I'm trying to create a card that, when clicked, performs an action. I've managed to make this work by adding a button to the card, which is bound to an event handler, and works as expected. I'm trying to get the whole card to work with the same…
jmo
  • 357
  • 1
  • 4
  • 12
7
votes
1 answer

How do I make my React Bootstrap cards line up horizontally and equally spaced (also responsively if possible)

I am using Reactstrap and displaying my cards dynamically and they seem to want to stack vertically no matter what I try. Here is the component in which they are rendered: import React, { Component } from 'react'; import { Link } from…
frootloops
  • 281
  • 1
  • 4
  • 18
1
2
3
51 52