DEV Community

Cover image for Getting started with Bootstrap 5
Muhammad Afzal for AWS Community Builders

Posted on • Updated on

Getting started with Bootstrap 5

What is Responsive Design & Bootstrap?

In early days we have very basic infrastructure of website services and for development HTML is enough but with the passage of time demand of web services increased and step by step different technologies came into existence to fulfill the growing need such as CSS, JavaScript and dynamic languages such as PHP, ASP.Net, Java and etc.

But the real evolution begins with the advancement of mobile technology, then the demand of responsive web design grows instantly. At that time CSS media queries are introduced to handle the different screen size issues but front end development becomes very complex as every person have it's own nature to write the code and have it's own set of screens for testing. Then Bootstrap come into ground with revolutionary responsive model which is called grid system.

Bootstrap is an opensource CSS & JS Framework for responsive website development. Bootstrap works on the model of grid system and they have defined generic breakpoints with respect to different screen sizes such as Extra Small, Small, Medium, Large, Extra Large, Extra Extra Large, Framework is packed with custom CSS classes which provides very fast and effective working model. Developers are required to just remember the classes and get rid of long CSS properties.

Bootstrap saves the time & cost in development of responsive website design as well as provide very beautiful responsive components such as Navigation Bar, Cards, Carousal, Forms and much more.

What's new in Bootstrap 5?

Initially Bootstrap has been launched in Aug, 2011 with version 1.x and later they released different versions like 2.x, 3.x and 4.x is a version which is mostly used by developers. Recently they launched the new version of Bootstrap which is Bootstrap 5 and contains new classes for advance responsive website design.

In bootstrap 5 they have updated the logo, New Offcanvas Component, New accordion and they have created very awesome experience for forms such as floating labels, validations, Simplified Layouts and etc.

Previous versions of Bootstrap didn't support RTL(Right-to-Left) Content which is very important features for Arabic,Urdu, Persian websites. Now developers can easily build websites for those languages which are RTL based.

In Boostrap 5 they added many classes and removed some old classes of version 4 so it's recommend to study the documentation of Version 5 before migrating your older version to newest version. complete upgrade documentation is available at https://blog.getbootstrap.com/2021/05/05/bootstrap-5/

Learn Bootstrap 5

Bootstrap is famous due to it's simplicity, easy working style, extensibility but this is all due to well documentation, strong community. so if you are new to responsive website design then get started with there documentation and i also created very detailed course at Udemy Mastering Bootstrap 5 - Complete Guide Step by Step 2022

Note: This post includes affiliate links; I may receive compensation if you purchase products or services from the links provided in this article.

Top comments (0)