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

tessl/npm-bootstrap

The most popular front-end framework for developing responsive, mobile first projects on the web.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/bootstrap@5.3.x

To install, run

npx @tessl/cli install tessl/npm-bootstrap@5.3.0

index.mddocs/

Bootstrap

Bootstrap is the most popular front-end framework for developing responsive, mobile-first projects on the web. It provides a comprehensive toolkit including a flexible grid system, extensive pre-styled components, utility classes, and interactive JavaScript plugins. Bootstrap enables rapid development of professional, consistent user interfaces while maintaining design flexibility through customizable variables and modular architecture.

Package Information

  • Package Name: bootstrap
  • Package Type: npm
  • Language: JavaScript/TypeScript (with extensive SCSS/CSS)
  • Installation: npm install bootstrap

Core Imports

For JavaScript components:

import { Modal, Tooltip, Dropdown } from "bootstrap";

For individual components:

import Modal from "bootstrap/js/dist/modal.js";
import Tooltip from "bootstrap/js/dist/tooltip.js";

CommonJS:

const { Modal, Tooltip, Dropdown } = require("bootstrap");

For CSS (in your build process):

@import "bootstrap/scss/bootstrap";

Or individual components:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/grid";

Basic Usage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- Bootstrap grid and components -->
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
          Launch Modal
        </button>
      </div>
    </div>
  </div>

  <!-- Modal component -->
  <div class="modal fade" id="myModal" 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>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
// Programmatic usage
import { Modal } from "bootstrap";

// Initialize modal
const modalElement = document.getElementById('myModal');
const modal = new Modal(modalElement);

// Show modal
modal.show();

Architecture

Bootstrap is built around several key architectural components:

  • CSS Framework: SCSS-based styling system with variables, mixins, functions, and utility classes
  • Grid System: Flexbox-based 12-column responsive grid with breakpoint customization
  • Component System: Pre-styled UI components (buttons, forms, navigation, modals, etc.)
  • JavaScript Plugins: Interactive behavior for components using vanilla JavaScript
  • Utility Classes: Extensive utility classes for spacing, colors, display, flexbox, and positioning
  • Customization System: Sass variables and maps for theme customization
  • Dark Mode Support: Built-in dark mode with CSS custom properties

Capabilities

Grid System and Layout

Responsive flexbox-based grid system with containers, rows, columns, and extensive breakpoint support for building complex layouts.

// Container classes
.container         // Fixed-width responsive container
.container-fluid   // Full-width container
.container-{breakpoint}  // Breakpoint-specific containers

// Grid classes
.row              // Grid row wrapper
.col              // Flexible column
.col-{number}     // Fixed column sizes (1-12)
.col-{breakpoint}-{number}  // Responsive sized columns

Grid System

Interactive JavaScript Components

Comprehensive set of interactive UI components with consistent API, event system, and configuration options.

// Base component interface
interface BaseComponent {
  constructor(element: Element, config?: object);
  dispose(): void;
  static getInstance(element: Element): BaseComponent | null;
  static getOrCreateInstance(element: Element, config?: object): BaseComponent;
  static readonly VERSION: string;
}

// Available components
class Alert extends BaseComponent { close(): void; }
class Modal extends BaseComponent { show(): void; hide(): void; toggle(): void; }
class Tooltip extends BaseComponent { show(): void; hide(): void; enable(): void; disable(): void; }
class Dropdown extends BaseComponent { show(): void; hide(): void; toggle(): void; update(): void; }

JavaScript Components

UI Components and Styling

Extensive library of pre-styled components including buttons, forms, navigation, cards, alerts, and more with consistent design patterns.

// Button components
.btn                    // Base button class
.btn-primary           // Primary themed button
.btn-outline-primary   // Outlined button variant
.btn-lg                // Large button size
.btn-sm                // Small button size

// Form components  
.form-control          // Text inputs, selects, textareas
.form-select          // Select dropdowns
.form-check           // Checkboxes and radios
.form-switch          // Toggle switches

UI Components

Utility Classes

Powerful utility-first classes for rapid styling including spacing, colors, display, flexbox, positioning, and typography.

// Spacing utilities
.m-{size}     // Margin (0-5, auto)
.p-{size}     // Padding (0-5)
.mx-{size}    // Horizontal margin
.my-{size}    // Vertical margin

// Color utilities
.text-{color}    // Text colors
.bg-{color}      // Background colors
.border-{color}  // Border colors

// Display utilities
.d-{value}                    // Display property
.d-{breakpoint}-{value}       // Responsive display

Utilities

Sass/SCSS Customization

Complete Sass-based customization system with variables, maps, mixins, and functions for theming and extending Bootstrap.

// Core configuration
$primary: #0d6efd !default;
$secondary: #6c757d !default;
$success: #198754 !default;

// Grid breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
) !default;

// Utility generation
$utilities: (
  "margin": (
    property: margin,
    class: m,
    values: $spacers
  )
) !default;

Sass Customization

Types

// Configuration interfaces
interface ComponentConfig {
  [key: string]: any;
}

interface EventHandlerOptions {
  once?: boolean;
  passive?: boolean;
  capture?: boolean;
}

// Event types
interface BootstrapEvent extends Event {
  readonly relatedTarget?: Element;
}

// Popper.js integration
interface PopperConfig {
  boundary?: string | Element;
  display?: string;
  offset?: [number, number];
  popperConfig?: object;
}