Using Bootstrap With create-react-app

  • From your project folder, enter the following: – – Now the Bootstrap files will be located in your folder.
  • This is where we will put our bootstrap source files.
  • You will need to have the installed globally, so from your command line enter: – – You will also need grunt and other libraries install locally into your project, so enter the following from your project folder – – In order to import your bootstrap files, you need to create…
  • From our command line inside of our project folder we can now enter to compile our LESS files one time, or we can enter to watch the source files and compile on any changes.
  • Once you have built your application using Bootstrap, you can at the end go through and edit the source files so that 1) you only import the Bootstrap components which you are using and 2) make sure all the components look exactly the way you want them to.

These days, starting a web application is very easy. Using create-react-app along with Bootstrap will give you everything you need.

These days, it is amzingly easy to get a web application up and running. Create-react-app allows you hit the ground running with building front-end applications which then can be served and fed data from a back-end API. But, while takes care of the dev server, dependency handling, and bundling, it does not include a styling framework. That’s where Bootstrap comes in.

I have written in the past about why I like Bootstrap. I will not go into all the details now, but one of the biggest benefits of using a styling framework like Bootstrap is that it provides a standard styling API for all of your components. If you build your entire application using a standard styling API, then if you want to make changes in the future it is quite easy since you only have to change the styling in one place. But, in order to customize styling, you need to have the Bootstrap source code. How you would implement that into a project is the purpose of this blog post.

The first thing you need to do (assuming you already have Node.js and NPM installed) is install globally. To do this, enter the following from your command line:

Once that is installed, you can create your application. I am going to make one called . To do that, enter the following:

Now your app is created and ready…

Using Bootstrap With create-react-app