Best practices and mistakes while using Bootstrap and CSS.

When it comes to the front end design framework which is easy to use and is responsive for all screen. The first thing that came to our mind in bootstrap. If you don’t know bootstrap try learning it here with bootstrap . In this post we will talk about mistakes and best practices of bootstrap and css.

  • Do not put row and col classes under same tag.
  • While customizing bootstrap do not customize the bootstrap.css file instead make another css file and override the classes there and just load the second file after bootstrap this will solve the purpose.
  • Avoid using transforms and translate.
  • Use vertical align and horizontal align instead of giving position from top.
  • If you are writing for IOS. First get to know te media queries they use as they are different from other devices.

iPhone < 5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iPhone 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

  • Do not use position: fixed as it is not supported in iPhones and will break.
  • Writing media query don’t override the breakpoints of bootstrap at few places. If you are doing it do modify the breakpoints of bootstrap also.
  • Always use inspect element to check if your elements are covering the space they need to. Header should contain the whole header footer should cover the whole footer etc. Like in the image banner covers the whole banner. screen-shot-2016-10-26-at-11-28-44-pm

 

These are few simple things you can use or avoid to get best out of bootstrap. This is just a simple things that I figured out during my last project.

Also if you are not using less try using it. It is awesome.


Gaurav Yadav

Gaurav is cloud infrastructure engineer and a full stack web developer and blogger. Sportsperson by heart and loves football. Scale is something he loves to work for and always keen to learn new tech. Experienced with CI/CD, distributed cloud infrastructure, build systems and lot of SRE Stuff.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.