Bootstrap Best Practices

Learn HTML, CSS, and Bootstrap

You cannot work with Bootstrap if you at least don't have the basic knowledge of HTML and CSS. Understanding CSS will help you do much more with the framework rather than just using the styles that the framework provides

Learn the Bootstrap classes, and what it does, as many as possible.This will help you reuse the code that is already in the framework in your HTML for styling your components and thus keeping a clean code. Copying blocks of code will get you the result you want but won’t be as good looking as you’d like. So taking some time to understand what you are working on is always a good idea.

Recommended reading: How to Use Bootstrap With HTML

Use custom CSS files

Do not ever make changes in your bootstrap.css files in order to customize your website. An easier and much effective way to customize and override the bootstrap style is to create your own custom CSS file. Include this file after you have included the bootstrap.css file. Its as easy as that and will not cause you any issues later on.

Keep your code clean

• Avoid redundancy – to get the same functionality for different components, you may be tempted to create new code for that particular component which will increase the redundancy of the code. Avoid duplication of code and write reusable codes.

• Add comments – a code that is properly commented will help improve the readability of the code. If someone else is using your code this will help them understand what a line or block of code does or will be helpful to you as well if you are reading them at some point later.

• Indent – this again improves the readability of the code. It will save a lot of time when we need to modify or maintain the code.

Use a CSS preprocessor

Using a CSS preprocessor like Less or Sass may seem like an added complexity to those who have not used it, but if you give it a try you will know that how it helps save you a lot of time and code with the use of variables, mixins, nested definitions etc. This will make it easier to change the code easily and your make CSS organized.

Make use of available resources

There are a plenty of resources that help you improve your workflow and get things done faster. They are there for you to use. So use them. There are some amazing code snippets, plugins, and extensions that you can use which will not only help you develop faster but get you results that are better

Mobile first

Since Bootstrap 3, they went mobile first. So go for it. There a plenty of advantages of designing your web page primarily for mobile devices. Designing otherwise the size of the website will be larger than necessary for a mobile device which will lead to more data consumption and slower loading time for the mobile devices, which is frustrating. This is most evident in the case of images. Using low-resolution pictures may have less clarity and look distorted when seen on a desktop or on other larger screens. So when it comes to responsive web design, image optimization has to be done for the sites to load faster.

Read more: https://www.bootstrapdash.com/