Common Mistakes in Bootstrap or Responsive Design

When 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

Examplename="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.

Example :
<div class="mt-3"></div>

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

Example :

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

Request a Demo