Best practices and mistakes while using Bootstrap and CSS.

Best practices and mistakes while using Bootstrap and CSS.
4.3 (85.71%) 7 votes

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 a Full Stack Web Developer and Blogger. Sportsperson by heart and loves football. He has experience with various frameworks in php, python and javascript. Loves to explore new frameworks and evolve with the trending technology.

Leave a Reply

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