tessl/npm-bootstrap

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Bootstrap

Name: tessl/npm-bootstrap
Author: tessl

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;
}