Velvet - Borders

Switcher

Theme Color Mode:

Light

Dark

Directions:

LTR

RTL

Navigation Styles:

Vertical

Horizontal

Vertical & Horizontal Menu Styles:

Menu Click

Menu Hover

Icon Click

Icon Hover

Sidemenu Layout Styles:

Default Menu

Closed Menu

Icon Text

Icon Overlay

Detached

Double Menu

Page Styles:

Regular

Classic

Layout Width Styles:

Full Width

Boxed

Menu Positions:

Fixed

Scrollable

Header Positions:

Fixed

Scrollable

Rounded

Menu Colors:

Note:If you want to change color Menu dynamically change from below Theme Primary color picker

Header & Bredcrumb Colors:

Note:If you want to change color Header dynamically change from below Theme Primary color picker

Header Colors:

Note:If you want to change color Header dynamically change from below Theme Primary color picker

Theme Primary:

Theme Background:

Menu With Background Image:

Buy Now Our Portfolio Reset

Recent Searches

People Pages Articles

Apps and pages

Calendar
Mail
Buttons

Links

http://spruko/spruko.com
http://spruko/spruko.com

5

Harry Jones

MAIN
Dashboards12
- Dashboards
- Sales
- Crypto
- Jobs
- CRM
- Ecommerce
- Analytics
- Projects
- NFT
- HRM
- Personal
- Stocks
- Course
GENERAL
Advanced Ui
PAGES
Pages
- Pages
- Blog
- Chat
- Contacts
- Ecommerce
  - Add Products
  - Cart
  - Checkout
  - Edit Products
  - Orders
  - Order Details
  - Products
  - Product Details
  - Products List
  - Wishlist
- Email
- Empty
- FAQ's
- File Manager
  - File Manager
  - File Details
- Invoice
- Timeline
  - Timeline-1
  - Timeline-2
- Landing
- Notifications
- Pricing
- Profile
- Reviews
- Team
- Terms & Conditions
- To Do List
Utilities
- Utilities
- Avatars
- Borders
- Breakpoints
- Colors
- Columns
- Flex
- Gutters
- Helpers
- Position
- Additional Content
Authentication
- Authentication
- Coming Soon
- Create Password
  - Basic
  - Cover
  - Cover2
- Lock Screen
  - Basic
  - Cover
  - Cover2
- Reset Password
  - Basic
  - Cover
  - Cover2
- Sign Up
  - Basic
  - Cover
  - Cover2
- Sign In
  - Basic
  - Cover
  - Cover2
- Two Step Verification
  - Basic
  - Cover
  - Cover2
- Under Maintainance
- no-internet
Error
- Error
- 401-Error
- 404-Error
- 500-Error
Apps
Icons
WidgetsHot
web apps
Ui Elements
- Ui Elements
- Alerts
- Badge
- Breadcrumb
- Buttons
- Button Group
- Cards
- Dropdowns
- Images & Figures
- List Group
- Navs & Tabs
- Object Fit
- Pagination
- Popovers
- Progress
- Spinners
- Toasts
- Tooltips
- Typography
Nested Menu
MAPS & CHARTS
Maps
Charts
FORMS & TABLES
Forms
Tables3

Borders

Utilities
Borders

Borders


 <span className="border border-primary border-container"></span>
 <span className="border-top border-primary border-container"></span>
 <span className="border-end border-primary border-container"></span>
 <span className="border-bottom border-primary border-container"></span>
 <span className="border-start border-primary border-container"></span>

Remove borders


 <span className="border-0 border-primary border-container"></span>
 <span className="border border-primary border-top-0 border-container"></span>
 <span className="border border-primary border-end-0 border-container"></span>
 <span className="border border-primary border-bottom-0 border-container"></span>
 <span className="border border-primary border-start-0 border-container"></span>

Border Widths


 <span className="border border-primary border-container border-1"></span>
 <span className="border border-primary border-container border-2"></span>
 <span className="border border-primary border-container border-3"></span>
 <span className="border border-primary border-container border-4"></span>
 <span className="border border-primary border-container border-5"></span>

Border colors


<span className="border border-container border-primary"></span>
<span className="border border-container border-secondary"></span>
<span className="border border-container border-success"></span>
<span className="border border-container border-danger"></span>
<span className="border border-container border-warning"></span>
<span className="border border-container border-info"></span>
<span className="border border-container border-light"></span>
<span className="border border-container border-dark"></span>
<span className="border border-container border-white"></span>

Border color Styling

Email address

Below Shows Danger Border

Customizing borders with background colors


 <div className="mb-4">
 <label htmlFor="exampleFormControlInput1" className="form-label">Email
     address</label>
 <input type="email" className="form-control border-success"
     id="exampleFormControlInput1" placeholder="name@example.com"/>
</div>
<div className="h4 pb-3 mb-4 text-danger border-bottom border-danger">
 Below Shows Danger Border
</div>
<div
 className="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end mb-1">
 Customizing borders with backgrounud colors
</div>

Border with opacity

This is default success border

This is 75% opacity success border

This is 50% opacity success border

This is 25% opacity success border

This is 10% opacity success border


  <div className="border border-success p-2 mb-2">This is default success border</div>
  <div className="border border-success p-2 mb-2 border-opacity-75">This is 75%
      opacity
      success border
  </div>
  <div className="border border-success p-2 mb-2 border-opacity-50">This is 50%
      opacity
      success border
  </div>
  <div className="border border-success p-2 mb-2 border-opacity-25">This is 25%
      opacity
      success border
  </div>
  <div className="border border-success p-2 border-opacity-10">This is 10% opacity
      success
      border
  </div>

Border Radius


<span className="border border-primary border-container rounded"></span>
<span className="border border-primary border-container rounded-top"></span>
<span className="border border-primary border-container rounded-end"></span>
<span className="border border-primary border-container rounded-bottom"></span>
<span className="border border-primary border-container rounded-start"></span>
<span className="border border-primary border-container rounded-circle"></span>
<span className="border border-primary border-container rounded-pill"></span>

Sizes


<span className="border border-primary border-container rounded-0"></span>
<span className="border border-primary border-container rounded-1"></span>
<span className="border border-primary border-container rounded-2"></span>
<span className="border border-primary border-container rounded-3"></span>
<span className="border border-primary border-container rounded-4"></span>
<span className="border border-primary border-container rounded-5"></span>
</Card.Body>

Copyright © 2024 Velvet. Designed with by Spruko All rights reserved