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