### Example Code Block Source: https://getbootstrap.com/docs/3.3/examples/blog This is a generic example code block. It does not require specific setup or imports. ```plaintext Example code block ``` -------------------------------- ### Install Bootstrap with Composer Source: https://getbootstrap.com/docs/3.3/getting-started Install and manage Bootstrap's Less, CSS, JavaScript, and fonts using Composer. ```bash $ composer require twbs/bootstrap ``` -------------------------------- ### Install Local npm Dependencies Source: https://getbootstrap.com/docs/3.3/getting-started Navigate to the root Bootstrap directory and run npm install to download all necessary local dependencies as defined in package.json. ```bash npm install ``` -------------------------------- ### Bootstrap Grid Layout Example Source: https://getbootstrap.com/docs/3.3/css Demonstrates how to use the .make-row and .make-lg-column mixins to create a two-column layout with an offset on large screens. This example uses default gutter and column settings. ```less .wrapper { .make-row(); } .content-main { .make-lg-column(8); } .content-secondary { .make-lg-column(3); .make-lg-column-offset(1); } ``` ```html

...

``` -------------------------------- ### Install Bootstrap with Bower Source: https://getbootstrap.com/docs/3.3/getting-started Install Bootstrap and manage its Less, CSS, JavaScript, and fonts using the Bower package manager. ```bash $ bower install bootstrap ``` -------------------------------- ### Bootstrap 3.3 Fluid Container Example Source: https://getbootstrap.com/docs/3.3/css This example shows how to create a full-width layout by using a `.container-fluid` class instead of a fixed-width `.container`. ```html

...

``` -------------------------------- ### Bootstrap 3.3 Grid Example: Mobile, Tablet, Desktop Layout Source: https://getbootstrap.com/docs/3.3/css This example builds on the previous one by incorporating tablet (`.col-sm-*`) classes, enabling more dynamic and powerful layouts across mobile, tablet, and desktop devices. ```html

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

``` -------------------------------- ### Install Bootstrap with npm Source: https://getbootstrap.com/docs/3.3/getting-started Install Bootstrap using the npm package manager. Running `require('bootstrap')` loads all plugins onto the jQuery object. ```bash $ npm install bootstrap@3 ``` -------------------------------- ### Install Grunt CLI Globally Source: https://getbootstrap.com/docs/3.3/getting-started Install the Grunt command line interface globally using npm. This is a prerequisite for running Grunt commands. ```bash npm install -g grunt-cli ``` -------------------------------- ### Basic Bootstrap HTML Template Source: https://getbootstrap.com/docs/3.3/getting-started A minimal HTML document structure to get started with Bootstrap. Includes necessary meta tags, CSS, and JavaScript includes. ```html Bootstrap 101 Template

Hello, world!

``` -------------------------------- ### Bootstrap 3.3 Grid Example: Mobile and Desktop Layout Source: https://getbootstrap.com/docs/3.3/css This example uses a combination of extra small (`.col-xs-*`) and medium (`.col-md-*`) device grid classes to create a responsive layout that adjusts between mobile and desktop views. ```html

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

``` -------------------------------- ### Bootstrap Grid Example with Offsets and Responsive Overrides Source: https://getbootstrap.com/docs/3.3/css Shows how to use `.col-sm-offset-*` and `.col-*-offset-0` classes to manage column offsets and reset them at different responsive breakpoints. ```html

.col-sm-5 .col-md-6

.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0

