🤩
Windframe Import Update is finally here.

Box

Angular Bootstrap Box

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

Angular Bootstrap Box component can become any element from ElementType like div, span, img, video etc. depending on the value of the tag prop. The default is a div element.

Importing the Contrast Angular Bootstrap Box Module

To use the Contrast Angular Bootstrap Box component in your project you need to import BoxModule.

typescript
import {BoxModule } from 'cdbangular';

Angular Bootstrap Box

Use the tag prop to indicate the HTML element you are trying to imitate with the CDBBox component.

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

Display

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

Angular Bootstrap Box

html
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

We can use CSS flexbox styles with the Contrast Angular Bootstrap Box. To do that, we set the display prop on the CDBBox component to flex.

We can use props like justifyContent, flex, alignItems, alignContent, alignSelf just like you would in regular CSS Flex.

Angular Bootstrap Box Flex

html
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.

Angular Bootstrap Box colors

html
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

Use the bg prop to set the background color of your box.

Angular Bootstrap Box Bakground colors

html
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>

Contrast Angular Bootstrap Box Props

This section will build on your information about the props you get to use with the Contrast React Bootstrap Autocomplete component. You will find out what these props do, their default values, and how you would use them in your code.

The table below lists other prop options of the CDBBox component.

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
colorStringChange color of text in the CDBox component. Choose one of these from CDB: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, yellow, amber, orange, deep-orange, brown, grey, blue-grey, cdb-color white. You can also chose default colors from Bootstrap like: primary, secondary, success, info, default, warning, danger, dark, muted, light.color="pink"
alignContentStringSet align-content class to children of CDBox. Choose one of these: start, end, center, between, stretch, around.alignContent="start"
alignItemsStringSet align-items class to children of CDBox. Choose one of these: start, end, center, between, stretch.alignItems="start"
alignSelfStringSet align-self class to children of CDBox. Choose one of these: start, end, center, between, stretch.alignSelf="start"
bgStringSets background color of the box component. Choose one of these: primary, secondary, success, danger, warning, info, light, darkbg="light"
displayStringSet display to element. Choose one of these: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex.display="inline"
flexStringSet flex class to children of CDBox. Choose one of these: row, column, row-reverse, column-reverse, wrap, nowrap, wrap-reverse, fill, grow-0, grow-0, shrink-0, shrink-1, center.flex="column"
justifyContentStringSet justify-content to children od CDBox. Choose one of these: start, end, center, between, around.justifyContent="start"
mNumberWith margin you can set margin top/bottom/right/left/x/y from 0 to 5.m=5 , mt=1 , mb=4 , my=2 , mx=4
pNumberWith padding you can set padding top/bottom/right/left/x/y from 0 to 5.p=5 , pt=1 , pb=4 , py=2 , px=4

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast