Well, this is described in the Responsive typography section of the Bootstrap 4 documentation. From the docs: Bootstrap doesn’t do this for you, but it’s fairly easy to add if you need it.
It is indeed not that hard. Basically you have to define the font sizes on the <html>
tag for each media breakpoint.
Here is an example:
html { font-size: 1rem; }
@media (min-width: 576px) {
html { font-size: 1.25rem; }
}
@media (min-width: 768px) {
html { font-size: 1.5rem; }
}
@media (min-width: 992px) {
html { font-size: 1.75rem; }
}
@media (min-width: 1200px) {
html { font-size: 2rem; }
}
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Hello World</h1>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>