or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

grid-system.mdindex.mdjavascript-components.mdsass-customization.mdui-components.mdutilities.md
tile.json

ui-components.mddocs/

UI Components

Bootstrap provides an extensive library of pre-styled UI components that work consistently across browsers and devices. These components include buttons, forms, navigation, cards, alerts, and many others with consistent design patterns and modifier classes.

Capabilities

Button Components

Styled button elements with various themes, sizes, and states.

/**
 * Base button class - required for all Bootstrap buttons
 */
.btn

/**
 * Button theme variants
 */
.btn-primary      /* Primary theme color */
.btn-secondary    /* Secondary theme color */
.btn-success      /* Success theme color */
.btn-danger       /* Danger theme color */
.btn-warning      /* Warning theme color */
.btn-info         /* Info theme color */
.btn-light        /* Light theme color */
.btn-dark         /* Dark theme color */
.btn-link         /* Link-styled button */

/**
 * Outline button variants
 */
.btn-outline-primary    /* Primary outline button */
.btn-outline-secondary  /* Secondary outline button */
.btn-outline-success    /* Success outline button */
.btn-outline-danger     /* Danger outline button */
.btn-outline-warning    /* Warning outline button */
.btn-outline-info       /* Info outline button */
.btn-outline-light      /* Light outline button */
.btn-outline-dark       /* Dark outline button */

/**
 * Button sizes
 */
.btn-lg          /* Large button */
.btn-sm          /* Small button */

/**
 * Button states
 */
.btn:active      /* Active state */
.btn:disabled    /* Disabled state */
.btn.disabled    /* Disabled class variant */

/**
 * Button groups
 */
.btn-group       /* Horizontal button group container */
.btn-group-vertical /* Vertical button group container */
.btn-group-lg    /* Large button group */
.btn-group-sm    /* Small button group */
.btn-toolbar     /* Button toolbar container for multiple groups */

/**
 * Button group toggle behavior
 */
.btn-group-toggle /* Toggle button group (deprecated - use data attributes) */

Usage Examples:

<!-- Basic buttons -->
<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>

<!-- Outline buttons -->
<button type="button" class="btn btn-outline-primary">Primary Outline</button>
<button type="button" class="btn btn-outline-danger">Danger Outline</button>

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

<!-- Disabled button -->
<button type="button" class="btn btn-primary" disabled>Disabled</button>

<!-- Button groups -->
<div class="btn-group" role="group" aria-label="Basic example">
  <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>

<!-- Vertical button group -->
<div class="btn-group-vertical" role="group" aria-label="Vertical example">
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
</div>

<!-- Button toolbar with multiple groups -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-info">8</button>
  </div>
</div>

<!-- Mixed button group with dropdown -->
<div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
    </ul>
  </div>
</div>

Form Components

Comprehensive form controls with consistent styling and validation states.

/**
 * Text input controls
 */
.form-control       /* Text inputs, textareas, selects */
.form-control-lg    /* Large form control */
.form-control-sm    /* Small form control */

/**
 * Select dropdowns
 */
.form-select        /* Styled select element */
.form-select-lg     /* Large select */
.form-select-sm     /* Small select */

/**
 * Checkboxes and radios
 */
.form-check         /* Checkbox/radio wrapper */
.form-check-input   /* Checkbox/radio input */
.form-check-label   /* Checkbox/radio label */
.form-switch        /* Toggle switch variant */

/**
 * Range sliders
 */
.form-range         /* Range input styling */

/**
 * Form labels and help text
 */
.form-label         /* Form field labels */
.form-text          /* Help text below inputs */

/**
 * Input groups
 */
.input-group           /* Input group wrapper */
.input-group-text      /* Text addon for input groups */
.input-group-lg        /* Large input group */
.input-group-sm        /* Small input group */

/**
 * Floating labels
 */
.form-floating         /* Floating label wrapper */

/**
 * File inputs
 */
.form-control-file     /* File input styling (deprecated - use .form-control) */

/**
 * Color inputs
 */
.form-control-color    /* Color picker input */

/**
 * Form sizing and layout
 */
.col-form-label        /* Column form labels for horizontal forms */
.col-form-label-lg     /* Large column form label */
.col-form-label-sm     /* Small column form label */
.form-control-plaintext /* Read-only form control styled as plain text */

/**
 * Checkbox and radio positioning
 */
.form-check-inline     /* Inline checkbox/radio groups */
.form-check-reverse    /* Reverse checkbox/radio layout */

/**
 * Validation states
 */
.is-valid              /* Valid input state */
.is-invalid            /* Invalid input state */
.valid-feedback        /* Valid feedback text */
.invalid-feedback      /* Invalid feedback text */
.valid-tooltip         /* Valid feedback tooltip */
.invalid-tooltip       /* Invalid feedback tooltip */
.was-validated         /* Applied to form for validation styling */

/**
 * Custom form controls
 */
.form-switch           /* Toggle switch checkbox */
.form-range            /* Range slider input */

Usage Examples:

