How to Use Bootstrap 5 Breakpoints?

Bootstrap provides predefined breakpoints that you can use in your media queries. The breakpoints are defined as follows:

sm: Small devices (576px and up)
md: Medium devices (768px and up)

lg: Large devices (992px and up)
xl: Extra-large devices (1200px and up)
xxl: Extra-extra-large devices (1400px and up)

<style>
/* Styles for small devices (less than 768px) */
@media (max-width: 767.98px) {
.my-element {
background-color: red;
}
}

/* Styles for medium devices (768px and up) */
@media (min-width: 768px) {
.my-element {
background-color: blue;
}
}
</style>