responsive width in bootstrap code example

Example 1: bootstrap width

<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>

Example 2: bootstrap container width

--------------------------------------------------------------------------------------
Bootstrap Container Width			 					| Size        | Class Prefix
--------------------------------------------------------------------------------------
Extra small devices Phones (less than 768px)  			| None (auto) | .col-xs-
Small devices Tablets (greater than equals 768px) 		| 750px       | .col-sm-
Medium devices Desktops (greater than equals 992px)     | 970px       | .col-md-
Large devices Desktops (greater than equals 1200px)     | 1170px      | .col-lg-

Tags:

Css Example