<!-- Basic form -->
<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email">
    <div class="form-text">We'll never share your email.</div>
  </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="check">
    <label class="form-check-label" for="check">Remember me</label>
  </div>
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<!-- Input groups with various addons -->
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control">
  <span class="input-group-text">.00</span>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">Button</button>
  <input type="text" class="form-control">
</div>

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

<div class="form-floating mb-3">
  <select class="form-select" id="floatingSelect">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

<!-- Advanced form controls -->
<div class="form-check form-switch mb-3">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch</label>
</div>

<div class="mb-3">
  <label for="customRange" class="form-label">Custom range</label>
  <input type="range" class="form-range" id="customRange">
</div>

<div class="mb-3">
  <label for="colorInput" class="form-label">Color picker</label>
  <input type="color" class="form-control form-control-color" id="colorInput" value="#563d7c">
</div>

<!-- Inline checkboxes -->
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>

<!-- Validation with server-side classes -->
<form class="was-validated">
  <div class="mb-3">
    <label for="validationExample" class="form-label">Valid input</label>
    <input type="text" class="form-control" id="validationExample" value="Valid input" required>
    <div class="valid-feedback">Looks good!</div>
  </div>
  
  <div class="mb-3">
    <label for="validationExampleInvalid" class="form-label">Invalid input</label>
    <input type="text" class="form-control" id="validationExampleInvalid" value="" required>
    <div class="invalid-feedback">Please provide a valid input.</div>
  </div>
</form>

<!-- Horizontal form layout -->
<form class="row g-3">
  <div class="col-auto">
    <label for="staticEmail2" class="visually-hidden">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="col-auto">
    <label for="inputPassword2" class="visually-hidden">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
  </div>
</form>

Navigation Components

Navigation components for building menus, tabs, and navigation bars.

/**
 * Base navigation
 */
.nav               /* Base nav class */
.nav-link          /* Navigation links */

/**
 * Navigation variants
 */
.nav-tabs          /* Tabbed navigation */
.nav-pills         /* Pill-style navigation */
.nav-underline     /* Underlined navigation */

/**
 * Navigation bar
 */
.navbar            /* Navigation bar container */
.navbar-brand      /* Brand/logo area */
.navbar-nav        /* Navigation list */
.navbar-toggler    /* Mobile toggle button */
.navbar-collapse   /* Collapsible nav content */

/**
 * Navbar themes
 */
.navbar-light      /* Light navbar theme (deprecated in v5.2+) */
.navbar-dark       /* Dark navbar theme (deprecated in v5.2+) */

/**
 * Navbar positioning
 */
.navbar-expand-{breakpoint}  /* Responsive navbar expansion */
.fixed-top         /* Fixed to top */
.fixed-bottom      /* Fixed to bottom */
.sticky-top        /* Sticky positioning */

Usage Examples:

<!-- Basic nav -->
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

<!-- Pills navigation -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</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>
      </ul>
    </div>
  </div>
</nav>

Card Components

Flexible content containers with optional headers, footers, and various content types.

/**
 * Card structure
 */
.card              /* Card container */
.card-header       /* Card header */
.card-body         /* Card content area */
.card-footer       /* Card footer */

/**
 * Card content
 */
.card-title        /* Card title */
.card-subtitle     /* Card subtitle */
.card-text         /* Card text content */
.card-link         /* Card links */

/**
 * Card images
 */
.card-img-top      /* Image at top of card */
.card-img-bottom   /* Image at bottom of card */
.card-img          /* Full card image overlay */
.card-img-overlay  /* Content overlay on card image */

/**
 * Card groups and layouts
 */
.card-group        /* Equal height card group */
.card-deck         /* Deprecated in v5 */
.card-columns      /* Deprecated in v5 */

Usage Examples:

<!-- Basic card -->
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Card with header and footer -->
<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Card content goes here.</p>
  </div>
  <div class="card-footer text-muted">Footer</div>
</div>

<!-- Card group -->
<div class="card-group">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
    </div>
  </div>
</div>

Alert Components

Contextual feedback messages with dismissible functionality.

/**
 * Alert base and variants
 */
.alert             /* Base alert class */
.alert-primary     /* Primary alert */
.alert-secondary   /* Secondary alert */
.alert-success     /* Success alert */
.alert-danger      /* Danger alert */
.alert-warning     /* Warning alert */
.alert-info        /* Info alert */
.alert-light       /* Light alert */
.alert-dark        /* Dark alert */

/**
 * Alert features
 */
.alert-dismissible /* Dismissible alert */
.alert-heading     /* Alert headings */
.alert-link        /* Alert links with proper color */

Usage Examples:

<!-- Basic alerts -->
<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>Success message with additional content.</p>
</div>

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

Accordion Components

Vertically collapsing content sections with headers that expand/collapse the content.

/**
 * Accordion structure
 */
.accordion              /* Accordion wrapper container */
.accordion-item         /* Individual accordion item */
.accordion-header       /* Accordion item header */
.accordion-button       /* Accordion toggle button */
.accordion-collapse     /* Collapsible content wrapper */
.accordion-body         /* Accordion content area */