``` -------------------------------- ### Live demo popover Source: https://getbootstrap.com/docs/3.3/javascript An example of a popover that can be toggled by clicking a button. ```APIDOC ### Live demo Click to toggle popover ```html ``` ``` -------------------------------- ### Using Bootstrap Color Variables Source: https://getbootstrap.com/docs/3.3/css Examples of how to use Bootstrap's color variables directly or by reassigning them to custom variables. ```less // Use as-is .masthead { background-color: @brand-primary; } // Reassigned variables in Less @alert-message-background: @brand-info; .alert { background-color: @alert-message-background; } ``` -------------------------------- ### Bootstrap Tooltip Button Examples Source: https://getbootstrap.com/docs/3.3/javascript Provides examples of HTML buttons configured to display tooltips on different placements (left, top, bottom, right). These buttons use the 'data-toggle="tooltip"' attribute. ```html ``` -------------------------------- ### Bootstrap 3.3 Grid Example: Stacked-to-Horizontal Layout Source: https://getbootstrap.com/docs/3.3/css This example demonstrates a basic grid system using `.col-md-*` classes. Columns stack on mobile and tablet devices and become horizontal on desktop devices. ```html

.col-md-1

.col-md-8

.col-md-4

.col-md-6

``` -------------------------------- ### Jumbotron Example Source: https://getbootstrap.com/docs/3.3/components A lightweight jumbotron component for showcasing key content. It can optionally extend the entire viewport. ```html

Hello, world!

...

Learn more

``` -------------------------------- ### Bootstrap Offsetting Columns Example Source: https://getbootstrap.com/docs/3.3/css Demonstrates how to use `.col-md-offset-*` classes to shift columns to the right by a specified number of grid units. ```html

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

``` -------------------------------- ### Tooltip Initialization Source: https://getbootstrap.com/docs/3.3/javascript Tooltips are opt-in for performance reasons and must be initialized. This example shows how to initialize all tooltips on a page using their `data-toggle` attribute. ```APIDOC ## Tooltip Initialization ### Description For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself. One way to initialize all tooltips on a page would be to select them by their `data-toggle` attribute. ### Method ```javascript $(function () { $('[data-toggle="tooltip"]').tooltip() }) ``` ``` -------------------------------- ### Example of Remote Content Loading in Modal Source: https://getbootstrap.com/docs/3.3/javascript This example demonstrates using an `href` attribute on a link to load content into a modal, a feature deprecated in newer Bootstrap versions. ```html Click me ``` -------------------------------- ### Bootstrap Nesting Columns Example Source: https://getbootstrap.com/docs/3.3/css Illustrates how to nest columns by adding a new `.row` and `.col-sm-*` columns within an existing `.col-sm-*` column. ```html

Level 1: .col-sm-9

Level 2: .col-xs-8 .col-sm-6

Level 2: .col-xs-4 .col-sm-6

``` -------------------------------- ### Label Example Heading Source: https://getbootstrap.com/docs/3.3/components Add a label to indicate new information next to a heading. ```html

Example heading New

``` -------------------------------- ### Buttons with Dropdowns in Input Groups Source: https://getbootstrap.com/docs/3.3/components Demonstrates how to integrate buttons with dropdowns into input groups, with examples for both left and right-aligned dropdowns. ```html

``` -------------------------------- ### Basic Form Example with Bootstrap Source: https://getbootstrap.com/docs/3.3/css Standard form layout using Bootstrap's `.form-group` for spacing and `.form-control` for input styling. Includes email, password, file inputs, help text, and checkboxes. ```html ``` -------------------------------- ### Troubleshooting npm Dependencies Source: https://getbootstrap.com/docs/3.3/getting-started If facing issues with dependency installation or Grunt commands, delete the node_modules directory and rerun npm install. ```bash rm -rf node_modules && npm install ``` -------------------------------- ### Inline form with input group Source: https://getbootstrap.com/docs/3.3/css This example demonstrates an inline form with an input group, useful for currency or units. ```html ``` -------------------------------- ### Bootstrap Responsive Offset Reset Example Source: https://getbootstrap.com/docs/3.3/css Shows how to override column offsets from lower grid tiers with `.col-*-offset-0` classes for responsive adjustments. ```html

