Kirkusscott
4/27/2018 - 12:49 PM

Sizing

Width, Height, Borders

<!-- BORDERS -->
        <div class="p-3 mb-2 bg-light border">Regular</div>
        <div class="p-3 mb-2 bg-light border border-primary rounded">Primary</div>
        <div class="p-3 mb-2 bg-light border border-secondary rounded-top">Secondary</div>
        <div class="p-3 mb-2 bg-light border border-success border-bottom-0">Success</div>
        <div class="p-3 mb-2 bg-light border border-info">Info</div>
        <div class="p-3 mb-2 bg-light border border-warning">Warning</div>
        <div class="p-3 mb-2 bg-light border border-danger">Danger</div>
        <div class="p-3 mb-2 bg-light border border-light">Light</div>
        <div class="p-3 mb-2 bg-light border border-dark">Dark</div>
        <div class="p-3 mb-2 bg-light border border-white">White</div>
<!-- HEIGHT CLASSES -->
        <div>
            <div class="bg-primary d-inline-block h-25">Height 25%</div>
            <div class="bg-primary d-inline-block h-50">Height 50%</div>
            <div class="bg-primary d-inline-block h-75">Height 75%</div>
            <div class="bg-primary d-inline-block h-100">Height 100%</div>
        </div>
<!-- WIDTH CLASSES -->
        <div class="bg-success p-3 w-25">Width 25%</div>
        <div class="bg-success p-3 w-50">Width 50%</div>
        <div class="bg-success p-3 w-75">Width 75%</div>
        <div class="bg-success p-3 w-100">Width 100%</div>