Bootswatch

https://github.com/thomaspark/bootswatch
Admin
Bootswatch is a collection of free drop-in themes for the Bootstrap CSS framework. It is installed...
Tokens:214,747
Snippets:1,748
Trust Score:8.6
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Installing Node.js Dependencies

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html

Executes `npm install` to download and set up all required Node.js packages listed in the project's `package.json`. This is a crucial step after cloning the repository to ensure all build tools and libraries are available.

```Shell
npm install
```

--------------------------------

### Starting Bootswatch Development Server

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html

This Grunt command initiates a local development server. It's typically used in conjunction with `grunt watch` to provide live reloading capabilities during theme development, allowing real-time preview of changes.

```Shell
grunt server
```

--------------------------------

### Installing Bootswatch via npm

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html

This command demonstrates how to install the Bootswatch package using npm, the Node.js package manager. This is the standard way to include Bootswatch as a dependency in a JavaScript project.

```shell
npm install bootswatch
```

--------------------------------

### Basic HTML Template

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/docs/getting-started.html

This snippet provides a standard HTML5 document structure, including a viewport meta tag for responsive design and a script tag to load the jQuery library from a CDN. It serves as a foundational template before integrating Bootstrap.

```HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
  </body>
</html>
```

--------------------------------

### Integrating Font Awesome LESS with Rails (Bash)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/get-started.html

This snippet demonstrates how to integrate Font Awesome LESS into a Rails project using the official Ruby Gem. It includes commands for adding the gem to the Gemfile, running 'bundle' to install dependencies, and directly installing the gem.

```bash
gem 'font-awesome-less'
```

```bash
$ bundle
```

```bash
$ gem install font-awesome-less
```

--------------------------------

### Integrating Font Awesome SASS with Rails (Bash)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/get-started.html

This snippet demonstrates how to integrate Font Awesome SASS into a Rails project using the official Ruby Gem. It includes commands for adding the gem to the Gemfile, running 'bundle' to install dependencies, and directly installing the gem.

```bash
gem 'font-awesome-sass'
```

```bash
$ bundle
```

```bash
$ gem install font-awesome-sass
```

--------------------------------

### Cloning Bootswatch Repository

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html

This command downloads the entire Bootswatch project repository from GitHub. It is the initial step required to set up a local development environment for customizing or creating Bootswatch themes.

```Shell
git clone https://github.com/thomaspark/bootswatch.git
```

--------------------------------

### Bootstrap-Enabled HTML Template

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/docs/getting-started.html

This HTML template demonstrates how to integrate Bootstrap into a basic web page. It includes the Bootstrap CSS stylesheet in the head section and the Bootstrap JavaScript file in the body, after jQuery, to enable Bootstrap's interactive components.

```HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
```

--------------------------------

### Example Bootswatch CSS Import in React App.js

Source: https://github.com/thomaspark/bootswatch/blob/v5/README.md

This JavaScript example illustrates how to integrate the 'slate' Bootswatch theme into a `create-react-app`'s `App.js` file. The `import 'bootswatch/dist/slate/bootstrap.min.css';` line is added to load the theme's CSS, demonstrating a practical application of the import method.

```JavaScript
import React from 'react';
import logo from './logo.svg';
import 'bootswatch/dist/slate/bootstrap.min.css'; // Added this :boom:
import './App.css';

function App() {
...
```

--------------------------------

### Integrating Font Awesome with Local CSS (HTML/CSS)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/get-started/index.html

This HTML snippet shows how to link to locally hosted Bootstrap and Font Awesome CSS files. After copying the `font-awesome` directory to the project, these lines should be placed in the <head> to reference the stylesheets relative to the HTML file.

```HTML
<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
```

--------------------------------

### Initializing Google Analytics Tracking - JavaScript

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/docs/getting-started.html

This JavaScript snippet initializes Google Analytics tracking on a webpage. It sets the account ID and tracks a pageview. It dynamically creates and inserts the Google Analytics script tag into the document, ensuring asynchronous loading.

```JavaScript
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-146052-10']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

--------------------------------

### Initializing Analytics and Typekit (JavaScript)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/get-started/index.html

This snippet initializes Google Analytics tracking and loads Typekit fonts. It sets up the Google Analytics account and tracks page views, while also attempting to load Typekit, gracefully handling any errors.

```JavaScript
try{Typekit.load();}catch(e){}
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

