It is commonly believed that content will appear the same on all devices or browser windows smaller than 768px. However, if you need to make adjustments below this breakpoint, there are several options available:
- Create your own custom CSS in addition to using Bootstrap's default styles. Be cautious of potential conflicts with code order or specificity that may cause unintended style outcomes.
- Bootstrap offers customization options, such as the ability to modify Bootstrap's breakpoints according to your requirements.
- For those who like to experiment or want to try something new, consider utilizing Bootstrap 4, which introduces a 4th breakpoint (providing 5 different sizes) to better cater to devices in landscape mode.
Below is relevant CSS from Bootstrap's V4-Docs, note the switch from px to em as the primary unit for measurements:
// Extra small devices (portrait phones, less than 34em)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }
// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }
// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }
// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }