How To Build Responsive Layouts With Bootstrap 4 and Angular 📐

Tomas Trajan
8 min readMay 15, 2018
Yes, yes… web is mobile first since ages… But Bootstrap 4 is new and great and so is Angular 6!

Every web app is assumed to be responsive, period.

Yes, even the complex enterprise applications bursting with large data tables and charts. Even if it isn’t the best fit, every type of content should be accessible from any kind of device…

Responsive web design (RWD) is an approach to web design which makes web pages render well on a variety of devices and window or screen sizes — Wikipedia

or for the more visual folks…

Example of a responsive web app, pay extra attention to the footer 😉

OK Tomáš, we have been building responsive web apps since forever so what’s the big deal ?!

Well, after many years of waiting, Bootstrap 4 was finally released in January 2018. Bootstrap was the first widely popular css framework which contained responsive css grid as one if its main features. The new version built upon this successful foundation and brings many improvements which makes working with responsive grids even easier.

Bootstrap is the OG of the responsive layouts

--

--

Tomas Trajan

👋 I build, teach, write & speak about #Angular & #NgRx for enterprises 👨‍💻 Google Developer Expert #GDE 👨‍🏫 @AngularZurich meetup co-organizer