<div class="font-sizes">
    <h2 class="display-1">Bootstrap 4 Grid "rem" Demo</h2>
    <h4>Click a size to change the <code>html</code> tag's font size</h4>
     <a href="#" class="btn btn-sm btn-primary-outline" data-size="6px">8px</a> 
    <a href="#" class="btn btn-sm btn-primary-outline" data-size="12px">12px</a>
    <a href="#" class="btn btn-sm btn-primary-outline" data-size="16px">16px</a>
    <a href="#" class="btn btn-sm btn-primary-outline" data-size="20px">20px</a>
    <a href="#" class="btn btn-sm btn-primary-outline" data-size="24px">24px</a>
    <a href="#" class="btn btn-sm btn-primary-outline" data-size="28px">28px</a> 
    <a href="#" class="btn btn-sm btn-primary-outline" data-size="32px">32px</a> 
</div>

<div class="container">
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
</div>
html {
  font-size: 16px;
}
[class^="col"] {
    background: rgba(152, 214, 245, 0.73);
    border: 1px solid rgba(86,61,124,.2);
    min-height: 50px;
}
.font-sizes {
    text-align: center;
    padding: 30px 0;
}
$('.font-sizes a').click(function() {
    $('html').css('font-size', $(this).data('size'));
    return false;
});
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
  2. https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js