/**
 * Accordion variants
 */
.accordion-flush        /* Remove borders and border-radius */

/**
 * Accordion button states
 */
.accordion-button:not(.collapsed)  /* Expanded state */
.accordion-button.collapsed        /* Collapsed state */

Usage Examples:

<!-- Basic accordion -->
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        This is the first item's accordion body.
      </div>
    </div>
  </div>
  
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        This is the second item's accordion body.
      </div>
    </div>
  </div>
</div>

<!-- Flush accordion (no borders) -->
<div class="accordion accordion-flush" id="accordionFlush">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne">
        Flush Accordion Item #1
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlush">
      <div class="accordion-body">Placeholder content for this accordion.</div>
    </div>
  </div>
</div>

Modal Components

Dialog overlays for focused tasks or important information.

/**
 * Modal structure
 */
.modal             /* Modal backdrop */
.modal-dialog      /* Modal container */
.modal-content     /* Modal content wrapper */
.modal-header      /* Modal header */
.modal-body        /* Modal content area */
.modal-footer      /* Modal footer */

/**
 * Modal sizes
 */
.modal-sm          /* Small modal */
.modal-lg          /* Large modal */
.modal-xl          /* Extra large modal */

/**
 * Modal positioning
 */
.modal-dialog-centered    /* Center modal vertically */
.modal-dialog-scrollable  /* Scrollable modal body */

/**
 * Modal variants
 */
.modal-fullscreen         /* Full screen modal */
.modal-fullscreen-sm-down /* Full screen below sm */
.modal-fullscreen-md-down /* Full screen below md */
.modal-fullscreen-lg-down /* Full screen below lg */
.modal-fullscreen-xl-down /* Full screen below xl */
.modal-fullscreen-xxl-down /* Full screen below xxl */

Other Components

/**
 * Badges
 */
.badge             /* Base badge */
.badge.bg-primary  /* Primary badge */
.badge.rounded-pill /* Pill-shaped badge */

/**
 * Breadcrumbs
 */
.breadcrumb        /* Breadcrumb navigation */
.breadcrumb-item   /* Breadcrumb items */

/**
 * List Groups
 */
.list-group        /* List group container */
.list-group-item   /* List group items */
.list-group-item-action /* Interactive list items */

/**
 * Progress Bars
 */
.progress          /* Progress container */
.progress-bar      /* Progress bar fill */

/**
 * Spinners
 */
.spinner-border    /* Border spinner */
.spinner-grow      /* Growing dot spinner */

/**
 * Toasts
 */
.toast             /* Toast notification */
.toast-header      /* Toast header */
.toast-body        /* Toast content */

/**
 * Tooltips and Popovers
 */
.tooltip           /* Tooltip container (JS-generated) */
.popover           /* Popover container (JS-generated) */

/**
 * Accordion
 */
.accordion         /* Accordion container */
.accordion-item    /* Accordion items */
.accordion-header  /* Accordion headers */
.accordion-body    /* Accordion content */

/**
 * Carousel
 */
.carousel          /* Carousel container */
.carousel-item     /* Carousel slides */
.carousel-control-prev /* Previous control */
.carousel-control-next /* Next control */
.carousel-indicators   /* Slide indicators */

/**
 * Offcanvas
 */
.offcanvas         /* Offcanvas container */
.offcanvas-header  /* Offcanvas header */
.offcanvas-body    /* Offcanvas content */
.offcanvas-start   /* Left-side offcanvas */
.offcanvas-end     /* Right-side offcanvas */
.offcanvas-top     /* Top offcanvas */
.offcanvas-bottom  /* Bottom offcanvas */

/**
 * Pagination
 */
.pagination        /* Pagination container */
.page-item         /* Pagination items */
.page-link         /* Pagination links */

/**
 * Tables
 */
.table             /* Base table class */
.table-striped     /* Striped rows */
.table-hover       /* Hover effect */
.table-bordered    /* Bordered table */
.table-borderless  /* Remove borders */
.table-sm          /* Compact table */
.table-responsive  /* Responsive table wrapper */

Usage Examples:

<!-- Badge -->
<span class="badge bg-primary">New</span>
<span class="badge bg-secondary rounded-pill">99+</span>

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

<!-- List group -->
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item">A third item</li>
</ul>

<!-- Progress bar -->
<div class="progress">
  <div class="progress-bar" style="width: 25%"></div>
</div>

<!-- Spinner -->
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Table -->
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
    </tr>
  </tbody>
</table>

Component Customization

Most components can be customized using CSS custom properties (CSS variables) and Sass variables:

// Example: Customizing button colors
$primary: #007bff;
$secondary: #6c757d;

// Example: Customizing component sizes
$btn-padding-y: 0.375rem;
$btn-padding-x: 0.75rem;
$btn-font-size: 1rem;

Components also support various data attributes for JavaScript functionality:

<!-- Data attributes for JavaScript components -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Launch Modal
</button>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
  </ul>
</div>