New

Powerful Svelte-Bootstrap SaaS App Template

Admin CRM Application Template

Robust Next.js SaaS App Template

Powerful React-Bootstrap SaaS App Template

Modern Remix SaaS App Template

VueJS-Bootstrap SaaS App Template

Intuitive Nuxt-Bootstrap SaaS App Template

Seperators

Change the shape using rounded-* classes

Line Seperators

Use.separator

<div class="separator"></div>
<div class="separator-full"></div>
<div class="separator separator-light"></div>

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

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

<template>
    <div class="separator"></div>
    <div class="separator-full"></div>
    <div class="separator separator-light"></div>
</template>

<template>
    <div class="separator"></div>
    <div class="separator-full"></div>
    <div class="separator separator-light"></div>
</template>

<template>
    <div class="separator"></div>
    <div class="separator-full"></div>
    <div class="separator separator-light"></div>
</template>

Vertical Seperators

Use.v-separator

<div class="separator"></div>
<div class="separator-full"></div>
<div class="separator separator-light"></div>

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

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

<template>
    <div class="separator"></div>
    <div class="separator-full"></div>
    <div class="separator separator-light"></div>
</template>

<template>
    <div class="separator"></div>
    <div class="separator-full"></div>
    <div class="separator separator-light"></div>
</template>

<template>
    <div class="separator"></div>
    <div class="separator-full"></div>
    <div class="separator separator-light"></div>
</template>

HR

Change the thickness of a hr using hr-*.

<div class="separator"></div>
<div class="separator-full"></div>
<div class="separator separator-light"></div>

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

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

<template>
    <div class="separator"></div>
    <div class="separator-full"></div>
    <div class="separator separator-light"></div>
</template>

<template>
    <div class="separator"></div>
    <div class="separator-full"></div>
    <div class="separator separator-light"></div>
</template>

<template>
    <div class="separator"></div>
    <div class="separator-full"></div>
    <div class="separator separator-light"></div>
</template>

Line Seperators
Vertical Seperators
Hr