Box

Angular 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

<CDBBox tag="span">
  Span
</CDBBox>
<CDBBox tag="div">
  Div
</CDBBox>
<CDBBox tag="p">
  Paragraph
</CDBBox>
<CDBBox tag="section">
  Section
</CDBBox>

Display

With CDBox component you can set any display CSS style from Bootstrap 4 to CDBox component like d-none, d-flex etc.

html

<CDBBox display="flex">
  Display Flex
</CDBBox>
<CDBBox display="block">
  Display Block
</CDBBox>
<CDBBox display="none">
  Dislpay None
</CDBBox>
<CDBBox display="inline">
  Display Inline
</CDBBox>

Flex

With CDBox component you can set flexbox CSS styles to this component and render it on your website. You can use props justifyContent, flex, alignItems, alignContent, alignSelf.

html

<CDBBox display="flex" justifyContent="center">
  Justify Content Center
</CDBBox>
<CDBBox display="flex" justifyContent="end">
  Justify Content End
</CDBBox>
<CDBBox display="flex" flex="column">
  <CDBBox tag="p">Column</CDBBox>
  <CDBBox tag="p">Column</CDBBox>
  <CDBBox tag="p">Column</CDBBox>
</CDBBox>
<CDBBox display="flex" flex="row">
  <CDBBox tag="p">Row</CDBBox>
  <CDBBox tag="p">Row</CDBBox>
  <CDBBox tag="p">Row</CDBBox>
</CDBBox>
<CDBBox display="none">
  <CDBBox display="flex" flex="fill">
    <CDBBox tag="p">Fill</CDBBox>
  </CDBBox>
  <CDBBox display="flex" flex="row" alignItems="start">
    Align Items Start
  </CDBBox>
  <CDBBox display="flex" flex="row" alignItems="center">
    Align Items Center
  </CDBBox>
  <CDBBox display="flex" alignContent="start">
    Align Content Start
  </CDBBox>
  <CDBBox display="flex" alignContent="center">
    Align Content Center
  </CDBBox>
  <CDBBox display="flex" alignSelf="start">
    Align Self Start
  </CDBBox>
  <CDBBox display="flex" alignSelf="center">
    Align Self Center
  </CDBBox>
</CDBBox>

Colors

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

html

<CDBBox color="red">
  Red Color
</CDBBox>
<CDBBox color="green">
  Green Color
</CDBBox>
<CDBBox color="blue">
  Blue Color
</CDBBox>
<CDBBox color="pink">
  Pink Color
</CDBBox>

Background Colors

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

html

<CDBBox bg="success">
  Success Background
</CDBBox>
<CDBBox bg="secondary">
  Secondary Background
</CDBBox>
<CDBBox bg="danger">
  Danger Background
</CDBBox>
<CDBBox bg="warning">
  Warning Background
</CDBBox>

API

Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.

Contrast Box Bootstrap Modules used

import {BoxModule } from 'cdbangular';

API Reference: Contrast Box Bootstrap Inputs

The table below shows the possible input of the Box component.