``` -------------------------------- ### Collapse Plugin Initialization via JavaScript Source: https://getbootstrap.com/docs/3.3/javascript Enable the collapse plugin on an element manually using JavaScript. This example shows how to initialize the plugin. ```APIDOC ## Initialize Collapse Plugin ### Description Manually activate the collapse plugin on a selected element. ### Method ```javascript $('.collapse').collapse() ``` ``` -------------------------------- ### Inline Form Example with Bootstrap Source: https://getbootstrap.com/docs/3.3/css Create an inline form layout by applying the `.form-inline` class. This is suitable for smaller viewports and may require custom widths for input elements. ```html ``` -------------------------------- ### Page Header Example Source: https://getbootstrap.com/docs/3.3/components Use this component to create a distinct header for a page section, supporting a main heading and optional subtext. ```html ``` -------------------------------- ### Tooltip Usage Source: https://getbootstrap.com/docs/3.3/javascript The tooltip plugin generates content and markup on demand. This example shows how to trigger a tooltip via JavaScript with options. ```APIDOC ## Tooltip Usage ### Description The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. ### Method Trigger the tooltip via JavaScript: ```javascript $('#example').tooltip(options) ``` ### Markup The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin). ```html Hover over me ``` #### Multiple-line links Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add `white-space: nowrap;` to your anchors to avoid this. ``` -------------------------------- ### Bootstrap Column Wrapping Example Source: https://getbootstrap.com/docs/3.3/css Demonstrates how columns wrap to a new line when their total width exceeds 12 columns within a row. Subsequent columns continue on the new line. ```html

.col-xs-9

.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-xs-6
Subsequent columns continue along the new line.

``` -------------------------------- ### Basic Popover Example Source: https://getbootstrap.com/docs/3.3/javascript A basic HTML button that triggers a popover with a title and content. The popover is initialized via the 'data-toggle' attribute. ```html ``` -------------------------------- ### Button Toolbar Example Source: https://getbootstrap.com/docs/3.3/components Combine multiple button groups into a single toolbar for more complex components. Use a `

` to contain the individual `.btn-group` elements. ```html ``` -------------------------------- ### Two Columns (Medium and up) Source: https://getbootstrap.com/docs/3.3/examples/grid Use for two columns with specified widths starting from medium-sized desktops. ```html

...

