How To Build Responsive Layouts With Bootstrap 4 and Angular 6 📐

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…

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

Bootstrap is the OG of the responsive layouts

Angular 6 was released in May 2018. It brought unification of versioning in the Angular ecosystem. This means that all Angular projects are now released together.

Follow me on Twitter to get notified about the newest blog posts and interesting frontend stuff

Let’s do this ! Angular 6 ❤️ Bootstrap 4

First, we create new Angular project using Angular CLI’s ng new command…

That’s all that we need to start using Bootstrap responsive grid in our Angular project!
We can add Bootstrap css files straight into “styles” property in angular.json (per project)
Using styles-variables.scss gives us ability to override default Bootstrap grid and implement consistent custom responsive styles in our components
Import styles-variables.scss in the main styles.scss file to be used with Bootstrap
Import styles-variables.scss in the styles of the custom component (eg header.component.scss) to implement custom responsive styling in consistent maner

Building responsive layout

Adding Bootstrap reboot and grid enables us to easily build responsive layouts. Let’s see how it works by building a minimal example.

Basic responsive grid classes

Let’s start with a quick recapitulation of how to build responsive layouts with Bootstrap. Feel free to skip this section if you have some previous experience with Bootstrap…

Example implementation of our responsive layout
Try out @angular-extensions/model library! Check out docs & Github

Responsive helper classes

Building high-level responsive layout is only half of the story. Often, it is also the content of the particular element which has to be responsive.

⚠️ Responsive helper classes work differently in Bootstrap 4

Previous versions of Bootstrap used responsive helper classes like .hidden-xs or .visible-sm-inline. This have changed. Current responsive helpers are more in line with css itself by following its display property.

Using Bootstrap 4 with Angular Material

We imported some of the Angular Material modules to use them in our application…
Import one of the pre-build Angular Material themes into styles.scss file

👁️ Check out and play around with this minimalistic working example on ⚡StackBlitz!

BONUS: Additional resets

Even our minimal inclusion of Bootstrap adds couple of styles that don’t play so nicely with the Angular Material out of the box. Let’s create new styles-reset.scss file with the following content and import it after the original Bootstrap imports in the main styles.scss file.

Remove Bootstrap outlines that don’t play nicely with Angular Material links and buttons
Remember, in case you’re using more than one theme it will be necessary to scope the link color based on current theme (check this example to see it in action)

Hooray!

We made it to the end! Hope you found this article helpful!

And never forget, future is bright

Obviously the bright future (📷 by Janko Ferlič)
Angular NgRx Material Starter with built in best practices, theming and much more!

🅰️ Google Developer Expert for Angular #GDE ❤️ ️Typescript 🛠️ Maker of the @releasebutler and Medium Enhanced Stats 🌞 Obviously the bright Future

Get the Medium app