Rails, Angular, Postgres, and Bootstrap, 2nd Edition

Using Bootstrap’s Grid

Bootstrap’s grid is quite powerful, especially if you’ve never used one before. In this section, we’ll build the layout for our view using Bootstrap’s grid. As we saw in the previous section, our layout starts with two equal-sized grid cells: one that holds the customer information and shipping address, and the other that holds the billing information.

First, we’ll create these cells, which will demonstrate the various CSS classes needed to enable Bootstrap’s grid. Then, we’ll see how the grid can nest within itself to lay out the customer information and shipping address as a grid-within-a-grid.

Lay Out the Two Main Columns

The most obvious grid in our design is one that holds the two main columns, each taking half ...