Common Mistakes in Bootstrap or Responsive Design
When we work in bootstrap, beginners make common mistakes such as missing the viewport. And using the same multiple id in bootstrap components such as nav, carousal, tab panel, modal box, etc. For margin and padding, use unwanted CSS extra code instead of bootstrap built-in classes; there is several common mistakes, some of the following:
1. Missing Viewport: If your webpage looks the same on the mobile device as on desktop, it means there is no change in the navbar or grid system in a mobile device, then you should check your meta viewport in the head tag
Example : <meta name="viewport" content="width=device-width, initial-scale=1">Above example, a 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:
The beginner's common mistake is that it uses CSS to give margin and padding into HTML elements instead of built-in bootstrap classes, e.g mt-2,py-3 etc. So You should use built-in bootstrap classes (Spacing classes) to reduce the extra number of 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 into HTML elements.
3. Use of unwanted media query to hide or show HTML elements: Beginner's third common mistake is using a media query to hide or show any HTML element instead of bootstrap built-in classes (display classes or display properties ).
Example:
<div class="d-none d-sm-block"> </div>In the above example, we hide elements from mobile devices only, so there are several classes in the bootstrap display. By using this, we can save CSS code and make our web page faster.
Categories: web designing bootstrap
