<div class="w-25 bg-success p-3">Width 25%</div>
<div class="w-50 bg-success p-3">Width 50%</div>
<div class="w-75 bg-success p-3">Width 75%</div>
<div class="w-100 bg-success p-3">Width 100%</div>
<div class="w-auto bg-success p-3">Width Auto</div>
<div style="height: 300px; border: 1px solid #333;">
<div class="h-25 bg-primary d-inline-block">Height 25%</div>
<div class="h-50 bg-primary d-inline-block">Height 50%</div>
<div class="h-75 bg-primary d-inline-block">Height 75%</div>
<div class="h-100 bg-primary d-inline-block">Height 100%</div>
<div class="h-auto bg-primary d-inline-block">Height Auto</div>
</div>
<div class="border p-3 mb-2 bg-light">Regular</div>
<div class="border-top p-3 mb-2 bg-light">Border Top</div>
<div class="border-bottom p-3 mb-2 bg-light">Border Bottom</div>
<div class="border-right p-3 mb-2 bg-light">Border Right</div>
<div class="border-left p-3 mb-2 bg-light">Border Left</div>
<div class="border border-primary p-3 mb-2 bg-light">Primary</div>
<div class="border border-secondary p-3 mb-2 bg-light">Secondary</div>
<div class="border border-success p-3 mb-2 bg-light">Success</div>
<div class="border border-info p-3 mb-2 bg-light">Info</div>
<div class="border border-warning p-3 mb-2 bg-light">Warning</div>
<div class="border border-danger p-3 mb-2 bg-light">Danger</div>
<div class="border border-light p-3 mb-2 bg-light">Light</div>
<div class="border border-dark p-3 mb-2 bg-light">Dark</div>
<div class="border border-white p-3 mb-2 bg-light">White</div>
<div class="border rounded border-success p-3 mb-2 bg-light">Rounded</div>
<div class="border rounded-top p-3 mb-2 bg-light">Rounded Top</div>
<div class="border rounded-bottom p-3 mb-2 bg-light">Rounded Bottom</div>
<div class="border rounded-right p-3 mb-2 bg-light">Rounded Right</div>
<div class="border rounded-left p-3 mb-2 bg-light">Rounded Left</div>
<div class="border rounded-circle w-25 p-3 mb-2 bg-light">Rounded Circle</div>
<div class="border rounded-0 p-3 mb-2 bg-light">Dark</div>