Getting Started

Contrast Design Bootstrap

Well crafted and elegant Bootstrap 5 UI kit Library featuring over 2000+ basic components and 10000+ premium components for building mobile-first, responsive websites and web apps using clean UI components

npm

Usage

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

Below are some examples to show you how you can build your project using cdbootstrap components.

Alert Component Demo

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/cdb.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/cdb.min.js"></script>
    <title>Alert Component Demo</title>
  </head>
  <body>
    <div>
      <div class="alert alert-primary">
        A simple alert built with contrast design check it out!
      </div>
      <div class="alert alert-success">
        A simple alert built with contrast design check it out!
      </div>
      <div class="alert alert-danger">
        A simple alert built with contrast design check it out!
      </div>
    </div>
  </body>
</html>

Button Component Demo

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/cdb.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/cdb.min.js"></script>
    <title>Button Component Demo</title>
  </head>
  <body>
    <div>
      <button class="btn btn-primary">Primary</button>
      <button class="btn btn-secondary">Secondary</button>
      <button class="btn btn-success">Success</button>
      <button class="btn btn-danger">Danger</button>
    </div>
  </body>
</html>

cdbootstrap 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

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!

Visually build tailwind css projects 10x faster using AI

Build Tailwind websites visually and ship projects to production in minutes instead of days. Generates code from your designs to export to your favourite frameworks like React, Vue, Angular.

Try Windframe out for free.

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