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

Make ReactStrap/Bootstrap4 Cards In Separate Columns Same Height

I have an example at https://codesandbox.io/s/426277vml9. I am using separate columns because I want them to stack at low resolution. Obviously, right now, height is a function of content, and so they are unequal. Is there any way (short of imposing…
alphadogg
  • 12,762
  • 9
  • 54
  • 88
0
votes
1 answer

Append addition elements to React form using reactstrap

I have started with a form using reactstrap and have a scenario where I have multiple checkboxes. With that, if I checkbox is selected, I want to append a textarea just below it. Having difficulty in figuring this out within a single component. In…
Mark
  • 1,812
  • 3
  • 29
  • 51
0
votes
1 answer

Reactstrap dropdownitem not triggering setState

What is happening? Hello, I'm just using reactstrap and react js for a bit and i have some issues regarding the component. I want to trigger show modal when i click on the component inside the component. this is the module that i've been working for…
raharaha
  • 107
  • 1
  • 11
0
votes
1 answer

How do I use the reactstrap components with a react native app?

I am trying to use reactstrap with react native but I keep getting an error when running the demo: Invariant Violation: View config not found for name a This error is located at: in a (created by NavbarBrand) in NavbarBrand (at App.js:58) …
Whitecat
  • 3,882
  • 7
  • 48
  • 78
0
votes
1 answer

Reactjs boostrap grid

I am learning React and I have some trouble with using the bootstrap grid/reactstrap. Somehow when I use the grid system, instead of aligning horizontal columns, I got a vertical one. Film.js import React from "react"; import logo from…
0
votes
4 answers

How to install Reactstrap with React-Starter-kit

react-starter-kit https://github.com/kriasoft/react-starter-kit reactstrap http://reactstrap.github.io/ What are the steps to install the reactstrap into the react-starter-kit? in order to use the grid…
Rico Chan
  • 2,226
  • 2
  • 25
  • 32
0
votes
1 answer

BS4 Cards in React with reactstrap?

Couple of question on using cards within React. First, based on the below code, why does these 4 cards not sit next to one another? Did I forget to apply something or another? import React, { Component } from "react"; import { Container, Card,…
Mark
  • 1,812
  • 3
  • 29
  • 51
0
votes
1 answer

NavItem return type in react, reactstrap

I've created a function that takes props and makes an array of . I want to know the return type I can use for this function so that it is type safe. I tried typeof and it returns object. I want the function to look like this: createNavItems(names:…
Paul W
  • 114
  • 2
  • 11
0
votes
2 answers

ReactJS active NavLink

I want to know how could I control the className of a Navlink so if the actual path is X, then the class of a NavLink is active. I did it before using Laravel and simple bootstrap but I dont know how to do this with React and Reactstrap. Example…
Aceconhielo
  • 3,316
  • 4
  • 19
  • 26
0
votes
1 answer

Reactstrap Modal doesn't fade in but fades out

I'm building a header that has a login link with Reactstrap. When the user clicks the login link, a modal should appear showing the different options for logging in. Here's my code: export default class Header extends Component { state = { …
avatarhzh
  • 2,175
  • 4
  • 21
  • 32
0
votes
2 answers

Using Reactstrap: Unable to apply CSS styles to image for CarouselItem and how to use div instead of image

I am using reactstrap in my production website using react.js. I wonder if someone could help me with implementing reactstrap carousel. I am trying to apply CSS to the image itself for CarouselItem but it is not getting applied. For CarouselItem…
Ultronn
  • 532
  • 1
  • 5
  • 19
0
votes
0 answers

Entire Reactstrap Navbar misaligned/inverted using example code

I was following the reactstrap example for the first time when trying to set up a Navbar component for my site, and it looks completely different than the shown output. Here's what it looks like: I was expecting it to look something like…
carbon_ghost
  • 1,114
  • 5
  • 18
  • 40
0
votes
1 answer

What libs required for Bootstrap V4 Dropdown?

I've included bootstrap.js, reactstrap, jquery, tether however base example from https://reactstrap.github.io/components/dropdowns/ still doesn't work
terma
  • 1,199
  • 1
  • 8
  • 15
0
votes
1 answer

JS/React - cannot read property "X" of undefined, unable to access method

bit of a React noob here and I've searched a fair bit for solutions to this issue, however I'm still confused. In short, I have a dropdown menu with a list of numbers, rendered from an array via map. The intent is to be able to change the value of…
m4m4m4
  • 3
  • 2
0
votes
1 answer

How to have default collapsed Navbar with Reactstrap?

I'm using reactstrap impimentation of bootstrap4 on a node application. Its my first time and I need a little help. How do I make the navbar collapsed all the time (regardless of screen size)? Here's example code from reactstrap github page: class…
Stephen Agwu
  • 1,013
  • 2
  • 15
  • 29