Styling your App

A number of good CSS frameworks exist out there. However, you will make use of bootstrap 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.