-
Notifications
You must be signed in to change notification settings - Fork 2
Add Bootstrap
Pamela Argentino edited this page Feb 16, 2017
·
1 revision
Now that we have the app skeleton fleshed out, we will style the app so it looks better and has a cleaner design. For that, we are going to use Bootstrap, the most widespread CSS framework for responsive web pages.
First of all, we're going to add a line to public/index.html to import Bootstrap from a CDN that they
make available for free use.
nano public/index.html<head>
...
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
...
</head>That alone makes all the Bootstrap classes and glyphicons available to our app.
Now, let's refactor the App component to use the Bootstrap classes.
nano src/App.jsimport React, { Component } from 'react';
import ContactList from './containers/ContactList';
import './App.css';
class App extends Component {
render() {
return (
<div>
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand" href="/">React Apz</a>
</div>
</div>
</nav>
<section className="container-fluid">
<h2>Contacts Manager</h2>
<div className="container">
<ContactList />
</div>
</section>
</div>
);
}
}
export default App;The ContactList component already uses Bootstrap classes (table, table-striped and table-responsive),
so we shouldn't worry about refactoring it. Refresh your app and see the changes.
Next step: Set up Contact Form