Member-only story
![](https://miro.medium.com/v2/resize:fit:700/1*es6PzLTw-Z3fEvK5nnt-cw.jpeg)
Hello, Shmoji here. In this tutorial, I will show you how to easily create responsive tabs using React. You will need to create two small components and that is it. The picture below is what the finished tab menu looks like. If you prefer videos and want more details, here is a YouTube tutorial offering just that.
Outline
In this article we will cover the following:
- Bootstrap: Installing Bootstrap for a few styles
- TabNav Component: Creating the menu part of the tabs
- Tab Component: Creating the content part of the tabs
- App.js: Combining the components to show your tab menu in the browser
NOTE: I will not cover detailed project setup in this video, I am starting from a basic React app that was just created using npm init react-app tabs
. I am using Visual Studio Code.
Bootstrap
We are going to use a little bit of Bootstrap, so install that in the terminal with:
npm install bootstrap
Now open the file called index.js and paste this at the top:
import ‘bootstrap/dist/css/bootstrap.min.css’;
Cool, now you have the CSS part of Bootstrap.