Developing the layout

In this section, we will realize the previously discussed wireframe with real code. From the preceding section, it is evident that we need to develop three sections, mentioned as follows:

  • The menu section
  • The hero section
  • The list of products section

Before going into the development of each section, we need to understand the containers provided by Bootstrap. The following section discusses the Bootstrap containers.

Bootstrap 3 containers

Bootstrap provides fixed- and fluid-width containers. The CSS classes, .container and .container-fluid, are used to set up the base layout.

An example of the .container class is as follows:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="../asset/css/bootstrap.min.css"> <title>Responsive ...

Get Developing Responsive Web Applications with AJAX and jQuery now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.