--------------------------------

### Integrating Font Awesome with BootstrapCDN (HTML/CSS)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/get-started/index.html

This HTML snippet demonstrates how to include Bootstrap and Font Awesome CSS files using BootstrapCDN. It provides a quick and easy way to add both frameworks to a website without local downloads, by linking to their respective CDN URLs in the <head> section.

```HTML
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
```

--------------------------------

### Building All Bootswatch Theme CSS

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html

This Grunt command compiles the Sass files for all available Bootswatch themes into their respective CSS files. It provides a convenient way to generate all theme stylesheets at once.

```Shell
grunt swatch
```

--------------------------------

### Installing Bootstrap with Bower

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap/README.md

This command uses the Bower package manager to install the Bootstrap framework, making it available for front-end projects managed by Bower.

```Shell
bower install bootstrap
```

--------------------------------

### Installing Node.js Dependencies

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/4/help/index.html

After cloning the repository, this command installs all necessary Node.js packages and project dependencies defined in `package.json`. These dependencies are essential for building and managing Bootswatch themes locally.

```Shell
npm install
```

--------------------------------

### Serving Jekyll Project Locally (Shell)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/README.md

This command starts a local web server using Jekyll, allowing the project and documentation to be previewed in a browser. It typically serves the content at 'http://localhost:7998/Font-Awesome/'.

```Shell
bundle exec jekyll serve
```

--------------------------------

### Initializing Gauges Analytics Tracker (JavaScript)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/docs/getting-started.html

This JavaScript snippet initializes the Gauges analytics tracking script. It first ensures the global `_gauges` array exists, then creates an asynchronous script element, sets its source to the Gauges tracking library, and embeds a `data-site-id` attribute for identification. Finally, it inserts this script into the DOM, typically before the first existing script tag, to begin tracking page views.

```JavaScript
var _gauges = _gauges || []; (function() { var t = document.createElement('script'); t.type = 'text/javascript'; t.async = true; t.id = 'gauges-tracker'; t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013'); t.src = '//secure.gaug.es/track.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(t, s); })();
```

--------------------------------

### Installing HTML5 Shiv with Bower (Shell)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/html5shiv/readme.md

This command installs the HTML5 Shiv using Bower, saving it as a development dependency. It clones the latest version into `bower_components` and updates `bower.json`.

```Shell
bower install html5shiv --save-dev
```

--------------------------------

### Referencing Font Awesome and Bootstrap CSS for IE7 Support in HTML

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/get-started/index.html

This HTML snippet demonstrates how to link Bootstrap and Font Awesome stylesheets in the <head> of an HTML document. It includes a conditional comment specifically for Internet Explorer 7, ensuring that the font-awesome-ie7.min.css file is only loaded by IE7, providing necessary polyfills or specific styling for older browsers. This setup requires the bootstrap.min.css, font-awesome.min.css, and font-awesome-ie7.min.css files to be present at the specified paths.

```HTML
<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<!--[if IE 7]>
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->
```

--------------------------------

### Installing Jekyll Dependencies with Bundler

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap/README.md

This command uses Bundler to install all necessary Ruby gem dependencies, including Jekyll, required to build and run the Bootstrap documentation locally.

```Ruby
bundle install
```

--------------------------------

### Installing Bootstrap with Bower

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/README.md

This command installs Bootstrap using Bower, a package manager for the web. It fetches the latest stable version of Bootstrap and its dependencies. This method requires Bower to be installed globally on the system.

```Shell
bower install bootstrap
```

--------------------------------

### Installing Ruby Gems for Development (Shell)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/README.md

This command installs all necessary Ruby gems defined in the project's Gemfile, which are required for local development and building the project's documentation and assets.

```Shell
bundle install
```

--------------------------------

### Installing Bootstrap using Make

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/swatchmaker/README.md

This command navigates to the `swatchmaker` directory and executes the `make bootstrap` command to download the latest version of Bootstrap, a prerequisite for customizing Bootswatch.

```Shell
make bootstrap
```

