How to do Responsive Design

Some of the most possible solutions can be used for responsive design for your UI.
Note -: Below, some of the solution depends on bootstrap version 3.3.7.

Solution 1 - Using the viewport meta tag to control layout on browsers


The browser's viewport is area of the window in which web content can be seen. Mobiles (Narrow devices) screen render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once.
		
			
		
	
width :The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.
initial-scale :The initial-scale property controls the zoom level when the page is first loaded. Maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

Solution 2 - Change pixel value to percentage


Change element dimension from pixel value to percentage value and make some additional changes to make it similar on same environment.

Solution 3 - Use class as 'container' not 'container-fluid'


e.g use below code
		

Solution 4 - Show images use class="img-responsive margin" for desktop and mobile UI.


e.g.
		

Solution 5 - The Bootstrap grid


The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts.
Note: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.
		
.col-xs-7 .col-sm-6 .col-lg-8
.col-xs-5 .col-sm-6 .col-lg-4