Search...

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 JavaScript Style Guide 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

Edge / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
MacN/Asupportedsupportedsupportedsupported
WindowssupportedsupportedsupportedN/Asupported

Documentation

Check out our documentation here

PRO Version

Contrast Design Bootstrap PRO

License

See License in <license.pdf> © Devwares

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.

ad-banner