Skip to content

Latest commit

 

History

History
124 lines (95 loc) · 8.54 KB

index.md

File metadata and controls

124 lines (95 loc) · 8.54 KB
Raw
title metaTitle metaDescription githubUrl
Getting Started
Setting up Contrast Design Bootstrap JavaScript in our project
Ways to set up Contrast Design Bootstrap JavaScript in our project

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

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

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

Edge / Edge
IE / Edge		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari		 Opera
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!