Box

Bootstrap boxes are layout components which help to write build components for of the CSS utility needs.

Examples

Box component can be any component from ElementType like div, span, img, video etc. The basic component is a div.

HTML

<span>Span</span>
<div>Div</div>
<p>Paragraph</p>
<section>Section</section>

Display

html

<div class="d-flex">Display FLex</div>
<div class="d-block">Display Block</div>
<div class="d-inline">Display Inline</div>

Flex

html

<div class="d-flex flex-column">
    <p>Coloumn</p>
    <p>Coloumn</p>
    <p>Coloumn</p>
</div>
<div class="d-flex flex-row">
    <p>row</p>
    <p>row</p>
    <p>row</p>
</div>

Colors

With CDBox component you can set text CSS colors to element between CDBox component.

html

<div class="text-danger">Danger</div>
<div class="text-success">Success</div>
<div class="text-warning">Warning</div>
<div class="text-primary">Primary</div>

Background Colors

With CDBox component you can set background CSS colors to element to CDBox component.

html

<div class="bg-danger">Danger</div>
<div class="bg-success">Success</div>
<div class="bg-warning">Warning</div>
<div class="bg-primary">Primary</div>