I recently came across an informative tutorial that I found to be quite helpful:
https://bootstrapcreative.com/can-adjust-text-size-bootstrap-responsive-design
The tutorial suggested a method where the font-size is adjusted based on the category of the window/screen size where the page is being viewed. I decided to implement this approach in my own application, and it provided me with the flexibility I was looking for.
For testing purposes, I set some unusually large values for commonly used HTML elements. As expected, the text appeared very large within those elements.
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
a {font-size:3.5rem;} /*1rem = 16px*/
td {font-size:3.5rem;} /*1rem = 16px*/
p {font-size:3.5rem;} /*1rem = 16px*/
h1 {font-size:3.5rem;} /*1rem = 16px*/
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
a {font-size:5rem;} /*1rem = 16px*/
td {font-size:5rem;} /*1rem = 16px*/
p {font-size:5rem;} /*1rem = 16px*/
h1 {font-size:5rem;} /*1rem = 16px*/
}
The flexibility also works in the opposite direction with very small values like this:
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
a {font-size:0.5rem;} /*1rem = 16px*/
td {font-size:0.5rem;} /*1rem = 16px*/
p {font-size:0.5rem;} /*1rem = 16px*/
h1 {font-size:0.5rem;} /*1rem = 16px*/
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
a {font-size:0.75rem;} /*1rem = 16px*/
td {font-size:0.75rem;} /*1rem = 16px*/
p {font-size:0.75rem;} /*1rem = 16px*/
h1 {font-size:0.75rem;} /*1rem = 16px*/
}
I appreciate how the font size automatically adjusts itself on my computer when I resize the browser window. It's important to provide sensible values for the different window sizes for this feature to function properly.
I managed to implement this without altering any of the files included in the Bootstrap template bundle. I created a separate CSS file called my-custom-styles.css, which I placed in the same directory as the simple-sidebar.css file that comes with the Bootstrap template.
Lastly, within the <head> section of my HTML template, the following links need to be included:
<!-- Bootstrap core CSS -->
<link rel="stylesheet"
th:href="@{/vendor/bootstrap/css/bootstrap.min.css}"
href="../../static/vendor/bootstrap/css/bootstrap.min.css" />
<!-- Custom styles for this Boostrap template -->
<link rel="stylesheet"
th:href="@{/css/simple-sidebar.css}"
href="../../static/css/simple-sidebar.css" />
<!-- Custom styles for my application that override the Bootstrap template -->
<link rel="stylesheet"
th:href="@{/css/my-custom-styles.css}"
href="../static/css/my-custom-styles.css" />
NOTE: The th:href attributes are specific to the Thymeleaf template library and are not present in the final HTML sent to the client's browser.