``` -------------------------------- ### Bootstrap Button State Toggle Example Source: https://getbootstrap.com/docs/3.3/javascript Shows how to use the Bootstrap button plugin to toggle a button's text to a 'complete' state. This requires a `data-complete-text` attribute on the button. ```html ``` ```javascript $"#myStateButton".on('click', function () { $(this).button('complete') // button text will be "finished!" }) ``` -------------------------------- ### Bootstrap Modal Sizes Source: https://getbootstrap.com/docs/3.3/javascript Examples for creating large and small modals using Bootstrap's size modifier classes on the modal dialog element. ```html ``` -------------------------------- ### Contact Information Address Block Source: https://getbootstrap.com/docs/3.3/css Use the `

` tag to present contact information. Ensure all lines end with `
` for proper formatting. This example shows a company address and a personal contact. ```HTML

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

``` -------------------------------- ### Bootstrap Collapse Example with Link and Button Source: https://getbootstrap.com/docs/3.3/javascript Demonstrates how to implement collapsible content using Bootstrap's collapse plugin. It shows usage with both an anchor tag (`href`) and a button (`data-target`), both requiring `data-toggle="collapse"`. ```html Link with href

...

``` -------------------------------- ### Bootstrap Button Checkbox Example Source: https://getbootstrap.com/docs/3.3/javascript Demonstrates the HTML structure for a group of checkbox buttons in Bootstrap. The `.active` class is used to indicate a pre-checked state. ```html

Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3

``` -------------------------------- ### Event Handling Source: https://getbootstrap.com/docs/3.3/javascript Bootstrap plugins emit custom events, typically in an infinitive form (e.g., `show`) triggered at the start of an action, and a past participle form (e.g., `shown`) triggered upon completion. All events are namespaced, and infinitive events support `preventDefault()`. ```APIDOC ## Event Handling Listening for an event and preventing an action: ```javascript $('#myModal').on('show.bs.modal', function (e) { if (!data) return e.preventDefault() // stops modal from being shown }) ``` ``` -------------------------------- ### Popovers Initialization Source: https://getbootstrap.com/docs/3.3/javascript Instructions on how to opt-in and initialize Bootstrap popovers. ```APIDOC # Popovers popover.js Add small overlays of content, like those on the iPad, to any element for housing secondary information. Popovers whose both title and content are zero-length are never displayed. ### Plugin dependency Popovers require the tooltip plugin to be included in your version of Bootstrap. ### Opt-in functionality For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning **you must initialize them yourself**. One way to initialize all popovers on a page would be to select them by their `data-toggle` attribute: ### Method ```javascript $(function () { $('[data-toggle="popover"]').popover() }) ``` ``` -------------------------------- ### Run Grunt Command (Build Everything) Source: https://getbootstrap.com/docs/3.3/getting-started Compile and minify all assets, build the documentation website, run validation, and regenerate Customizer assets. Typically only needed for core Bootstrap development. ```bash grunt ``` -------------------------------- ### Sample Output Tag Source: https://getbootstrap.com/docs/3.3/css Use the `` tag to indicate sample output from a computer program. ```html This text is meant to be treated as sample output from a computer program. ``` -------------------------------- ### Four directions popovers Source: https://getbootstrap.com/docs/3.3/javascript Examples of popovers positioned in four different directions: right, top, bottom, and left. ```APIDOC ### Four directions Popover on right Popover on top Popover on bottom Popover on left ```html ``` ``` -------------------------------- ### Run Grunt Docs Command Source: https://getbootstrap.com/docs/3.3/getting-started Build and test documentation assets. Used for local documentation development. ```bash grunt docs ``` -------------------------------- ### Handling Bootstrap Events Source: https://getbootstrap.com/docs/3.3/javascript Bootstrap events are namespaced (e.g., `show.bs.modal`). Infinitive events allow `preventDefault()` to stop an action before it starts. ```javascript $('#myModal').on('show.bs.modal', function (e) { if (!data) return e.preventDefault() // stops modal from being shown }) ``` -------------------------------- ### Contextual Panel Alternatives Source: https://getbootstrap.com/docs/3.3/components Apply contextual state classes like `.panel-primary`, `.panel-success`, etc., to give panels specific meanings. ```html ... ... ... ... ... ``` -------------------------------- ### Three Equal Columns (Medium and up) Source: https://getbootstrap.com/docs/3.3/examples/grid Use for three equal-width columns starting from medium-sized desktops. Columns stack on smaller screens. ```html ... ... ... ``` -------------------------------- ### Activate Affix Plugin with Offset Option Source: https://getbootstrap.com/docs/3.3/javascript Initialize the affix plugin with a specific pixel offset for positioning. This method is useful for simple, fixed offset configurations. ```javascript $('#myAffix').affix({ offset: 15 }) ``` -------------------------------- ### Affix Methods Source: https://getbootstrap.com/docs/3.3/javascript Methods for controlling the Affix plugin. ```APIDOC ## `.affix(options)` ### Description Activates your content as affixed content. Accepts an optional options object. ### Method `.affix(options)` ### Parameters #### Options - **offset** (number | function | object) - Optional - Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object `offset: { top: 10 }` or `offset: { top: 10, bottom: 5 }`. Use a function when you need to dynamically calculate an offset. - **target** (selector | node | jQuery element) - Optional - Specifies the target element of the affix. ### Request Example ```javascript $('#myAffix').affix({ offset: 15 }) ``` ``` ```APIDOC ## `.affix('checkPosition')` ### Description Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. The `.affix`, `.affix-top`, and `.affix-bottom` classes are added to or removed from the affixed content according to the new state. This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content. ### Method `.affix('checkPosition')` ### Request Example ```javascript $('#myAffix').affix('checkPosition') ``` ``` -------------------------------- ### Dismissible Alert Example Source: https://getbootstrap.com/docs/3.3/components Create dismissible alerts by adding the `.alert-dismissible` class and a close button. This requires the Bootstrap JavaScript alerts plugin for full functionality. ```html Warning! Better check yourself, you're not looking too good. ``` -------------------------------- ### Pager Default Example Source: https://getbootstrap.com/docs/3.3/components The default pager component centers previous and next links. It's suitable for simple pagination on sites like blogs or magazines. ```html Previous Next ``` -------------------------------- ### Bootstrap Button with Icon Source: https://getbootstrap.com/docs/3.3/components Integrate icons into buttons for enhanced visual cues. This example shows a button with a left-aligned icon and a larger button with a star icon. ```html ``` -------------------------------- ### Run Grunt Test Command Source: https://getbootstrap.com/docs/3.3/getting-started Execute JSHint for code quality checks and run QUnit tests headlessly in PhantomJS. ```bash grunt test ``` -------------------------------- ### Run Grunt Dist Command Source: https://getbootstrap.com/docs/3.3/getting-started Compile and minify CSS and JavaScript files into the /dist/ directory. This is the most common command for Bootstrap users. ```bash grunt dist ``` -------------------------------- ### Badge Example Source: https://getbootstrap.com/docs/3.3/components Highlight new or unread items by adding a `` to links or buttons. Badges will self-collapse in modern browsers when empty. ```html Inbox 42 ``` -------------------------------- ### Accessible Navbar Structure Source: https://getbootstrap.com/docs/3.3/components Use a `` element or add `role="navigation"` to a `` for accessibility. This example shows a complete, accessible navbar structure. ```html Brand Link (current) Link Dropdown Action Another action Something else here Separated link One more separated link Link Dropdown Action Another action Something else here Separated link ``` -------------------------------- ### Initialize Collapse via JavaScript Source: https://getbootstrap.com/docs/3.3/javascript Enable the collapse plugin on elements with the class 'collapse'. ```javascript ``` $('.collapse').collapse() ``` ``` -------------------------------- ### Three Unequal Columns (Medium and up) Source: https://getbootstrap.com/docs/3.3/examples/grid Use for three columns with varying widths starting from medium-sized desktops. Ensure column widths sum to 12 for a single row. ```html ... ... ... ``` -------------------------------- ### Bootstrap Column Ordering with Push and Pull Source: https://getbootstrap.com/docs/3.3/css Demonstrates how to reorder grid columns using `.col-md-push-*` and `.col-md-pull-*` modifier classes. ```html .col-md-9 .col-md-push-3 .col-md-3 .col-md-pull-9 ``` -------------------------------- ### Bootstrap Button Radio Example Source: https://getbootstrap.com/docs/3.3/javascript Illustrates the HTML markup for a group of radio buttons styled as Bootstrap buttons. The `.active` class signifies the initially selected radio button. ```html Radio 1 (preselected) Radio 2 Radio 3 ``` -------------------------------- ### Bootstrap Project Structure Source: https://getbootstrap.com/docs/3.3/getting-started Overview of the Bootstrap source code directory structure, including Less, JavaScript, fonts, and distribution files. ```bash bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/ ``` -------------------------------- ### Initialize Popovers Source: https://getbootstrap.com/docs/3.3/javascript Enable popovers for an element collection using JavaScript. You can pass configuration options to customize their behavior. ```APIDOC ## Initialize Popovers Enable popovers for an element collection using JavaScript. ### Method Signature ```javascript $('#element').popover(options) ``` ### Parameters * **options** (object) - Optional. An object containing configuration options for the popovers. ``` -------------------------------- ### Basic Button Group Example Source: https://getbootstrap.com/docs/3.3/components Group a series of buttons together on a single line by wrapping them with `.btn` inside a `.btn-group` div. Ensure correct `role` and `aria-label` attributes for accessibility. ```html ``` -------------------------------- ### Offset, Push, and Pull Resets (Small and Medium) Source: https://getbootstrap.com/docs/3.3/examples/grid Demonstrates resetting column offsets, pushes, and pulls at specific breakpoints (sm and md) for layout control. ```html ... ... ... ... ``` -------------------------------- ### Usage via Data Attributes Source: https://getbootstrap.com/docs/3.3/javascript Control carousel position using data attributes like `data-slide` and `data-slide-to`. Use `data-ride="carousel"` to start carousel on page load. ```APIDOC ### Via data attributes Use data attributes to easily control the position of the carousel. `data-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position. Alternatively, use `data-slide-to` to pass a raw slide index to the carousel `data-slide-to="2"`, which shifts the slide position to a particular index beginning with `0`. The `data-ride="carousel"` attribute is used to mark a carousel as animating starting at page load. **It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.** ``` -------------------------------- ### Tooltip Events Source: https://getbootstrap.com/docs/3.3/javascript Documentation for the events that can be listened to for Bootstrap tooltips. ```APIDOC ## Tooltip Events ### Event Type | Description show.bs.tooltip | This event fires immediately when the `show` instance method is called. shown.bs.tooltip | This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). hide.bs.tooltip | This event is fired immediately when the `hide` instance method has been called. hidden.bs.tooltip | This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). inserted.bs.tooltip | This event is fired after the `show.bs.tooltip` event when the tooltip template has been added to the DOM. ### Example ```javascript $('#myTooltip').on('hidden.bs.tooltip', function () { // do something… }) ``` ``` -------------------------------- ### Ensure Latest IE Rendering Mode Source: https://getbootstrap.com/docs/3.3/getting-started Include this meta tag to ensure Internet Explorer uses its latest rendering mode for optimal Bootstrap display. This is included in Bootstrap's documentation and examples. ```html ``` -------------------------------- ### Small Text with <small> Source: https://getbootstrap.com/docs/3.3/css Use the `` tag to render text at 85% the size of its parent. This is useful for fine print or secondary information. ```html This line of text is meant to be treated as fine print. ``` -------------------------------- ### Initialize Scrollspy via Data Attributes Source: https://getbootstrap.com/docs/3.3/javascript Add `data-spy="scroll"` to the element to spy on (e.g., ``) and `data-target` to specify the navigation component's parent element. This method is useful for quick setup. ```html ... ... ... ``` -------------------------------- ### Basic Preformatted Block Source: https://getbootstrap.com/docs/3.3/css Use the `` tag for multiple lines of code. Ensure angle brackets are escaped for proper rendering. ```html Sample text here... ``` ```html <p>Sample text here...</p> ``` -------------------------------- ### Affix Plugin via JavaScript Source: https://getbootstrap.com/docs/3.3/javascript Manually activate the affix plugin with JavaScript. Configure offsets using an object for top and bottom values, or a function for dynamic calculation. Ensure the target element is correctly selected. ```javascript $('#myAffix').affix({ offset: { top: 100, bottom: function () { return (this.bottom = $('.footer').outerHeight(true)) } } }) ``` -------------------------------- ### Bootstrap Lead Body Copy Source: https://getbootstrap.com/docs/3.3/css Apply the `.lead` class to a paragraph to make it stand out. This is useful for introductory sentences or key takeaways. ```html ... ``` -------------------------------- ### Initialize Popovers with JavaScript Source: https://getbootstrap.com/docs/3.3/javascript Enable popovers on an element collection using the jQuery `.popover()` method. Options can be passed as an object. ```javascript $('#example').popover(options) ```

Hello, world!

Hello, world!

Example heading New

Example page header Subtext for header