Common Mistakes in Bootstrap or Responsive DesignWhen we work in bootstrap then beginners do common mistakes such as missing viewport , using multiple same id in bootstrap components such as nav, carousal,tabpanel, modal box etc. for margin and padding use unwanted css extra code instead of bootstrap built-in classes , there are number of common mistakes , some of following :
1. Missing Viewport : If your webpage looks same in mobile device as of desktop , means there is no change in navbar or grid system in mobile device then you should check your meta viewport in head tag
Example : name="viewport" content="width=device-width, initial-scale=1">
Above example meta tag should be present in your head tag to make your page device friendly.
2. Use of unwanted extra css for margin and padding : Beginners common mistake is that it uses css to give margin and padding in to html element instead of bootstrap built in classes e.g mt-2,py-3 etc. So You should use bootstrap built in classes (Spacing classes) to reduce extra number css code.
In the above example we used mt-3 for margin top , you can use mt, mb etc to give margin and padding in to html elements.
3. Use of unwanted media query to hide or show html elements : Beginners third commons mistake is that it uses media query to hide or show any html element instead of bootstap built in classes (display classes or display properties ).
<div class="d-none d-sm-block">
In the above example we are hiding element from mobile device only , so there are number of classes in bootstrap display , by using this we can save css code and make our webpage faster.