Bootstrap is a framework that helps you to create responsive websites. It may happen that while developing websites, including the basis of a framework responsive-frontend, such as Bootstrap, can present problems for some display resolutions and devices. So, it's very important to optimize the UI for all the devices. The responsive element is particularly essential for an e-commerce website to increase the possibility of purchases by users. In fact, when users navigate through a website with a layout that is optimized and intuitive, they can buy products quickly and easily.

The mobile e-commerce has developed greatly in recent years, and the statistics of the growth are impressive. The following are some numbers of the analysis carried out for mobile e-commerce:

The source of these statistics is OuterBox design. You can read more about this at http://www.outerboxdesign.com/web-design-articles/mobile-ecommerce-statistics, and you can also find neat information on graphics to understand better the importance of a responsive design for e-commerce websites.

In this chapter, we are going to learn how to solve the most common issues and make our theme usable with any device, using media queries and Bootstrap classes.

The following topics will be covered in the chapter:

Our goal

By the end of this chapter, you will be able to optimize your theme for all the devices with simple techniques. Our goal is to have a fully responsive website, as you can see in the following mockup:

This responsive website is optimized for smartphones, tablets, laptops, and large desktops. It is recommended that you prepare a mockup for every responsive view in order to not waste time designing it on the browser.