nocc-bootstrap-theme

A Responsive Bootstrap 5 dual 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: A Ruby gem that brings the power of NOCC directly to your Jekyll project.
• 🌟 Nocc Bootstrap Theme: An NPM Package that brings the power of NOCC directly to your NodeJS project.
• 🌐 Full Site Bundle for Jekyll: A complete static website showcasing NOCC's seamless integration. Featuring a beautifully designed homepage, dynamic tag cloud, image gallery, and more.

ⓘ NOCC is a complete replacement for Bootstrap 5.3.3

Table of contents

• Introduction
• Table of contents
• Features
• What's included
  • Bundled dependencies
• Quick Start
• Customize it
  • Installing from source
    • Demo website
    • Testing your changes
• Bugs and Issues
• Contributing
• Creator
• Thanks
• Copyright and License

Features

• Use of the latest Bootstrap 5 library
• Fully Responsive and Dual Color (light and dark)
• CSS and JS files are minimized by default
• Self-hosted Google web fonts
• 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
• jQuery 3.7.1
• Clipboard.js 2.0.11
• jCloud 2.0.3
• Roboto Sans-serif, Lora Serif, and Oxygen Mono font families
• A few Bootstrap 5 icons

Quick Start

Select your favourite package manager and follow the instructions below.

• Install with npm:

  npm install nocc-bootstrap-theme --save

• Install with yarn:

  yarn add nocc-bootstrap-theme

• Install with Composer:

  composer require nocc-bootstrap-theme

The package folder structure looks like this:

  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).

  @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.

Customize it

You can change or use this theme in your own Sass code; please download the source code from the GitHub repository and change it.

Installing from source

• Install node v20.10.0 or higher
• Clone project git clone --recursive [e-mail]: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:

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

Install node modules, run the command:

  npm install

Build the distribution, run the command:

  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:

  npm run compile-demo

The folder demo contains all the generated site files.

To run the bundled web server, run the command:

  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:

  npm run start-demo

Testing your changes

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

  npm run lint

Bugs and Issues

Have a bug or an issue with this package? Open a new issue here on GitHub!

Contributing

New contributors are always welcome! Check out CONTRIBUTING.md to get involved.

Creator

Carles Loriente is the creator and maintainer of the NOCC Bootstrap theme.

• Linkedin
• Twitter
• GitHub

Thanks

Bootstrap 5 framework created by Mark Otto and Jacob Thorton.

Copyright and License

Copyright (c) 2025 Carles Loriente. Code released under the MIT license.