Back End Lesson 4.4: Styling with Rails and Bootstrap

Welcome to Ruby on Rails Back End Class Lesson 4.4. In this unit, we will learn how to combine Bootstrap with Rails, and then how to use the Bootstrap CSS classes to build an attractive application.

Back End Lesson 4.4 Goals

Learn to use Bootstrap to build a functional design and layout
Application aesthetics
Combining Bootstrap with Rails

Curriculum

This is your curriculum for Back End II.
**4.4.1 Bootstrap 4 Basics (141 min) 4.4.2 Bootstrap and Rails

Assignments

Complete the Bootstrap Basics course in Treehouse. Try to do as many of the in class exercises as you can, so that you acquire the skills demonstrated by the instructor in the video. Then complete the Bootstrap for Rails homework.

Bootstrap has evolved some since the video; the video uses version 4, but the Rails homework uses Bootstrap 5.2.3.

Changes for Bootstrap 5

Bootstrap 5 has many changes from Bootstrap 4. The differences are described here. One of the most important changes is that a dependency on the jQuery library is removed. The jQuery JavaScript library was originally developed because browser implementations of JavaScript varied greatly, causing applications to fail depending on which browser the user had. New browsers do not have these problems, and jQuery is a heavyweight library, so it is good that it is no longer needed (although some developers still like to use it.) Quite a few styling classes are also removed, basically because they were redundant. There are equivalent ways to perform the same function. (Bootstrap 4 is no longer supported, although it is still available.)

Another difference between the Treehouse video and your lesson is that the starter github repository (R7-validations) that was built for these lessons already has Bootstrap built in. It’s more common to load Bootstrap from a content delivery network (CDN). Of course, if you use a CDN, your application won’t look right if you aren’t connected to the Internet. The Bootstrap documentation explains how one can use a CDN.

Git Repository and Branch

You will continue to use the git repository you used for lessons 4.1, 4.2, and 4.3, but you will create a new branch called bootstrap.

Your mindset curriculum assignment can be found here.