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