How to use media queries in Angular 17 with Bootstrap 5?

To use media queries in Angular 17 with Bootstrap 5, you’ll typically follow a two-step process: integrating Bootstrap into your Angular project and then utilizing Bootstrap’s media query features or custom CSS media queries in your Angular components. Here’s a basic guide to help you get started:

1. Integrating Bootstrap 5 into Angular 17

First, you need to include Bootstrap 5 in your Angular project. This can be done either through npm or by including Bootstrap directly in your index.html.

Using npm (recommended):

Run the following command in your Angular project directory to install Bootstrap:

npm install bootstrap

After installing, you need to include Bootstrap’s CSS in your project. You can do this by adding it to the styles array in your angular.json file:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

2. Using Bootstrap 5 Media Queries in Angular

Bootstrap 5 comes with a set of predefined media queries for responsive design, based on minimum viewport widths. Here’s an example of how you might use these in your component’s CSS:

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
  .example { background-color: blue; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
  .example { background-color: green; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .example { background-color: red; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  .example { background-color: purple; }
}

In your Angular component’s CSS file, you can use these media queries to adjust the layout or styling of your components based on the viewport size. This integrates Bootstrap’s responsive design capabilities directly into your Angular project.

Custom Media Queries

Besides using Bootstrap’s predefined media queries, you can also define custom media queries in your CSS to target specific requirements or devices. Here’s an example:

@media (max-width: 600px) {
  .custom-class {
    background-color: orange;
  }
}

This custom media query targets viewports that are 600px wide or smaller, applying a specific style to elements with the .custom-class class.

Conclusion

Integrating Bootstrap 5 into Angular 17 and using its media query features allows you to create responsive layouts and components. Bootstrap’s grid system and utility classes further simplify responsive design in Angular applications. Remember to test your application on various devices and viewport sizes to ensure the best user experience.