How Can I Responsively Adjust Font Sizes in Bootstrap Using Media Queries?

Using Media Queries to Adjust Font Sizes Responsively in Bootstrap

Bootstrap 3 provides media queries to allow developers to modify styles depending on screen size. To adjust font sizes using media queries:

Bootstrap 3

1. Use the following media query selectors:

@media (max-width: 767px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}

2. Example:

@media (min-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }
}

Bootstrap 4

1. Use the following selectors:

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}

2. Remember that "extra small" is the default, so code XS sizes first and then override with media queries.

Bootstrap 5

1. Use the following selectors:

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}

2. Example:

@media (min-width: 992px) {
  h1 {
    font-size: 1.75rem;
  }
}

Note: These selectors have remained consistent as of Bootstrap versions 3.4.1, 4.6.0, and 5.3.0.

The above is the detailed content of How Can I Responsively Adjust Font Sizes in Bootstrap Using Media Queries?. For more information, please follow other related articles on the PHP Chinese website!