--------------------------------

### Installing Bootstrap Dependencies with npm

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/swatchmaker/README.md

After navigating to the `bootstrap` subdirectory within `swatchmaker`, this command uses npm to locally install Bootstrap's development dependencies such as uglify-js, jshint, recess, connect, and hogan.js.

```Shell
npm install
```

--------------------------------

### Installing Bootstrap with npm

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap/README.md

This command installs Bootstrap version 3 using the Node Package Manager (npm), a common method for integrating front-end dependencies into Node.js projects.

```Shell
npm install bootstrap@3
```

--------------------------------

### Installing jQuery with Bower

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/jquery/README.md

This snippet demonstrates how to install the jQuery library using the Bower package manager. Bower is a client-side package manager for web development.

```Shell
bower install jquery
```

--------------------------------

### Installing Node.js Dependencies for Development (Shell)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/README.md

This command installs all Node.js packages listed in the project's 'package.json' file. These packages are typically used for front-end tooling, build processes, and other development utilities.

```Shell
npm install
```

--------------------------------

### Building Bootstrap CSS and Docs with Make

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/README.md

This `make` command runs the Recess compiler to rebuild the Less files into CSS and compiles the documentation. It requires `recess` and `uglify-js` to be installed as Node.js dependencies, typically handled by `npm install`.

```Shell
make
```

--------------------------------

### Initializing Google Analytics with gtag.js

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html

This JavaScript snippet initializes Google Analytics using the `gtag.js` library. It sets up the `dataLayer` array, defines the `gtag` function to push arguments to the data layer, and configures a specific Google Analytics tracking ID.

```javascript
window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-KGDJBEFF3W');
```

--------------------------------

### Installing jQuery with Component

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/jquery/README.md

This snippet shows the command to install jQuery using the Component package manager. Component is used for managing client-side packages.

```Shell
component install components/jquery
```

--------------------------------

### Installing Directory Watcher Gem

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/swatchmaker/README.md

This command installs the `directory_watcher` Ruby gem, which is a prerequisite for using the `make watcher` command to automatically rebuild Bootswatch CSS on file changes.

```Shell
gem install directory_watcher
```

--------------------------------

### Adding Bootswatch Gem to Ruby Gemfile

Source: https://github.com/thomaspark/bootswatch/blob/v5/README.md

This Ruby snippet demonstrates how to add the Bootswatch gem to a Ruby project's `Gemfile`. Including this line and running `bundle install` makes the Bootswatch themes accessible within the Ruby application.

```Ruby
gem "bootswatch", github: "thomaspark/bootswatch"
```

--------------------------------

### Running Grunt Development Server and Watcher

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/4/help/index.html

Executing `grunt` starts a local development server, watches for changes in SASS files, automatically rebuilds the theme, and reloads the browser. `grunt server` starts only the server, and `grunt watch` starts only the file watcher, providing flexibility during development.

```Shell
grunt
```

--------------------------------

### Building Specific Bootswatch Theme CSS

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html

This Grunt command compiles the Sass files for a specified Bootswatch theme into a CSS file. It's used after modifying theme-specific `_variables.scss` or `_bootswatch.scss` files to generate the updated stylesheet.

```Shell
grunt swatch:[theme]
```

--------------------------------

### Installing jQuery via npm for Node.js

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/jquery/README.md

This command installs the jQuery package into a Node.js project using npm (Node Package Manager). This is the first step to use jQuery in a Node.js environment.

```Shell
npm install jquery
```

--------------------------------

### Running Bootstrap Tests with Make

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/README.md

This `make` command executes JSHint for linting and QUnit tests headlessly using PhantomJS. It is primarily used for continuous integration (CI) and depends on PhantomJS being installed on the system.

```Shell
make test
```

--------------------------------

### Installing Font Awesome via Component (Shell)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/README.md

This command installs Font Awesome using the Component package manager. It fetches the specified repository and integrates it into the project's dependencies.

```Shell
component install FortAwesome/Font-Awesome
```

--------------------------------

### Full Tab Component Example with Activation

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/docs/javascript.html

This combined snippet demonstrates a complete Bootstrap tab component setup, including both the HTML structure for the navigation and content panes, and a JavaScript snippet to activate the last tab on document ready. The `data-target` or `href` attributes link the navigation items to their respective content containers.

