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

Line Seperators

Use.separator

import React from 'react';
const LineSeperators = () => {
  return (
      <>
        <div className="separator" />
        <div className="separator-full" />
        <div className="separator separator-light" />
      <>
  );
}

export default LineSeperators;

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

Vertical Seperators

Use.v-separator

Preview

Jsx

import React from 'react';
const VerticalSeperators = () => {
  return (
      <>
        <div className="d-flex position-relative">
            <div className="h-80p">
                <div className="v-separator-full" />
            </div>
            <div className="h-80p">
                <div className="v-separator" />
            </div>
        </div>
      <>
  );
}

export default VerticalSeperators;

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

HR

Change the thickness of a hr using hr-*.

Preview

Jsx

Classes

import React from 'react';
const Hrs = () => {
  return (
      <>
        <hr className="mb-3" />
        <hr className="hr-2 mb-3" />
        <hr className="hr-3 mb-3" />
        <hr className="bg-primary" />
      <>
  );
}

export default Hrs;

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

Class	Values
`class="hr-[value]"`	2 / 3
`class="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.