An HTML linter for Bootstrap projects
Bootlint is a tool that checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Optimal usage of Bootstrap also requires that your pages include certain <meta> tags, an HTML5 doctype declaration, etc.; Bootlint checks that these are present.
Bootlint assumes that your webpage is already valid HTML5. If you need to check HTML5 validity, we recommend tools like vnu.jar or grunt-html.
Bootlint assumes that you are using Bootstrap's default class names in your webpage, as opposed to taking advantage of the "mixins" functionality of Less or Sass to map them to custom class names. If you are using mixins, Bootlint may report some false-positive warnings. However, there are some Bootlint checks that are applicable even if you are using mixins pervasively.
To use Bootlint with Grunt, use the official Grunt plugin: grunt-bootlint.
If you want to use Bootlint with Gulp, there is an unofficial Gulp plugin: gulp-bootlint
Install the module with: npm install -g bootlint
Run it on some HTML files:
bootlint /path/to/some/webpage.html another_webpage.html [...]
This will output the lint warnings applicable to each file.
The CLI also accepts a --disable (or -d) option to disable certain lint checks. --disable takes a comma-separated list of lint problem IDs. Here's an example:
bootlint -d W002,E020 /path/to/some/webpage.html another_webpage.html [...]
The CLI will also process stdin input which means that you can pipe into Bootlint:
cat mypage.html | bootlint
Or you could use a heredoc (mostly useful for quick testing):
bootlint << EOF
<button class="btn btn-default">Is this correct Bootstrap markup, Bootlint?</button>
EOF
Bootlint can run directly in the browser! This is accomplished by using a bookmarklet, which appends bootlint to the body of the active page. There are a few nice benefits of running bootlint directly in the browser. They include:
Please follow the instructions below to get up and running:
javascript:(function(){var s=document.createElement("script");s.onload=function(){bootlint.showLintReportForCurrentDocument([]);};s.src="https://stackpath.bootstrapcdn.com/bootlint/latest/bootlint.min.js";document.body.appendChild(s)})();
Note: The snippet above will ensure you are always running the latest version of bootlint. If you want to reference a specific version of bootlint please see the BootstrapCDN. Copy the URL and update s.src="PASTE-ME-HERE".
You can manually download the browser-ready version of Bootlint.
For detailed explanations of each lint problem, look up the IDs (for example, E001 or W002) in our wiki.
Bootlint is a CommonJS module.
Bootlint represents the lint problems it reports using the LintError and LintWarning classes:
LintWarning
LintWarning(id, message, elements)id - Unique string ID for this type of lint problem. Of the form "W###" (e.g. "W123").message - Human-readable string describing the problemelements - jQuery or Cheerio collection of referenced DOM elements pointing to all problem locations in the document
.startLocation property that is a Location (see below) indicating the location of the element in the document's HTML sourceLintError
LintError(id, message, elements)id - Unique string ID for this type of lint problem. Of the form "E###" (e.g. "E123").message - Human-readable string describing the problemelements - jQuery or Cheerio collection of referenced DOM elements pointing to all problem locations in the document
.startLocation property that is a Location (see below) indicating the location of the element in the document's HTML sourceBootlint defines the following public utility class:
Location (Only available under Node.js)
Location(line, column)line - 0-based line numbercolumn - 0-based column numberA reporter is a function that accepts exactly 1 argument of type LintWarning or LintError. Its return value is ignored. It should somehow record the problem or display it to the user.
Bootlint exports a bootlint property on the global window object.
In a browser environment, the following public APIs are available:
bootlint.lintCurrentDocument(reporter, disabledIds): Lints the HTML of the current document and calls the reporter() function repeatedly with each lint problem as an argument.
reporter is a reporter function (see above for a definition). It will be called repeatedly with each lint problem as an argument.disabledIds is an array of string linter IDs to disableundefined)bootlint.showLintReportForCurrentDocument(disabledIds, alertOpts): Lints the HTML of the current document and reports the linting results to the user. Each warning will be output individually using console.warn().
disabledIds is an array of string linter IDs to disablealertOpts is an optional options object with the following properties:
hasProblems (type: boolean; default: true) - window.alert() a single general notification message to the user if there are any lint problems?problemFree (type: boolean; default: true) - window.alert() a notification message to the user if the document has no lint problems?undefined)Example:
var bootlint = require('bootlint');
function reporter(lint) {
console.log(lint.id, lint.message);
}
bootlint.lintHtml("<!DOCTYPE html><html>...", reporter, []); // calls reporter() repeatedly with each lint problem as an argument
In a Node.js environment, Bootlint exposes the following public API:
bootlint.lintHtml(html, reporter, disabledIds): Lints the given HTML for a webpage and returns the linting results.
html is the HTML to lint, as a stringreporter is a reporter function (see above for a definition). It will be called repeatedly with each lint problem as an argument.disabledIds is an array of string linter IDs to disableundefined)Bootlint can also be run as an HTTP server that exposes a very simple API. Use npm run start to run the server.
By default, it runs on port 7070. Set the $PORT environment variable to change which port it uses.
POST an HTML document to / and the document's lint problems will be returned as JSON.
The endpoint accepts an optional querystring argument named disable, whose value is a comma-separated list of linter IDs to disable.
Example:
Request:
POST / HTTP/1.1
Content-Type: text/html
<!doctype html>
...
Response:
HTTP/1.1 200 OK
Content-Type: application/json
[
{
"id": "W003",
"message": "<head> is missing viewport <meta> tag that enables responsiveness"
},
{
"id": "W005",
"message": "Unable to locate jQuery, which is required for Bootstrap's JavaScript plugins to work"
},
...
]
The project's coding style is laid out in the ESLint configuration. Add unit tests for any new or changed functionality. Lint and test your code using the npm scripts..
Also, please don't edit files in the "dist" subdirectory as they are generated via npm run dist. You'll find the source code in the "src" subdirectory!
See the GitHub Releases page for detailed changelogs.
masteralert()s when no lint problems are found. Adds validity check for carousel control & indicator targets.child_process.exec..panel-footer false positiveCopyright (c) 2014-2019 The Bootlint Authors. Licensed under the MIT License.
FAQs
HTML linter for Bootstrap projects
The npm package bootlint receives a total of 0 weekly downloads. As such, bootlint popularity was classified as not popular.
We found that bootlint demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.