```HTML
<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>
```

```JavaScript
$(function () {
    $('#myTab a:last').tab('show');
  })
```

--------------------------------

### Stacking Multiple Font Awesome Icons (HTML/CSS)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/examples/index.html

This example demonstrates how to stack multiple Font Awesome icons on top of each other using the `icon-stack` class on a parent element and `icon-stack-base` for the bottom icon. This technique allows for creating complex icon compositions.

```HTML
<span class="icon-stack">
  <i class="icon-check-empty icon-stack-base"></i>
  <i class="icon-twitter"></i>
</span>
icon-twitter on icon-check-empty<br>
<span class="icon-stack">
  <i class="icon-circle icon-stack-base"></i>
  <i class="icon-flag icon-light"></i>
</span>
icon-flag on icon-circle<br>
<span class="icon-stack">
  <i class="icon-sign-blank icon-stack-base"></i>
  <i class="icon-terminal icon-light"></i>
</span>
icon-terminal on icon-sign-blank<br>
<span class="icon-stack">
  <i class="icon-camera"></i>
  <i class="icon-ban-circle icon-stack-base text-error"></i>
</span>
icon-camera on icon-ban-circle
```

--------------------------------

### Installing Bootswatch via npm in Shell

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/4/help/index.html

This shell command installs the Bootswatch package using npm. It is a prerequisite for integrating Bootswatch themes into projects that use modern JavaScript bundlers like webpack or create-react-app.

```Shell
npm install bootswatch
```

--------------------------------

### Installing Bootstrap-Sass via npm

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap-sass/README.md

This console command demonstrates how to install the `bootstrap-sass` package using npm. This is the standard method for integrating Bootstrap-Sass into Node.js projects.

```console
$ npm install bootstrap-sass
```

--------------------------------

### Installing Node.js Dependencies with npm

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/help/index.html

This command line snippet uses npm (Node Package Manager) to install all project dependencies defined in the `package.json` file. This is a crucial step after cloning the repository to ensure all necessary libraries are available.

```Shell
npm install
```

--------------------------------

### Initializing Google Analytics Tracking

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/examples/index.html

This JavaScript snippet initializes Google Analytics tracking for the page. It sets the account ID and tracks a pageview, asynchronously loading the Google Analytics script from either HTTPS or HTTP based on the document's protocol.

```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

--------------------------------

### Installing Node.js Dependencies for Bootstrap

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/README.md

This command installs all necessary local Node.js dependencies for Bootstrap's development environment, as specified in the `package.json` file. It is a prerequisite for running the `make` commands used for compiling CSS and JavaScript assets.

```Shell
npm install
```

--------------------------------

### Applying Borders and Pulling Icons with Font Awesome

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/examples/index.html

This example demonstrates combining `icon-border` with `pull-left` and `icon-4x` to create a bordered, large, and floated icon. This is useful for introductory article images or other decorative elements.

```HTML
<i class="icon-flag icon-4x pull-left icon-border"></i>
Use a few of the new styles together ... lots of new possibilities.
```

--------------------------------

### Installing Gems after Adding jQuery Rails (Console)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap-sass/README.md

This console command executes `bundle install` to fetch and install the `jquery-rails` gem and any other new dependencies defined in the Gemfile. This step is essential to make the newly added gems available to the Rails application.

```Console
$ bundle install
```

--------------------------------

### Initializing Google Analytics Tracking (JavaScript)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/paste/index.html

This JavaScript snippet initializes Google Analytics tracking for the page. It sets the account ID and tracks a pageview, then dynamically loads the Google Analytics script. This is a common setup for website analytics.

```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

--------------------------------

### Displaying Sample Text in an HTML Paragraph

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/swatchmaker/test/test-full.html

This HTML snippet demonstrates a basic paragraph element (<p>) containing placeholder text. It is used to display a block of text on a web page, typically for content that requires standard paragraph formatting.

```html
<p>Sample text here...</p>
```

--------------------------------

### Installing jQuery with Composer

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/jquery/README.md

This snippet provides the command to install jQuery using Composer, the dependency manager for PHP. It's typically used in PHP projects to manage libraries.

