Getting Started

Contrast Design Bootstrap Angular

Angular 15 & Bootstrap 5 Elegant UI Kit and reusable components for building mobile-first, responsive websites and web apps

npm

Usage

Be sure to have ng-cdbangular installed in your project, you can follow the guides on our installation page to get ng-cdbangular working on your project.

Below is an example to show you how you can build your project using ng-cdbangular components.

Import preferred module in app.module.ts

jsx

import { AlertModule, ButtonModule } from 'ng-cdbangular';

@NgModule({
  imports: [
    AlertModule,
    ButtonModule
  ]
})

You can also import all cdbangular modules this way

jsx

import { CDBFreeModule } from 'ng-cdbangular';

@NgModule({
  imports: [
    CDBFreeModule,
  ]
})

In app.component.html

jsx

<CDBAlert color="success">
  A simple alert built with contrast design check it out!
</CDBAlert>
<CDBAlert color="danger" [dismiss]=true>
  A simple alert built with contrast design check it out!
</CDBAlert>

<CDBBtn color="primary">Primary</CDBBtn>
<CDBBtn color="secondary">Secondary</CDBBtn>
<CDBBtn color="success">Success</CDBBtn>
<CDBBtn color="danger">Danger</CDBBtn>
<CDBBtn color="dark">Dark</CDBBtn>
<CDBBtn color="warning">Warning</CDBBtn>
<CDBBtn color="info">Info</CDBBtn>
<CDBBtn color="white">White</CDBBtn>
<CDBBtn color="light">Light</CDBBtn>

ng-cdbangular can be used on your projects to fit your projects needs. Yes, it's that easy! Check out the documentation for the components to see how you can use them.

Browser support

Browsers supported

	IE / Edge	Firefox	Chrome	Safari	Opera
Mac	N/A	supported	supported	supported	supported
Windows	supported	supported	supported	N/A	supported

Documentation

Check out our documentation here

PRO Version

Contrast Design Bootstrap PRO

License

Support Devwares

Follow us on Social Media

Check out and star our GitHub repository

Github
Create pull requests
Submit bugs
Suggest new features
Help us Improve our documentation with updates

We truly appreciate us all and everyone who has contributed to this project, as we continue to use and imporove this project.

A massive thank you to everyone!

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically 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 Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Installation

Components