Bootstrap 4 - Things to Know

HTML and CSS are most widely used, and probably the most taken for granted languages by Web Developers. With the rapid development of front-end technologies and frameworks like Angular, React, Vue, XAML and many more, developers often don’t bother to put effort and time in learning proper standards and new development in these languages. I often see developers using very old methods to create front end designs which affects the quality of the work and increases time consumption

This blog is about using and new features of bootstrap 4 (4.1)

Bootstrap

Bootstrap is one the most widely known and used library for CSS. It is a very rich and easy to use library and save a lot of developer’s time by providing a set of responsive classes. Bootstrap uses a grid structure to handle responsiveness on all screens and it handle most of the painful tasks itself hence relieving the developer.

Bootstrap3

Bootstrap 3 the mostly used version of Bootstrap and now even after the release of version 4, it is still the most used version of bootstrap. It uses Grid as a basic structure with classes for rows and columns. Developers can use these classes to create grids for all screen sizes.

Bootstrap 4

Bootstrap 4 is the latest version of Bootstrap from Twitter and it provides some advanced features which were absent in bootstrap 3. This supports all modern browsers and provides a robust structure to start a new project in no time. See the documentation here

Following are some highlights of these new feature

FlexLayout

New bootstrap grids are now Flex based which provides more flexibility in arranging and aligning content. In bootstrap 3, the grid was float based which lacks some features by default like aligning vertically, automatic filling the width etc. This new addition is very helpful in creating clean designs

New unit REM

Rem is the new unit introduced in Bootstrap 4 which is very helpful in creating scalable designs. The REM unit gets its value dynamically from the screen size it is being viewed on. For example, if we give a width and height to a button in rem, it will grow and shrink depending on the screen size. This reduced the hassle of resizing all elements with media queries. Using rem instead of pixels will result in cleaner and lesser code

Introduction of SASS

Sass is a pre-compiled CSS library which provides a lot of useful features that regular CSS lacks. With Sass, you can create variables, functions, maps, nesting and many other features and it compiles your SCSS file to a normal CSS file that browser can understand. In short, Sass is CSS on steroids and it provides you tools to create CSS in easy and powerful way

Mobile First Approach

Mobile first is a concept which is pretty much a standard when creating responsive designs. This means that developers should start the mobile design of their web page as a first thing and then work their way up from there to larger screens. Bootstrap follows that standard and developers must follow this approach to get the full benefit of the framework

Often, developers do not follow this approach and work their way from larger screens to smaller and they end up writing a lot of unnecessary code and most of the times, code gets ugly. The best practice is to start the mobile design first

Things to keep in mind

Before starting any new HTML/CSS project, keep the following things in mind. They will help you In a long run

Use Bootstrap as your starting template. It will save you a lot of time.

Follow Mobile First Approach

Use REM instead of pixels. This will result in very less media queries and cleaner code

Learn Sass, its not difficult and will help you tremendously in your project

Follow all the bootstrap convention and hierarchy . Ignoring this will end up in errors and weird behaviors

Use Bootstrap’s default components as much as possible and style them according to you needs. It will decrease your chances of getting error

All the points explained in the article are from my personal experiences. I hope your next project will be hassle-free using this latest version of Bootstrap