Stack Overflow
Stack Overflow

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
7
votes
2 answers

How to customize Bootstrap variables in a React app?

I'm using facebook's create-react-app. I've completed all the instructions to add SASS to my app, now I'm trying to add Bootstrap and customize the theme. I've been able to add bootstrap but the customizing of the variables is not working. Here is…
AnApprentice
  • 108,152
  • 195
  • 629
  • 1,012
6
votes
2 answers

Text field with multiple value(image included for reference)

I'm looking for a text field with multiple inputs as: Here as you can see I can add new text and on press of enter it saves that keyword. Can someone guide which package to look for.... I found something similar in material ui autocomplete's…
Sushant Rad
  • 249
  • 2
  • 10
6
votes
2 answers

Reactstrap formfeedback not displaying

Im using Reactstrap v8.0.1 and I'm trying to display the error message and also render the field with a red border, but it doesn't seem to be working at all The following is the code that I'm using to render the form ... But nothing. …
CodeSauce
  • 255
  • 3
  • 19
  • 39
6
votes
2 answers

How to make an Accordion component with Reactstrap?

Reactstrap does not have an official sample for Accordion in the documentation. Using the card component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion as a…
HamedFathi
  • 3,667
  • 5
  • 32
  • 72
6
votes
1 answer

React ref using reactstrap Input Module doesn't have Value prop

I have a react component with the following input element: import React, { Component } from 'react'; import {Input } from 'reactstrap'; constructor(props) { super(props) this.test = React.createRef(); } render() { …
muso mwale
  • 89
  • 1
  • 6
6
votes
5 answers

img not displaying in reactstrap carousel

Trying to get images to display in the slides in Carousel using a tag and classname. I have images saved in the same folder as the Slider.js file. I have changed the default id property in the items array to source and changed the key to item.src…
shan
  • 81
  • 1
  • 10
6
votes
2 answers

css classes appears but style not applied -REACTSTRAP - CSS MODULES

I created an application using create-react-app. I am using CSS modules by configuring webpack files. when I use reactstrap Bootstrap classes appears but styling not applying. Following instructions from https://reactstrap.github.io/ imported CSS in…
Dhananjayan
  • 562
  • 5
  • 23
6
votes
2 answers

How to make reactstrap modal open or close from parent component

I am trying to open / close a reactstrap modal from a parent component button, but I cannot get it to work. I am passing the state isModalOpen as a prop to the child ModalExample component, and it changes as shown in the debug text fields I made,…
Hilyin
  • 113
  • 1
  • 1
  • 6
6
votes
3 answers

What does the tag attribute in Reactstrap do?

I have a navbar using reactstrap and wanted to incorporate react-router. After a failed attempt I have found the solution here. However I don't understand the syntax: I have a from React-Router and a navbar from Reactstrap. Instead of…
Poogy
  • 2,597
  • 7
  • 20
  • 35
6
votes
1 answer

How can I use bootstrap in react with rails

I have tried using npm package reactstrap. My components: import { Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap'; I'm getting the following error: ExecJS::ProgramError at /dir/xyz TypeError: require is not a function
Mukarram Ali
  • 387
  • 5
  • 24
6
votes
1 answer

How to get a typed value from an Input?

I would like to get a typed value from a ReactStrap Input component, via the onChange function. The aim is to use a text input only but be able to get a specific typed value (String or Number in my example below).
Sophie
  • 87
  • 1
  • 1
  • 6
5
votes
1 answer

How to access the row index in the columns of a react-table component

I have a column inside my columns array for my react-table Table component that needs to render a Dropdown button inside the cell to allow users to render that row of data into another modal component to edit. I am using dropdownToggles, an array of…
rantao
  • 1,621
  • 4
  • 14
  • 34
5
votes
2 answers

React Modal doesn't show up correctly

I'm having a problem with a modal which doesn't show up correctly. When I click the button the screen becomes all gray without showing me the content of the modal and when I try to insert a text in the input lets me do it, even if you don't see what…
Salah Miftah
  • 146
  • 8
5
votes
1 answer

What is the easiest way to change the default font in Reactstrap?

I'm styling a MERN project and I'd like to change the default font that Reactstrap (https://reactstrap.github.io/) uses for my React frontend. I've found some answers for changing the default Bootstrap 4 fonts, but I'm not sure how (or if) to apply…
Cerulean
  • 5,543
  • 9
  • 59
  • 111
5
votes
1 answer

reactstrap - create-react-app - not found bootstrap/dist/css/bootstrap.css - v.4

I am new in this. I am trying to create a react app with bootsrap 4. I am using reactstrap following the next steps: create-react-app my-app npm install bootstrap --save npm install --save reactstrap@next react react-dom Import Bootstrap CSS in…
lmendivil
  • 157
  • 2
  • 12
1 2
3
…
51 52