```Shell
composer require components/jquery
```

--------------------------------

### Serving Bootstrap Documentation Locally with Jekyll

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap/README.md

This command executes Jekyll via Bundler to build and serve the Bootstrap documentation locally, making it accessible in a web browser, typically at `http://localhost:9001`.

```Ruby
bundle exec jekyll serve
```

--------------------------------

### Loading Carbon Ads Script

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/examples/index.html

This JavaScript snippet dynamically creates and inserts a script tag to load the Carbon Ads advertising platform. It sets the script type, async attribute, and source URL, then appends it to the document's head for display.

```JavaScript
var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32291/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);
```

--------------------------------

### Importing Bootswatch Theme CSS in React (Generic)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html

This JavaScript import statement shows the general syntax for importing a Bootswatch theme's CSS file into a React application or similar JavaScript bundler setup. The `[theme]` placeholder should be replaced with the desired theme name.

```javascript
import "bootswatch/dist/[theme]/bootstrap.min.css";
```

--------------------------------

### Building Jekyll Project and Documentation (Shell)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/README.md

This command uses Bundler to execute Jekyll's build process. It compiles the static site and documentation files, typically outputting them to the '_site' directory, ready for deployment.

```Shell
bundle exec jekyll build
```

--------------------------------

### Injecting Carbon Ads Script (JavaScript)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/get-started/index.html

This JavaScript snippet dynamically creates and inserts a script tag into the document to load Carbon Ads. It sets the script type to 'text/javascript' and enables asynchronous loading for non-blocking execution.

```JavaScript
var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32291/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);
```

--------------------------------

### Basic Bootstrap Starter Template (HTML)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/docs/extend.html

This HTML template provides a minimal structure for a web page utilizing Bootstrap. It includes the necessary <link> tag to import Bootstrap's CSS and a <script> tag to include its JavaScript, allowing for quick project setup.

```HTML
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="public/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap -->
    <script src="public/js/bootstrap.min.js"></script>
  </body>
</html>
```

--------------------------------

### Cloning Bootswatch Repository

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/4/help/index.html

This command downloads the entire Bootswatch project repository from GitHub. It is the first step required to set up a local development environment for customizing or creating Bootswatch themes.

```Shell
git clone https://github.com/thomaspark/bootswatch.git
```

--------------------------------

### Wrapping Inline Elements in HTML

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/tests/components.html

Demonstrates how to wrap an HTML element like <section> as an inline code example within documentation, typically using <code> tags.

```HTML
<section>
```

--------------------------------

### Watching Bootswatch SASS Files for Changes

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html

This Grunt command continuously monitors the Bootswatch SASS files for any modifications. When changes are detected, it automatically triggers a rebuild of the theme's CSS and reloads the development server, streamlining the customization workflow.

```Shell
grunt watch
```

--------------------------------

### Importing Bootswatch Themes in Sass

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html

This snippet demonstrates the correct import order for integrating Bootswatch themes into a Sass project. It allows overriding theme variables by placing Bootstrap's `bootstrap.scss` between the theme's `_variables.scss` and `_bootswatch.scss` files.

```Sass
@import "~bootswatch/dist/[theme]/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/[theme]/bootswatch";
```

--------------------------------

### Displaying Font Awesome 'undo' Icon with HTML

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/undo/index.html

This HTML snippet demonstrates how to display the 'undo' icon from Font Awesome using the <i> tag with the 'icon-undo' class. It's a basic example of integrating Font Awesome icons into a web page after proper setup.

```HTML
<i class="icon-undo"></i> icon-undo
```

--------------------------------

### Customizing Font Awesome with LESS - Setting Font Path

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/get-started/index.html

This LESS snippet shows how to configure the `@FontAwesomePath` variable in `font-awesome/variables.less`. This variable specifies the relative path from the compiled CSS directory to the Font Awesome font files, ensuring icons are correctly loaded.

```LESS
@FontAwesomePath:   "../font";
```

--------------------------------

### Styling Global Body Elements in CSS

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/docs/examples/carousel.html

This snippet defines global styles for the `body` element, setting a bottom padding and a default text color. It ensures content doesn't get hidden behind a fixed footer and provides a consistent base text color.

