Bootstrapのドキュメントcontainerのサンプルコードに、divのサイズにrem単位を使うらしい。
MDNを調べると、
remは、
ルート要素（html)のfont-size
と説明しているが、外国語の資料によると、ルート要素を基準値にした相対単位だそうだ。
html要素のfont-sizeは１０pxとすれば、
1rem=10px
2.5rem=25px
3rem=30px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.2.1.min.js"></script>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/bootstrap.min.js"></script>
<style>
div.container{
min-width: 16rem;
max-width: 30rem;
margin-right: auto;
margin-left: auto;
}
.container-header{
height: 3rem;
margin-bottom: .5rem;
background-color: #daeeff;
border-radius: .25rem;
}
.container-sidebar{
float: right;
width: 4rem;
height: 8rem;
background-color: #fae3c4;
border-radius: .25rem;
}
.container-body{
height: 8rem;
margin-right: 4.5rem;
background-color: #957bbe;
border-radius: .25rem;
}
html{
font-size:10px;
}
</style>
</head>
<body>
これはサンプルです。
<div class="bg-container container">
<div class="container-header">これは使用方法のサンプルです。これは使用方法のサンプルです。</div>
<div class="container-sidebar"></div>
<div class="container-body"></div>
</div>
<div class="bg-container-fluid container-fluid">
<div class="container-header"></div>
<div class="container-sidebar"></div>
<div class="container-body"></div>
</div>
</body>
</html>
htmlを１０ｐｘと設定してみれば、divの大きさが確定されるが、文字のfont-sizeは14pxで、bodyの初期値じゃないかと考えて、divのfont-sizeを１emと設定する。
<style>
html{
font-size:10px;
}
div{
font-size:1rem;
}
</style>
でdivブロックに何文字分入れるかを把握することはできる。
特に文字の大きさに関しては、htmlのfont-sizeを基準にしたい場合、remで再設定する必要があり、設定しないと、htmlの初期値ではなく、その上の父の要素のfont-sizeの初期値になるかと考えられる。