Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Solid Color

For backgrounds, use .bg-* with any color from a predefined set of 270+ colors. Choose from 22 base colors with respective light & dark shades. See full list of colors here.

Preview

Jsx

Classes

import React from 'react';
function SolidColors() {
  return (
     <>
        <div className="d-flex">
            <div className="flex-fill bg-danger h-70p" />
            <div className="flex-fill bg-pink h-70p" />
            <div className="flex-fill bg-purple h-70p" />
            <div className="flex-fill bg-violet h-70p" />
            <div className="flex-fill bg-indigo h-70p" />
            <div className="flex-fill bg-blue h-70p" />
            <div className="flex-fill bg-primary h-70p" />
            <div className="flex-fill bg-info h-70p" />
            <div className="flex-fill bg-teal h-70p" />
            <div className="flex-fill bg-success h-70p" />
        </div>
        <div className="d-flex">
            <div className="flex-fill bg-neon h-70p" />
            <div className="flex-fill bg-lime h-70p" />
            <div className="flex-fill bg-sun h-70p" />
            <div className="flex-fill bg-warning h-70p" />
            <div className="flex-fill bg-orange h-70p" />
            <div className="flex-fill bg-pumpkin h-70p" />
            <div className="flex-fill bg-brown h-70p" />
            <div className="flex-fill bg-grey h-70p" />
            <div className="flex-fill bg-gold h-70p" />
            <div className="flex-fill bg-smoke h-70p" />
        </div>
     </>
  );
}

export default SolidColors;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="bg-[Value]"`	primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Dark Color

For Dark backgrounds, use .bg-dark-*

Preview

Jsx

Classes

import React from 'react';
function DarkColor() {
  return (
     <>
        <div className="d-flex">
            <div className="flex-fill bg-danger h-70p" />
            <div className="flex-fill bg-pink h-70p" />
            <div className="flex-fill bg-purple h-70p" />
            <div className="flex-fill bg-violet h-70p" />
            <div className="flex-fill bg-indigo h-70p" />
            <div className="flex-fill bg-blue h-70p" />
            <div className="flex-fill bg-primary h-70p" />
            <div className="flex-fill bg-info h-70p" />
            <div className="flex-fill bg-teal h-70p" />
            <div className="flex-fill bg-success h-70p" />
        </div>
        <div className="d-flex">
            <div className="flex-fill bg-neon h-70p" />
            <div className="flex-fill bg-lime h-70p" />
            <div className="flex-fill bg-sun h-70p" />
            <div className="flex-fill bg-warning h-70p" />
            <div className="flex-fill bg-orange h-70p" />
            <div className="flex-fill bg-pumpkin h-70p" />
            <div className="flex-fill bg-brown h-70p" />
            <div className="flex-fill bg-grey h-70p" />
            <div className="flex-fill bg-gold h-70p" />
            <div className="flex-fill bg-smoke h-70p" />
        </div>
     </>
  );
}

export default DarkColor;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="bg-dark-[Value]"`	10 / 20 / 40 / 60 / 80 / 100

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Grey Color

For Dark backgrounds, use .bg-grey-*

Preview

Jsx

Classes

import React from 'react';
function GreyColors() {
  return (
     <>
        <div className="d-flex">
        <div className="flex-fill bg-grey-light-5 h-70p" />
        <div className="flex-fill bg-grey-light-4 h-70p" />
        <div className="flex-fill bg-grey-light-3 h-70p" />
        <div className="flex-fill bg-grey-light-2 h-70p" />
        <div className="flex-fill bg-grey-light-1 h-70p" />
        <div className="flex-fill bg-grey h-70p" />
        <div className="flex-fill bg-grey-dark-1 h-70p" />
        <div className="flex-fill bg-grey-dark-2 h-70p" />
        <div className="flex-fill bg-grey-dark-3 h-70p" />
        <div className="flex-fill bg-grey-dark-4 h-70p" />
        <div className="flex-fill bg-grey-dark-5 h-70p" />
        </div>
     </>
  );
}

export default GreyColors;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="bg-grey-light-[Value]"`	1 / 2 / 3 / 4 / 5

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Background Opacity

A set of dark & light background is made with different transparencies.

Preview

Jsx

Classes

This is default success background

This is 75% opacity success background

This is 50% opacity success background

This is 25% opacity success background

This is 10% opacity success background

import React from 'react';
function BackgrounOpacity() {
  return (
     <>
        <div className="bg-success p-2 text-white">This is default success background</div>
        <div className="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
        <div className="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
        <div className="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
        <div className="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
     </>
  );
}

export default BackgrounOpacity;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="bg-opacity-[Value]"`	10 / 25/ 50 / 75

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Overlay

Use .bg-overlay .bg-success .bg-opacity-*.

Preview

Jsx

import React from 'react';
//images
import bgimg from '../../../Assets/dist/img/trans-bg.jpg';

function Overlay() {
  return (
     <>
        <div className="overlay-wrap">
            <img className="d-block w-100 img-fluid" src={bgimg} alt="img" />
            <div className="bg-overlay bg-success bg-opacity-25" />
        </div>
        <div className="overlay-wrap">
            <img className="d-block w-100 img-fluid" src={bgimg} alt="img" />
            <div className="bg-overlay bg-light bg-opacity-25" />
        </div>
     </>
  );
}

export default Overlay;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.