Comments ( and /* */)

How to write comments when working with Bootstrap. Bootstrap is a framework, so comment syntax follows the language being used. HTML templates use , CSS customizations use /* */, and Sass-based theme customization supports both // and /* */. Because Bootstrap components can nest deeply, comments for structure and context are important.

Syntax

<!-- HTML comment. Written in Bootstrap markup. -->

<!--
  Multi-line HTML comment.
  Used when commenting out an entire Bootstrap component block.
-->

The following example demonstrates this:

/* CSS comment. Written in a custom CSS file for Bootstrap overrides. */

/*
  Add notes about variable overrides or additional styles.
  Example: explaining why a Bootstrap default was intentionally changed.
*/

The following example demonstrates this:

// Sass comment. Not included in the compiled CSS output.
// Use for internal notes when customizing Bootstrap's _variables.scss.

/* Bootstrap custom theme section divider. Preserved in the compiled CSS. */

Comment Types

Layer	Syntax	Description
HTML (template)	<!-- text -->	Used to mark the boundaries of Bootstrap component blocks or to temporarily hide them by commenting out.
CSS (custom styles)	/* text */	Used to document the reason for overriding Bootstrap defaults, or as section dividers in custom CSS files.
Sass (custom theme)	// text	Used when customizing Bootstrap's Sass source. Not included in the compiled CSS output.
Sass (custom theme)	/* text */	Used for section dividers or notes that should appear in the compiled CSS as well.
Sass (custom theme)	/! text /	Used for license notices that must be preserved even after minification.

Bootstrap Component Comment Conventions

Bootstrap 5 involves composing many components (cards, modals, navigation, etc.). A common convention is to mark the start and end of each component with a comment. Especially for deeply nested structures like grids and modals, comments on the boundaries between components help clarify which element belongs to which component.

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarMain"
      aria-controls="navbarMain"
      aria-expanded="false"
      aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarMain">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div><!-- /navbar-collapse -->
  </div><!-- /container -->
</nav>
<!-- /Navigation -->

When to Write Comments and When Not To

Decision	Situation	Reason
Write a comment	Start and end of a component	Bootstrap markup tends to nest deeply, making it hard to tell which closing tag matches which opening tag. Comments at component boundaries reduce confusion.
Write a comment	The reason for overriding a Bootstrap default	Recording why a Bootstrap default value was changed in a CSS comment makes future maintenance easier.
Write a comment	Relationships between modals/dropdowns and their triggers	Dependencies like `data-bs-target` and the corresponding `id` are hard to trace from HTML alone. A comment helps.
No comment needed	When the class name makes the purpose obvious	There is no need to comment on `class="card"` saying it is a card component. Bootstrap class names are well-documented and their purpose is clear from the name.
No comment needed	Change history or deleted code	Because version control (git) is available, there is no need to keep old code or change dates in comments.

Sample Code

Adding comments to a Bootstrap grid and card components.

page.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Comment Sample</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <!-- Header -->
  <header class="bg-primary text-white py-3">
    <div class="container">
      <h1 class="h4 mb-0">Sample Site</h1>
    </div><!-- /container -->
  </header>
  <!-- /Header -->

  <!-- Main content -->
  <main class="container py-4">

    <!-- Card grid -->
    <div class="row g-3">

      <!-- Card 1 -->
      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h2 class="card-title h5">Item A</h2>
            <p class="card-text">Description text goes here.</p>
          </div><!-- /card-body -->
          <div class="card-footer">
            <a href="#" class="btn btn-primary">Learn more</a>
          </div>
        </div><!-- /card -->
      </div><!-- /col -->
      <!-- /Card 1 -->

      <!-- TODO: add Card 2 and Card 3 -->

    </div><!-- /row (card grid) -->
    <!-- /Card grid -->

  </main>
  <!-- /Main content -->

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Comments when overriding Bootstrap default variables in Sass.

custom.scss

/*!
 * Bootstrap Custom Theme
 * Base: Bootstrap 5.3
 */

// --------------------------------------------------
// Variable overrides (changes to Bootstrap defaults)
// --------------------------------------------------

// Change the primary color to the brand color.
// Bootstrap default: #0d6efd
$primary: #0066cc;

// Increase border radius slightly across all components.
// Changed from Bootstrap's default of 0.375rem.
$border-radius: 0.5rem;

// Import Bootstrap core (must come after variable overrides)
@import "bootstrap/scss/bootstrap";

// --------------------------------------------------
// Custom components
// --------------------------------------------------

/* Hero section (a custom component not included in Bootstrap) */
.hero {
  padding: 80px 0;
  background: linear-gradient(135deg, $primary, #004499);
  color: #fff;
  text-align: center;
}

Overview

Bootstrap itself does not introduce a dedicated comment syntax. Comments follow the rules of the language being used:  in HTML templates, /* */ in CSS customizations, and // along with /* */ in Sass-based theme customization.

Bootstrap components tend to nest deeply, so the convention of marking component start and end with comments is widely used. While Bootstrap class names are consistent and well-documented, commenting on the structure in sections where multiple components are combined makes maintenance easier.

If you find any errors or copyright issues, please contact us.

Home

Bootstrap Dictionary