Reactstrap — Card Columns and Carousels

Image for post
Image for post
Photo by ACK on Unsplash

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to put cards into columns and add carousels with Reactstrap.

Columns

We can group cards into columns.

For example, we can write:

We use the CardColumns component to group the columns together.

Carousel

Carousels let us display slideshows in our app.

To add one we use the Carousel andCarouselItem components to add the carousel and carousel items.

We can also use the CarouselIndicators and CarouselControl components to add the slide indicator and navigation controls.

To do all that, we can write:

We add the slides with the CarouselItem and CarouselCaption components.

CarouselCaption adds the caption text.

The CariyselIndicators have the slides in the items prop.

activeIndex has the index of the slide that’s active.

onClickHandler lets us jump to the given side by changing the index.

CarouselControl lets us add controls to move slides.

This is also done by changing the index of the active slide with the next and previous functions.

We set the animating state to false when we exit the slide.

Uncontrolled Carousel

If we don’t need to control the navigation ourselves, we can also add an uncontrolled carousel with the UncontrolledCarousel component.

For instance, we can write:

We have the slide data with the image URL, caption, header, and alt text, and we pass them all into the items prop.

This will make a carousel that animates automatically.

Navigation controls and slide indicators are also provided.

Image for post
Image for post
Photo by Mathew Schwartz on Unsplash

Conclusion

We can add various kinds of sliders and group cards into columns.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store