Bootstrap Snippets for VS Code

⚠️ Disclaimer ⚠️

This is an unofficial extension and is not affiliated with, endorsed by, or connected to the official Bootstrap team or organization.

A Visual Studio Code extension that provides Bootstrap 5 class snippets for faster development. This extension helps you write Bootstrap classes quickly and efficiently with intuitive snippets.

Features

Quick access to Bootstrap 5 utility classes
Responsive column classes for all breakpoints
Text and display utilities
Flexbox utilities
Spacing utilities
Border and shadow utilities
And many more!

Requirements

Visual Studio Code 1.60.0 or higher
Bootstrap in your project

Bootstrap Resources

Installation

Open VS Code
Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
Search for "Bootstrap Snippets"
Click Install

Available Snippets

HTML Structure Snippets

Prefix	Description	Output	Tab Stops
`html5`	Basic HTML5 structure with Bootstrap 5	`<!DOCTYPE html>...`	`$1`: Document title, `$0`: Body content
`container`	Bootstrap container	`<div class="container">...</div>`	`$0`: Container content
`containerf`	Bootstrap fluid container	`<div class="container-fluid">...</div>`	`$0`: Container content
`row`	Bootstrap row	`<div class="row">...</div>`	`$0`: Row content

Component Snippets

Prefix	Description	Output	Tab Stops
`card`	Bootstrap card	`<div class="card">...</div>`	`$0`: Card content
`btn`	Bootstrap button	`<button class="btn btn-primary">...</button>`	`$1`: Button type, `$2`: Button style, `$3`: Button text, `$0`: Final position
`navbar`	Bootstrap navbar	`<nav class="navbar">...</nav>`	`$1`: Brand text, `$2`: First nav item, `$3`: Second nav item, `$0`: Final position
`form`	Bootstrap form	`<form>...</form>`	`$1`: Form action, `$2`: Form method, `$3`: Input ID, `$4`: Label text, `$5`: Input type, `$6`: Input name, `$7`: Required, `$8`: Submit text, `$0`: Final position
`alert`	Bootstrap alert	`<div class="alert">...</div>`	`$1`: Alert style, `$2`: Alert message, `$0`: Final position
`modal`	Bootstrap modal	`<div class="modal">...</div>`	`$1`: Modal ID, `$2`: Modal size, `$3`: Modal title, `$4`: Modal content, `$5`: Close text, `$6`: Save text, `$0`: Final position
`carousel`	Bootstrap carousel	`<div class="carousel">...</div>`	`$1`: Carousel ID, `$2`: Auto-ride, `$3-5`: Indicators, `$6-7`: First slide, `$8-10`: First caption, `$11-15`: Second slide, `$0`: Final position
`accordion`	Bootstrap accordion	`<div class="accordion">...</div>`	`$1`: Accordion ID, `$2`: First collapse ID, `$3`: First title, `$4`: First content, `$5-8`: Second item, `$0`: Final position

Column Classes

Default Columns (xs)

Prefix	Description	Output	Tab Stops
`c1` to `c12`	Column width 1-12	`col-{1-12}`	None
`ca` or `cauto`	Auto column	`col-auto`	None

Small Columns (sm)

Prefix	Description	Output	Tab Stops
`cs1` to `cs12`	Small column width 1-12	`col-sm-{1-12}`	None
`csa` or `csauto`	Small auto column	`col-sm-auto`	None

Medium Columns (md)

Prefix	Description	Output	Tab Stops
`cm1` to `cm12`	Medium column width 1-12	`col-md-{1-12}`	None
`cma` or `cmauto`	Medium auto column	`col-md-auto`	None

Large Columns (lg)

Prefix	Description	Output	Tab Stops
`cl1` to `cl12`	Large column width 1-12	`col-lg-{1-12}`	None
`cla` or `clauto`	Large auto column	`col-lg-auto`	None

Extra Large Columns (xl)

Prefix	Description	Output	Tab Stops
`cxl1` to `cxl12`	Extra large column width 1-12	`col-xl-{1-12}`	None
`cxla` or `cxlauto`	Extra large auto column	`col-xl-auto`	None

Extra Extra Large Columns (xxl)

Prefix	Description	Output	Tab Stops
`cxxl1` to `cxxl12`	Extra extra large column width 1-12	`col-xxl-{1-12}`	None
`cxxla` or `cxxlauto`	Extra extra large auto column	`col-xxl-auto`	None

Text Utilities

Prefix	Description	Output	Tab Stops
`tl`	Text left	`text-left`	None
`tr`	Text right	`text-right`	None
`tc`	Text center	`text-center`	None
`tj`	Text justify	`text-justify`	None
`ts`	Text start	`text-start`	None
`te`	Text end	`text-end`	None
`ttl`	Text lowercase	`text-lowercase`	None
`ttu`	Text uppercase	`text-uppercase`	None
`ttc`	Text capitalize	`text-capitalize`	None
`fwb`	Font weight bold	`fw-bold`	None
`fwn`	Font weight normal	`fw-normal`	None
`fwl`	Font weight light	`fw-light`	None
`textcenter`	Text center (alt)	`text-center`	None
`textright`	Text right (alt)	`text-end`	None
`textleft`	Text left (alt)	`text-start`	None

Display Utilities

Prefix	Description	Output	Tab Stops
`dn`	Display none	`d-none`	None
`di`	Display inline	`d-inline`	None
`dblock`	Display block	`d-block`	None
`dinlineblock`	Display inline-block	`d-inline-block`	None
`dgrid`	Display grid	`d-grid`	None
`dinlinegrid`	Display inline-grid	`d-inline-grid`	None
`dflex`	Display flex	`d-flex`	None
`dinlineflex`	Display inline-flex	`d-inline-flex`	None
`fl`	Float left	`float-left`	None
`fr`	Float right	`float-right`	None
`fn`	Float none	`float-none`	None

Flexbox Utilities

Prefix	Description	Output	Tab Stops
`flexr`	Flex row	`flex-row`	None
`flexc`	Flex column	`flex-column`	None
`justifyc`	Justify center	`justify-content-center`	None
`justifyb`	Justify between	`justify-content-between`	None
`alignc`	Align center	`align-items-center`	None

Spacing Utilities

Prefix	Description	Output	Tab Stops
`m3`	Margin 1rem	`m-3`	None
`mauto`	Margin auto	`m-auto`	None
`p3`	Padding 1rem	`p-3`	None

Other Utilities

Prefix	Description	Output	Tab Stops
`border`	Border	`border`	None
`rounded`	Rounded corners	`rounded`	None
`shadow`	Shadow	`shadow`	None
`prel`	Position relative	`position-relative`	None
`pabs`	Position absolute	`position-absolute`	None
`w100`	Width 100%	`w-100`	None
`h100`	Height 100%	`h-100`	None

Example Usage

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card shadow rounded">
        <div class="card-body text-center">
          <h5 class="card-title fw-bold">Card Title</h5>
          <p class="card-text">Card content</p>
        </div>
      </div>
    </div>
  </div>
</div>

Development

Prerequisites

Node.js (LTS version recommended)
Visual Studio Code

Setup

Download the source code
Run npm install to install dependencies
Press F5 to start debugging

For more detailed development instructions, see the included documentation.

Known Issues

None at the moment.

Release Notes

1.0.0

Initial release with Bootstrap 5 utility class snippets
Support for responsive column classes
Basic utility classes for text, display, flexbox, and spacing

License

This extension is licensed under the MIT License.

Acknowledgments

Bootstrap for the amazing framework
VS Code Extension API for the development platform

Bootstrap HTML Snippets SP

SMIT_PATEL_SP