<h1 align="center">A Responsive Bootstrap 5 dual Theme</h1>

<p align="center">
  <a href="https://bootstrap-theme.notesoncloudcomputing.com/">
    <img src="https://bootstrap-theme.notesoncloudcomputing.com/assets/vendor/nocc-bootstrap-theme/images/nocc/nocc-theme-showroom.png" alt="NOCC logo" width="800" height="311">
  </a>
</p>

[![NOCC package](https://img.shields.io/npm/v/nocc-bootstrap-theme?logo=npm&logoColor=fff)](https://www.npm.im/nocc-bootstrap-theme)
[![Github-sponsors](https://img.shields.io/static/v1?label=sponsor&message=❤&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/carlesloriente)
[![NPM Downloads](https://img.shields.io/npm/dm/nocc-bootstrap-theme)](https://www.npm.im/nocc-bootstrap-theme)
[![Publish Package](https://github.com/carlesloriente/nocc-bootstrap-theme/actions/workflows/publish-release.yml/badge.svg)](https://github.com/carlesloriente/nocc-bootstrap-theme/actions/workflows/publish-release.yml)
[![license](https://img.shields.io/badge/license-MIT-blue.svg?logo=data:image/svg+xml;base64, )](https://raw.githubusercontent.com/carlesloriente/nocc-bootstrap-theme/main/LICENSE)
[![Socket Badge](https://socket.dev/api/badge/npm/package/nocc-bootstrap-theme)](https://socket.dev/npm/package/nocc-bootstrap-theme)

## Introduction

**Are you tired of outdated Bootstrap themes?**

**Say hello to NOCC 🎉**: A Modern Bootstrap 5 Theme!

It comes in three powerful options:

- **💎 [Jekyll Theme Nocc](https://rubygems.org/gems/jekyll-theme-nocc)**: A Ruby gem that brings the power of NOCC directly to your Jekyll project.
- **🌟 [Nocc Bootstrap Theme](https://www.npmjs.com/package/nocc-bootstrap-theme)**: An NPM Package that brings the power of NOCC directly to your NodeJS project.
- **🌐 [Full Site Bundle for Jekyll](https://github.com/carlesloriente/bootstrap-theme-jekyll)**: A complete static website showcasing NOCC's seamless integration. Featuring a beautifully designed homepage, dynamic tag cloud, image gallery, and more.

> **&#9432;** NOCC is a complete replacement for Bootstrap 5.3.3

## Table of contents

- [Introduction](#introduction)
- [Table of contents](#table-of-contents)
- [Features](#features)
- [What's included](#whats-included)
  - [Bundled dependencies](#bundled-dependencies)
- [Quick Start](#quick-start)
- [Customize it](#customize-it)
  - [Installing from source](#installing-from-source)
    - [Demo website](#demo-website)
    - [Testing your changes](#testing-your-changes)
- [Bugs and Issues](#bugs-and-issues)
- [Contributing](#contributing)
- [Creator](#creator)
- [Thanks](#thanks)
- [Copyright and License](#copyright-and-license)

## Features

1. **Use of the latest Bootstrap 5 library**
2. **Fully Responsive and Dual Color (light and dark)**
3. **CSS and JS files are minimized by default**
4. **Self-hosted Google web fonts**
5. **Demo site built-in**

## What's included

You'll find all the required directories and files within the download, logically grouping common assets and providing compiled and minified variations.

### Bundled dependencies

- [Bootstrap 5.3.3](https://getbootstrap.com)
- [jQuery 3.7.1](https://jquery.com)
- [Clipboard.js 2.0.11](https://clipboardjs.com)
- [jCloud 2.0.3](https://github.com/mistic100/jQCloud)
- [Roboto Sans-serif](https://fonts.google.com/specimen/Roboto), [Lora Serif](https://fonts.google.com/specimen/Lora), and [Oxygen Mono](https://fonts.google.com/specimen/Oxygen+Mono) font families
- [A few Bootstrap 5 icons](https://icons.getbootstrap.com)

## Quick Start

Select your favourite package manager and follow the instructions below.

- Install with npm:

```bash
  npm install nocc-bootstrap-theme --save
```

- Install with yarn:

```bash
  yarn add nocc-bootstrap-theme
```

- Install with Composer:

```bash
  composer require nocc-bootstrap-theme
```

The package folder structure looks like this:

```filesystem
  nocc-bootstrap-theme/
  ├─ css/
  ├─ fonts/
  ├─ icons/
  ├─ images/
  ├─ js/
  └─ src/
```

- The `css/nocc-theme.css` (or the minified `nocc-theme.min.css`) file loads the fonts and icons. Remember to include JavaScript files and images in your project.

You can also import the source SCSS files to your manifest (e.g. index.scss).

```scss
  @import "nocc-bootstrap-theme/src/styles/main.scss";
```

If you need documentation or help with Bootstrap or its components in general, please head over to [Bootstrap documentation](https://getbootstrap.com/docs/5.3/getting-started/introduction/).

## Customize it

You can change or use this theme in your own Sass code; please download the source code from the [GitHub repository](https://github.com/carlesloriente/nocc-bootstrap-theme) and change it.

### Installing from source

- Install node v20.10.0 or higher
- Clone project `git clone --recursive git@github.com:carlesloriente/nocc-bootstrap-theme.git`
- Go into the project folder `cd nocc-bootstrap-theme`
- Init the Bootstrap submodule `git submodule update --init --recursive` (only needed the very first time)

The folder structure looks like this:

```filesystem
  nocc-bootstrap-theme/
  ├─ bootstrap/
  ├─ scripts/
  ├─ src/
  |  ├─ fonts/
  |  ├─ icons/
  |  ├─ images/
  |  ├─ js/
  |  └─ styles/
  └─ static/
    ├─ gallery/
    └─ posts/
```

Install node modules, run the command:

```bash
  npm install
```

Build the distribution, run the command:

```bash
  npm run compile
```

#### Demo website

The source includes resources for building and running locally a sample website.

If you want to see the theme in action, complete the following steps.

Now, let's build the demo site, run the command:

```bash
  npm run compile-demo
```

The folder `demo` contains all the generated site files.

To run the bundled web server, run the command:

```bash
  npm run server-watch
```

Additionally, an option builds the files on the fly when there's a change and runs the web server incorporating a watcher, so you can write code and see your changes immediately in the browser. Run the command:

```bash
  npm run start-demo
```

#### Testing your changes

If you want to test the code, run the command:

```bash
  npm run lint
```

## Bugs and Issues

Have a bug or an issue with this package? [Open a new issue](https://github.com/carlesloriente/nocc-bootstrap-theme/issues) here on GitHub!

## Contributing

New contributors are always welcome! Check out [CONTRIBUTING.md](https://github.com/carlesloriente/nocc-bootstrap-theme/blob/master/CONTRIBUTING.md) to get involved.

## Creator

**[Carles Loriente](https://www.linkedin.com/in/carles-loriente/)** is the creator and maintainer of the NOCC Bootstrap theme.

- [Linkedin](https://www.linkedin.com/in/carles-loriente)
- [Twitter](https://twitter.com/godarthvader)
- [GitHub](https://github.com/carlesloriente)

## Thanks

[Bootstrap 5](https://getbootstrap.com/) framework created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thorton](https://twitter.com/fat).

## Copyright and License

Copyright (c) 2025 Carles Loriente. Code released under the [MIT](https://github.com/carlesloriente/nocc-bootstrap-theme/blob/master/LICENSE) license.
