When i start to develop web pages using Bootstrap Css framework, i tend to make some mistakes since i mostly have to develop responsive web pages as well.
Note: this post was actually originated at time of bootstrap version 3.5 to 3.8 something.
So here are the few tips i enhanced during my several projects:
- When using bootstrap table or forms in websites, just use columns sm so that we dont need to worry about responsive much in many devices.
- But when doing complex design, you have to care about columns right away for every device such as sm,md,lg to use.
- When you use float right/left somewhere in design during desktop page development, just start to complete that block for all responsive designs right away such as for mobile, ipad, medium and large desktops since doing responsive development side by side will help to solve the issues later.
- Write nesting only for selectors not for unique class names. Because it helps in extending and overriding.
- Whether you develop mobile first or desktop design … Use min width for all devices except for mobiles.. I came to know late.
- I always used to start with desktop design first and had to override many classes. Best approach is to develop Mobile first design as framework suggest itself.
- Use button mostly as there is issue in cross browsers. Don’t use anchor tags in forms. But practically we tend use anchor tags for most places.