Build a Mini Netflix (with React)
  • About Cloudinary Labs
  • Build a Mini Netflix with Cloudinary
    • Introduction
    • Delivering Video
    • Setup React
    • Install Dependencies
    • Styling your App
    • User Authentication
    • Callback Component
    • Navigation Component
    • Display Component
    • Setup Root Route
    • Upload Component
    • Setup Upload Route
    • Upload Videos
    • Display Videos
    • Enable Auth
    • Share on Twitter
Powered by GitBook
On this page
  • Step 1
  • Step 2
  1. Build a Mini Netflix with Cloudinary

Styling your App

PreviousInstall DependenciesNextUser Authentication

Last updated 7 years ago

A number of good CSS frameworks exist out there. However, you will make use of in this code lab. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. You can quickly prototype your ideas or build your entire app with the Sass variables and mixins, responsive grid system, extensive pre-built components, and powerful plugins based on jQuery.

Step 1

Open up public/index.html in your text editor. Pull in bootstrap and add it just after the favicon link.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

Step 2

Open up src/App.css and replace it with the styling snippet below:

.navbar-right { margin-right: 0px !important}
.log {
  margin: 5px 20px 0 0;
}
.videos {
  padding: 10px 10px;
-webkit-box-shadow: 2px 8px 22px 1px rgba(0,0,0,0.06); 
box-shadow: 2px 8px 22px 1px rgba(0,0,0,0.06);
}

Now, we have all the styling needed for your app.

bootstrap