```CSS
body { padding-bottom: 40px; color: #5a5a5a; }
```

--------------------------------

### Importing Bootswatch 'Slate' Theme in React App.js

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html

This React component snippet demonstrates how to integrate the 'slate' Bootswatch theme into an `App.js` file. It imports the specific theme's CSS before other local CSS files, ensuring the theme styles are applied correctly.

```javascript
import React from 'react';\nimport logo from './logo.svg';\nimport 'bootswatch/dist/slate/bootstrap.min.css'; // Added this :boom:\nimport './App.css';\n\nfunction App() {\n...
```

--------------------------------

### Customizing Font Path for Font Awesome (SCSS)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/get-started.html

This snippet shows how to customize the font path for Font Awesome when using custom LESS or SASS. The '@fa-font-path' variable in '_variables.scss' (or 'variables.less') needs to be updated to correctly reference the font directory, relative to the compiled CSS output.

```scss
@fa-font-path: "../font";
```

--------------------------------

### Styling Code Blocks and Headings with CSS

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/help/index.html

This CSS snippet defines styles for `<h1>` elements, adding top padding, and for `<code>` elements, setting a light gray background and inheriting text color. These styles are likely for general page layout and code block presentation.

```css
h1 { padding-top: 3em; } code { background-color: #eee; color: inherit; }
```

--------------------------------

### Customizing Font Awesome with LESS - Replacing Sprite Import

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/get-started/index.html

This LESS snippet demonstrates how to integrate Font Awesome into a Bootstrap LESS project by replacing the default `sprites.less` import with the Font Awesome LESS file. This enables the compilation of Font Awesome styles directly within the Bootstrap build process.

```LESS
@import "sprites.less";
```

```LESS
@import "path/to/font-awesome/less/font-awesome.less";
```

--------------------------------

### Initializing Google Analytics and Typekit (JavaScript)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/bitbucket/index.html

This JavaScript snippet initializes Google Analytics tracking and attempts to load Typekit. It sets up the Google Analytics account and tracks a pageview, then dynamically loads the Google Analytics script.

```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

--------------------------------

### Initializing Google Analytics and Typekit - JavaScript

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/instagram/index.html

This JavaScript snippet initializes Google Analytics tracking for page views and attempts to load Typekit fonts. It's typically placed in the <head> or before the closing </body> tag for web analytics and font services, ensuring tracking starts early and fonts are loaded.

```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

--------------------------------

### Initializing Bootstrap Modals and Popovers with jQuery

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/swatchmaker/test/test-full.html

This JavaScript snippet, executed on document ready, initializes Bootstrap's modal and popover components using jQuery. It ensures all modals are hidden by default and activates popovers for elements with the 'rel=popover' attribute, preventing the default link behavior upon click. This setup is crucial for interactive UI elements to function correctly.

```JavaScript
$(document).ready(function () { $('.modal').modal('hide'); $("\\[rel=popover\\]").popover().click(function(e){ e.preventDefault(); }); });
```

--------------------------------

### Installing Rails Gems

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap-sass-official/README.md

This console command executes `bundle install`, which installs all gems listed in the Gemfile, including `jquery-rails`. This step is necessary to make the newly added gems available to the Rails application.

```console
$ bundle install
```

--------------------------------

### Creating Standard Description Lists in HTML

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/docs/base-css.html

This HTML snippet shows the basic structure for a description list using `<dl>`, `<dt>` (definition term), and `<dd>` (definition description) tags. It's suitable for defining terms and their associated explanations.

```HTML
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>
```

--------------------------------

### Building Bootswatch Themes with Grunt

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/help/index.html

These Grunt commands are used to compile and build the CSS files for Bootswatch themes. `grunt swatch:[theme]` builds a specific theme, `grunt swatch:amelia` is an example for the 'Amelia' theme, and `grunt swatch` builds all available themes.

```Shell
grunt swatch:[theme]
```

```Shell
grunt swatch:amelia
```

```Shell
grunt swatch
```

--------------------------------

### Installing Bootstrap Sass via Bower (Console)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap-sass/README.md

