Bootstrap Components

UltraViolet is built on Bootstrap 5.3.8, providing a comprehensive set of UI components, utilities, and responsive design features. This documentation covers the Bootstrap components and customizations used throughout the admin dashboard.

Bootstrap 5.3.8 Features

What's New in Bootstrap 5.3

• Enhanced Color System: New color modes and CSS custom properties
• Improved Dark Mode: Better dark mode support with automatic switching
• Updated Components: Refreshed components with modern design
• Better Accessibility: Enhanced ARIA support and keyboard navigation
• Performance Improvements: Smaller bundle size and faster rendering

Core Features

• Responsive Grid System: 12-column flexible grid
• Component Library: 40+ pre-built components
• Utility Classes: Hundreds of utility classes for rapid development
• Customizable: Extensive theming and customization options

Grid System

Basic Grid

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    Content in 6 columns
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    Content in 6 columns
                </div>
            </div>
        </div>
    </div>
</div>

Responsive Breakpoints

• xs: < 576px (Extra small devices)
• sm: ≥ 576px (Small devices)
• md: ≥ 768px (Medium devices)
• lg: ≥ 992px (Large devices)
• xl: ≥ 1200px (Extra large devices)
• xxl: ≥ 1400px (Extra extra large devices)

Grid Options

<!-- Equal width columns -->
<div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
</div>

<!-- Specific column widths -->
<div class="row">
    <div class="col-8">8 columns</div>
    <div class="col-4">4 columns</div>
</div>

<!-- Responsive columns -->
<div class="row">
    <div class="col-12 col-md-6 col-lg-4">Responsive column</div>
</div>

Components

Cards

Cards are versatile containers for content:

<div class="card">
    <div class="card-header">
        <h5 class="card-title mb-0">Card Title</h5>
    </div>
    <div class="card-body">
        <p class="card-text">Card content goes here.</p>
        <a href="#" class="btn btn-primary">Action</a>
    </div>
    <div class="card-footer text-muted">
        Footer content
    </div>
</div>

Buttons

Multiple button styles and sizes:

<!-- Button variants -->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<!-- Button sizes -->
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-lg">Large</button>

<!-- Button groups -->
<div class="btn-group" role="group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

Forms

Comprehensive form components:

<form>
    <div class="mb-3">
        <label for="email" class="form-label">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="name@example.com">
    </div>

    <div class="mb-3">
        <label for="password" class="form-label">Password</label>
        <input type="password" class="form-control" id="password">
    </div>

    <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="remember">
        <label class="form-check-label" for="remember">
            Remember me
        </label>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Tables

Responsive tables with various styles:

<div class="table-responsive">
    <table class="table table-striped table-hover">
        <thead class="table-dark">
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Email</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>John Doe</td>
                <td>john@example.com</td>
                <td>
                    <button class="btn btn-sm btn-primary">Edit</button>
                    <button class="btn btn-sm btn-danger">Delete</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Alerts

Contextual feedback messages:

<div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
</div>

<div class="alert alert-success" role="alert">
    <h4 class="alert-heading">Well done!</h4>
    <p>Aww yeah, you successfully read this important alert message.</p>
    <hr>
    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Modals

Modal dialogs for user interactions:

<!-- Modal trigger -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Navigation

Navigation components for menus and breadcrumbs:

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- Breadcrumb -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>

Utilities

Spacing

Margin and padding utilities:

<!-- Margin -->
<div class="m-0">No margin</div>
<div class="m-1">Small margin</div>
<div class="m-2">Medium margin</div>
<div class="m-3">Large margin</div>
<div class="m-4">Extra large margin</div>
<div class="m-5">Extra extra large margin</div>

<!-- Padding -->
<div class="p-0">No padding</div>
<div class="p-1">Small padding</div>
<div class="p-2">Medium padding</div>
<div class="p-3">Large padding</div>
<div class="p-4">Extra large padding</div>
<div class="p-5">Extra extra large padding</div>

<!-- Directional spacing -->
<div class="mt-3">Margin top</div>
<div class="mb-3">Margin bottom</div>
<div class="ms-3">Margin start</div>
<div class="me-3">Margin end</div>
<div class="pt-3">Padding top</div>
<div class="pb-3">Padding bottom</div>
<div class="ps-3">Padding start</div>
<div class="pe-3">Padding end</div>

Colors

Text and background color utilities:

<!-- Text colors -->
<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>
<p class="text-info">Info text</p>
<p class="text-light">Light text</p>
<p class="text-dark">Dark text</p>

<!-- Background colors -->
<div class="bg-primary text-bg-primary">Primary background</div>
<div class="bg-secondary text-white">Secondary background</div>
<div class="bg-success text-bg-success">Success background</div>
<div class="bg-danger text-white">Danger background</div>
<div class="bg-warning text-dark">Warning background</div>
<div class="bg-info text-white">Info background</div>
<div class="bg-light text-dark">Light background</div>
<div class="bg-dark text-white">Dark background</div>

Display

Display utilities for showing/hiding elements:

<!-- Display -->
<div class="d-none">Hidden</div>
<div class="d-block">Block</div>
<div class="d-inline">Inline</div>
<div class="d-inline-block">Inline block</div>
<div class="d-flex">Flex</div>
<div class="d-inline-flex">Inline flex</div>

<!-- Responsive display -->
<div class="d-none d-md-block">Hidden on small, visible on medium+</div>
<div class="d-block d-md-none">Visible on small, hidden on medium+</div>

Customization

CSS Custom Properties

Bootstrap 5.3 uses CSS custom properties for easy theming:

:root {
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-danger: #dc3545;
    --bs-warning: #ffc107;
    --bs-info: #0dcaf0;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
}

SCSS Variables

Customize Bootstrap using SCSS variables:

// Custom primary color
$primary: #007bff;

// Custom font family
$font-family-sans-serif: 'Inter', sans-serif;

// Custom border radius
$border-radius: 0.5rem;
$border-radius-sm: 0.25rem;
$border-radius-lg: 1rem;

// Custom shadows
$box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
$box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
$box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

Integration with UltraViolet

Admin Dashboard

UltraViolet uses Bootstrap components throughout the admin interface:

• Navigation: Responsive sidebar and top navigation
• Cards: Dashboard widgets and content containers
• Tables: Data tables with sorting and filtering
• Forms: User input forms with validation
• Modals: Dialog boxes for user interactions
• Alerts: Success, error, and warning messages

Custom Components

UltraViolet extends Bootstrap with custom components:

• Sidebar: Custom sidebar with collapsible sections
• Topbar: Custom top navigation bar
• Widgets: Custom dashboard widgets
• Charts: Chart containers with Bootstrap styling

Responsive Design

All components are fully responsive:

• Mobile-first: Designed for mobile devices first
• Breakpoint-aware: Components adapt to different screen sizes
• Touch-friendly: Optimized for touch interactions

Best Practices

Performance

• Use utility classes instead of custom CSS when possible
• Minimize custom CSS overrides
• Use Bootstrap's built-in responsive features

Accessibility

• Use semantic HTML elements
• Include proper ARIA labels
• Ensure keyboard navigation works
• Test with screen readers

Maintenance

• Keep Bootstrap updated
• Use consistent naming conventions
• Document custom components
• Test across different browsers

Resources

• Bootstrap 5.3 Documentation
• Bootstrap Icons
• Bootstrap Examples
• Bootstrap GitHub