Studio: FlickList 10
In today's walkthrough, your instructor will add a couple Bootstrap features to Flicklist:
- Add to your
base.htmlthe Bootstrap CSS and JS files, along with jQuery, by adding header elements that reference the Bootstrap and jQuery CDN resources.
- Add a Navbar to dress up site navigation. You can add this to your
base.htmlor to the individual templates. Think about the pros and cons to each approach.
You're about to embark on a creative Bootstrap adventure! Let's get ready.
Checking out the Studio code
Follow the instructions for getting the code in order to get the starter code for
In this studio you'll channel your own creative intuition to make Flicklist look even better with Bootstrap.
Spend the studio time adding additional Bootstrap features to Flicklist.
Which ones you add are up to you, but here are some suggestions:
Bootstrap Alerts allow you to draw attention to and provide meaningful context to important messages. Following the example code, add one or more alerts. Here are a few places where Flicklist currently displays alert-like messages:
- Validation errors from form submission. Note: If you haven't already, you'll probably want to move the location of these messages to above the form for optimal display. You also will likely want to use a conditional to check for the existence of errors, so you don't end up with an empty alert box.
Glyphicons are a Bootstrap component that uses a special font to allow easy inclusion of small icons in various places. These are typically used to provide helpful visual cues as to what a user is looking at, or the actions that a user might take.
Glyphicons can be added almost anywhere within your site: on buttons, in links, in headers, and so on. Note, however, that the glyphicons classes must not be used on the same elements as other Bootstrap classes. See the documentation for details.
Find a few glyphicons that can improve the look of Flicklist. We think
glphyicon-film should definitely be used somewhere!
Bootstrap Forms are part of the CSS component of Bootstrap, and provide a set of classes to make form layouts and form elements look nice, clean, and readable. Using the examples in the documentation, add some Bootstrap form styles to some or all of the site's forms: login, register, ratings, and add movie.
Use Bootstrap's Grid System to add grid layouts using
col-md-* classes. Understanding and utilizing the grid system is at the heart of creating responsive design with Bootstrap.
Show Off Your Work!
Post a screenshot of one of your Flicklist pages to the
#showcase channel on Slack. Include a brief description of what parts of Bootstrap you used.