O'Reilly logo

Developing Responsive Web Applications with AJAX and jQuery by Sandeep Kumar Patel

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required