This console command installs the `bootstrap-sass` package using Bower. This method is compatible with `node-sass` 3.2.0+. After installation, Sass, JS, and other assets are located in the `assets` directory within the Bower package.

```Console
$ bower install bootstrap-sass
```

--------------------------------

### Building Bootswatch Themes with Grunt

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/4/help/index.html

This Grunt command compiles the Sass files for a specified Bootswatch theme into CSS. Running `grunt swatch:[theme]` builds a single theme (e.g., `grunt swatch:flatly`), while `grunt swatch` builds all themes at once, generating the final CSS output.

```Shell
grunt swatch:[theme]
```

--------------------------------

### Initializing Google Analytics and Typekit in JavaScript

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/refresh/index.html

This JavaScript snippet initializes Google Analytics for page view tracking and attempts to load Typekit. It sets up the Google Analytics account and asynchronously loads the `ga.js` script, ensuring proper tracking based on the page's protocol.

```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

--------------------------------

### Initializing Google Analytics and Typekit - JavaScript

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/lightbulb/index.html

This JavaScript snippet initializes Google Analytics for page tracking and attempts to load Typekit fonts. It sets up the Google Analytics account and asynchronously loads the `ga.js` script to track page views.

```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

--------------------------------

### Initializing Google Analytics and Typekit in JavaScript

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/level-up/index.html

This JavaScript snippet initializes Google Analytics tracking for the page and attempts to load Typekit. It sets up the Google Analytics account and tracks page views, dynamically loading the `ga.js` script.

```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

--------------------------------

### Initializing Google Analytics and Typekit (JavaScript)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/time/index.html

This JavaScript snippet initializes Google Analytics for page tracking and attempts to load Typekit. It sets up the Google Analytics account and asynchronously loads the `ga.js` script.

```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

--------------------------------

### Installing Bootstrap-Sass via npm

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap-sass-official/README.md

This console command demonstrates how to install the `bootstrap-sass` package using npm, which is the recommended method for Node.js environments. This command adds `bootstrap-sass` to your project's dependencies.

```console
$ npm install bootstrap-sass
```

--------------------------------

### Initializing Google Analytics and Typekit in JavaScript

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/trello/index.html

This JavaScript snippet initializes Google Analytics tracking for page views and attempts to load Typekit fonts. It sets up the Google Analytics account and asynchronously loads the `ga.js` script.

```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

--------------------------------

### Initializing Google Analytics and Typekit - JavaScript

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/phone-sign/index.html

This snippet initializes Google Analytics tracking for the page, setting the account ID and tracking a pageview. It also attempts to load Typekit, gracefully handling any errors during the process. This is typically placed in the <head> or before the closing </body> tag.

```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

--------------------------------

### Creating a Basic Navigation List with Headers in HTML

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/docs/components.html

This HTML snippet demonstrates how to create a structured navigation list, often used in sidebars. By applying `nav` and `nav-list` classes to an unordered list, it allows for list headers (`nav-header`) and active states (`active`) to organize links.

```HTML
<ul class="nav nav-list">
  <li class="nav-header">List header</li>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  ...
</ul>
```

--------------------------------

### Scaling Font Awesome Icons

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/examples/index.html

This example illustrates how to increase the size of Font Awesome icons using utility classes like `icon-large`, `icon-2x`, `icon-3x`, and `icon-4x`. These classes proportionally scale the icon relative to its container.

```HTML
<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
```

--------------------------------

### Demonstrating Bootstrap 3 Components with Font Awesome in HTML

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/_includes/examples/bootstrap.html

This HTML snippet showcases various Bootstrap 3 components, such as buttons and list items, integrated with Font Awesome icons. It illustrates basic navigation links and user action menus, demonstrating how Font Awesome can enhance Bootstrap's visual elements.

```HTML
 [Delete](#) [Settings](#) [Font Awesome  
Version {{ site.fontawesome.version }}](#)

[](#)[](#)[](#)[](#)

[User](#)[](#)

*   [Edit](#)
*   [Delete](#)
*   [Ban](#)

*   [Make admin](#)
```

--------------------------------

### Building Customized Bootswatch CSS

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/swatchmaker/README.md

