Ok, our page renders but it is not very pretty. We can change that without adding any CSS ourselves. We will make use of the Twitter Bootstrap library.

Twitter Bootstrap

This is a popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web that look very modern. It is developed by the team at Twitter and will help us make things look great.

For this, you should go and read through their CSS documentation. It will show you lots of concepts and classes that will help you make the page look sophisticated and mobile friendly. All without you having to write a line of CSS yourself!

Here are some pointers of classes that will prove very useful. In the App component, you should look at:

  • col-md classes
  • container
  • page-header
  • row
  • text-center

In the HourForm component, you should look at:

  • btn classes
  • col-sm classes
  • form classes
  • panel classes

One thing you need to know for using CSS classes with React is that instead of using the attribute class, you need to use the attribute className instead.

Font Awesome

Once you have finished styling your components, you can also add icons to your page. We've added one to the title for fanciness but you can use the Font Awesome library anywhere you see fit. They are open source vector icons and have a huge set available. Check out the documentation on how they are used.

Try to achieve a style similar to the image below:

Form with styling


If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations in San Francisco and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more

Cookies on Make School's website

We have placed cookies on your device to ensure that we give you the best experience on our website.

This site uses cookies to deliver our services. By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Your use of Make School’s Products and Services is subject to these policies and terms.

Please note that Make School no longer supports Internet Explorer

We recommend upgrading to a modern web browser. Learn more