Using Bootstrap Breakpoints for a Responsive Web Design

Andrew Julian
5 min readJul 25, 2022

With a greater number of individuals prioritizing the use of a mobile device over a traditional PC online resources, specifically, webpages, need to be constructed in a way that is not just usable across devices, but thoughtfully responsive to both environments.

Designers and developers need to consider a myriad of different situations to make sure that the application works as intended, but first and foremost, the site needs to look as thoughtfully designed on a mobile device as it does on a computer screen.

Having two different sites may be where some people’s minds go first, but for the purposes of consistency, a single site that is responsive to both screen sizes is the ideal situation but can muddy how to ensure everything works.

Enter, Bootstrap Breakpoints…

First, what is Bootstrap?

Bootstrap is an open-source, front-end framework that helps a developer structure the visual elements of their HTML code. More simply, it is a “CSS-assistor,” in that the structural and styling elements able to be utilized in Bootstrap are abstracted for the programmer so that the programmer can call references, often in the form of class on HTML items, for the styling to be applied.

--

--