Executed from the `swatchmaker` directory, this command compiles the customized `variables.less` and `bootswatch.less` files into the final CSS files, which are then placed in the `swatch` directory.

```Shell
make bootswatch
```

--------------------------------

### Installing Bootstrap Sass via Bower

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap-sass-official/README.md

This console command installs the `bootstrap-sass` package using Bower. This method is compatible with `node-sass` 3.2.0+ and places all Sass, JS, and other assets in the `assets` directory, making them available for use in projects configured with Bower.

```console
$ bower install bootstrap-sass
```

--------------------------------

### Initializing Google Analytics and Typekit (JavaScript)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/btc/index.html

This JavaScript snippet initializes Google Analytics tracking for the page, setting the account ID and tracking a pageview. It also attempts to load Typekit fonts, gracefully handling any errors. This code is typically placed in the <head> or before the closing </body> tag for website analytics and font loading.

```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

--------------------------------

### Cloning Bootstrap Repository with Git

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/bootstrap/README.md

This command clones the official Bootstrap GitHub repository to your local machine, providing access to the full source code for development or customization.

```Shell
git clone https://github.com/twbs/bootstrap.git
```

--------------------------------

### Styling Body and Navbar - CSS

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/bower_components/bootstrap/less/tests/navbar.html

This CSS snippet applies basic styling to the `body` element, setting padding, and to the `.navbar` class, adding a top margin. These styles are foundational for the layout of the Bootstrap navbar examples, ensuring proper spacing and positioning.

```css
body { padding-top: 0; padding-bottom: 30px; } .navbar { margin-top: 20px; }
```

--------------------------------

### Initializing Google Analytics Tracking - JavaScript

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/pushpin/index.html

This JavaScript snippet initializes Google Analytics tracking for the page. It sets the account ID and tracks a pageview. It's a standard asynchronous Google Analytics implementation.

```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

--------------------------------

### Initializing Google Analytics and Typekit - JavaScript

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/icon/credit-card/index.html

This JavaScript snippet initializes Google Analytics tracking for the page and attempts to load Typekit fonts. It sets up the GA account and tracks a pageview, dynamically injecting the GA script into the document.

```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

--------------------------------

### Implementing Button Dropdowns with Font Awesome Icons

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/examples/index.html

This example demonstrates a Bootstrap button dropdown featuring Font Awesome icons within both the main button and the dropdown menu items. It uses `btn-group`, `dropdown-toggle`, and `dropdown-menu` classes, along with `icon-fixed-width` for alignment in the menu.

```HTML
<div class="btn-group open">
  <a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="icon-caret-down"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="icon-fixed-width icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-fixed-width icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>
```

--------------------------------

### Creating Prepended Form Inputs with Font Awesome Icons (HTML)

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/examples/index.html

This example shows how to create prepended form inputs using Bootstrap's `input-prepend` class combined with Font Awesome icons. The `add-on` span wraps the icon, visually attaching it to the input field.

```HTML
<form>
  <div class="input-prepend">
    <span class="add-on"><i class="icon-envelope"></i></span>
    <input class="span2" type="text" placeholder="Email address">
  </div>
  <div class="input-prepend">
    <span class="add-on"><i class="icon-key"></i></span>
    <input class="span2" type="password" placeholder="Password">
  </div>
</form>
```

--------------------------------

### Initializing Google Analytics and Typekit in JavaScript

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/3/bower_components/font-awesome/src/3.2.1/community/index.html

This JavaScript snippet initializes Google Analytics tracking by setting the account ID and tracking a pageview. It also attempts to load Typekit, gracefully handling any errors. The script dynamically creates and inserts the Google Analytics script tag into the document.

```JavaScript
try{Typekit.load();}catch(e){} var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

--------------------------------

### Default Button Class in CSS

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/swatchmaker/test/test-full.html

Applies the standard gray button style with a gradient. This is the base class for all buttons, providing a neutral appearance.

```CSS
btn
```

--------------------------------

### Info Button Class in CSS

Source: https://github.com/thomaspark/bootswatch/blob/v5/docs/2/swatchmaker/test/test-full.html

Applies an informational button style, used as an alternative to the default styles. This class typically indicates an informative or neutral action.

```CSS
btn btn-info
```
Tokens:
Raw