--- layout: default title: Bootstrap Documentation ---
Welcome to the Bootstrap documentation, the living, interactive style and code guide for all things Bootstrap. If you're new here, continue reading to learn how to get started.
There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
The fastest way to get started: get the compiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source files are included.
Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.
Clone the entire project or fork your own version of Bootstrap to make it your own by visiting us on GitHub.
Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using Bower.
{% highlight bash %}$ bower install bootstrap{% endhighlight %}Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.
Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:
{% highlight bash %} bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js └── fonts/ ├── glyphiconshalflings-regular.eot ├── glyphiconshalflings-regular.otf ├── glyphiconshalflings-regular.svg ├── glyphiconshalflings-regular.ttf └── glyphiconshalflings-regular.woff {% endhighlight %}This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*
), as well as compiled and minified CSS and JS (bootstrap.min.*
). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.
Please note that all JavaScript plugins require jQuery to be included.
Make use of a super basic HTML template, or dive into a few examples we've started for you. We encourage folks to iterate on these examples and not simply use them as an end result.
Copy and paste the HTML from below to get started with a bare bones Bootstrap document.
{% highlight html linenos %}Customizing Bootstrap is best accomplished when you treat it as another dependency in your development stack. Doing so ensures future upgrades are as easy as possible while also familiarizing yourself to the intricacies of the framework.
Once you've downloaded and included Bootstrap's CSS into your templates, you can move on to customizing the included components. To do so, create a new stylesheet (LESS, if you like, or just plain CSS) to house your customizations.
Compiled or minified?
Unless you plan on reading a good chunk of the compiled CSS, go with the minified. It's the same code, just compacted. Less bandwidth is good, especially in production environments.
From there, include whatever Bootstrap components and HTML content you need to get your template setup. It's best to have a rough idea in mind of modifications to make and content to include, so be sure to spend a brief amount of time on that before moving on.
There are varying degrees to customizing components, but most fall into two camps: light customizations and complete visual overhauls. Luckily, there are plenty of examples of both.
We define light customizations as mostly surface layer changes, things like a color and font changes to existing Bootstrap components. A great example of this is the the Twitter Translation Center (coded by @mdo). Let's look at how to implement the custom button we wrote for this site, .btn-ttc
.
Instead of using the provided Bootstrap buttons, which only require just one class to start, .btn
, we'll add our own modifier class, .btn-ttc
. This will give us a slightly custom look with minimal effort.
In the custom stylesheet, add the following CSS:
{% highlight css linenos %} /* Custom button -------------------------------------------------- */ /* Override base .btn styles */ /* Apply text and background changes to three key states: default, hover, and active (click). */ .btn-ttc, .btn-ttc:hover, .btn-ttc:active { color: white; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #007da7; } /* Apply the custom-colored gradients */ /* Note: you'll need to include all the appropriate gradients for various browsers and standards. */ .btn-ttc { background-repeat: repeat-x; background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%); ... } /* Set the hover state */ /* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */ .btn-ttc:hover { background-position: 0 -15px; } {% endhighlight %}Customizing Bootstrap components takes time, but should be straightforward. Look to the source code often and duplicate the selectors you need for your modifications. Placing them after the Bootstrap source makes for easy overriding without complication. To recap, here's the basic workflow:
.navbar
.!important
here.Going beyond light customizations and into visual overhauls is just as straightforward as the above custom button. For a site like Karma, which uses Bootstrap as a CSS reset with heavy modifications, more extensive work is involved, but well worth it in the end.
Alternate customization methods
While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source LESS code to your own classes via mixins. For the time being, neither options are documented here.
Not all sites and applications need to make use of everything Bootstrap has to offer, especially in production environments where bandwidth literally becomes a financial issue. We encourage folks to remove whatever is unused with our Customizer.
Using the Customizer, simply uncheck any component, feature, or asset you don't need. Hit download and swap out the default Bootstrap files with these newly customized ones. You'll get vanilla Bootstrap, but without the features *you* deem unnecessary. All custom builds include compiled and minified versions, so use whichever works for you.
Fundamental HTML elements styled and enhanced with extensible classes.
Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
{% highlight html linenos %} ... {% endhighlight %}With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
To ensure proper rendering and touch zooming, add the viewport meta tag to your
.
We automatically attempt to scale images to appropriate sizes with a global max-width: 100%;
on all
elements. If you run into problems (e.g., with Google Maps), be sure to disable this property on a per-case basis.
Bootstrap sets basic global display, typography, and link styles. Specifically, we:
margin
on the bodybackground-color: white;
on the body
@font-family-base
, @font-size-base
, and @line-height-base
attributes as our typographic base@link-color
and apply link underlines only on :hover
These styles can be found within scaffolding.less.
For improved cross-browser rendering, we use Normalize, a project by Nicolas Gallagher and Jonathan Neal.
Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes predefined classes for this, as well as powerful mixins for generating semantic layouts.
On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply float
s and width
s. To create a basic grid layout, wrap a series of .col-span-*
elements within a .row
. As this is a 12-column grid, each .col-span-*
spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.
Move columns to the right using .col-offset-*
classes. Each class increases the left margin of a column by a whole column. For example, .col-offset-4
moves .col-span-4
over four columns.
To nest your content with the default grid, add a new .row
and set of .col-span-*
columns within an existing .col-span-*
column. Nested rows should include a set of columns that add up to 12.
Easily change the order of our built-in grid columns with .col-push-*
and .col-pull-*
modifier classes.
Use the small device grid classes, like .col-small-span-6
, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.
In addition to prebuilt grid classes for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.
Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
{% highlight css linenos %} @grid-columns: 12; @grid-gutter-width: 30px; @grid-float-breakpoint: 768px; {% endhighlight %}Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
{% highlight css linenos %} // Creates a wrapper for a series of columns .make-row() { // Negative margin the row out to align the content of columns margin-left: (@grid-gutter-width / -2); margin-right: (@grid-gutter-width / -2); // Then clear the floated columns .clearfix(); } // Generate the columns .make-column(@columns) { @media (min-width: @grid-float-breakpoint) { float: left; // Calculate width based on number of columns available width: percentage(@columns / @grid-columns); } // Prevent columns from collapsing when empty min-height: 1px; // Set inner padding as gutters instead of margin padding-left: (@grid-gutter-width / 2); padding-right: (@grid-gutter-width / 2); } // Generate the column offsets .make-column-offset(@columns) { @media (min-width: @grid-float-breakpoint) { margin-left: percentage((@columns / @grid-columns)); } } {% endhighlight %}You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
{% highlight css linenos %} .wrapper { .make-row(); } .content-main { .make-column(8); } .content-secondary { .make-column(3); .make-column-offset(1); } {% endhighlight %} {% highlight html linenos %}All HTML headings,

through

are available.
Bootstrap heading |
Semibold 38px |
|---|---|
Bootstrap heading |
Semibold 32px |
Bootstrap heading |
Semibold 24px |
Bootstrap heading |
Semibold 18px |
Bootstrap heading |
Semibold 16px |
Bootstrap heading |
Semibold 12px |
Bootstrap's global default font-size
is 14px, with a line-height
of 20px. This is applied to the
and all paragraphs. In addition,

(paragraphs) receive a bottom margin of half their line-height (10px by default).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
...
{% endhighlight %}Make a paragraph stand out by adding .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
...
{% endhighlight %}The typographic scale is based on two LESS variables in variables.less: @font-size-base
and @line-height-base
. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.
Make use of HTML's default emphasis tags with lightweight styles.
For de-emphasizing inline or blocks of text, use the small tag to set text at 85% the size of the parent. Heading elements receive their own font-size
for nested <small<
elements.
This line of text is meant to be treated as fine print.
For emphasizing a snippet of text with a heavier font-weight.
The following snippet of text is rendered as bold text.
For emphasizing a snippet of text with italics.
The following snippet of text is rendered as italicized text.
Feel free to use
and
in HTML5.
is meant to highlight words or phrases without conveying additional importance while
is mostly for voice, technical terms, etc.
Easily realign text to components with text alignment classes.
Left aligned text.
Center aligned text.
Right aligned text.
Left aligned text.
Center aligned text.
Right aligned text.
{% endhighlight %}Convey meaning through color with a handful of emphasis utility classes.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
...
...
...
...
{% endhighlight %}Stylized implementation of HTML's
element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title
attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.
For expanded text on long hover of an abbreviation, include the title
attribute with the
element.
An abbreviation of the word attribute is attr.
Add .initialism
to an abbreviation for a slightly smaller font-size.
HTML is the best thing since sliced bread.
Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with

.
For quoting blocks of content from another source within your document.
Wrap

around any HTML as the quote. For straight quotes we recommend a

.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Integer posuere erat a ante.
Style and content changes for simple variations on a standard blockquote.
Add
tag for identifying the source. Wrap the name of the source work in
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
{% endhighlight %}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous Source Title
Use .pull-right
for a floated, right-aligned blockquote.
...{% endhighlight %}
A list of items in which the order does not explicitly matter.
A list of items in which the order does explicitly matter.
Remove the default list-style
and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
Place all list items on a single line with inline-block
and some light padding.
A list of terms with their associated descriptions.
Make terms and descriptions in

line up side-by-side.
Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow
. In narrower viewports, they will change to the default stacked layout.
Wrap inline snippets of code with
.

should be wrapped as inline.

should be wrapped as inline.
{% endhighlight %}
Use

for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

Sample text here...

Sample text here...
{% endhighlight %}
You may optionally add the .pre-scrollable
class which will set a max-height of 350px and provide a y-axis scrollbar.
For basic styling—light padding and only horizontal dividers—add the base class .table
to any

. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Add any of the following classes to the .table
base class.
Use .table-striped
to add zebra-striping to any table row within the

via the :nth-child
CSS selector (not available in IE8).
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Add .table-bordered
for borders and rounded corners.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
Add .table-hover
to enable a hover state on table rows within a

.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
Add .table-condensed
to make tables more compact by cutting cell padding in half.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird |
Use contextual classes to color table rows.
| Class | Description |
|---|---|
.success
|
Indicates a successful or positive action. |
.error
|
Indicates a dangerous or potentially negative action. |
.warning
|
Indicates a warning that might need attention. |
.info
|
Used as an alternative to the default styles. |
| # | Product | Payment Taken | Status |
|---|---|---|---|
| 1 | TB - Monthly | 01/04/2012 | Approved |
| 2 | TB - Monthly | 02/04/2012 | Declined |
| 3 | TB - Monthly | 03/04/2012 | Pending |
Individual form controls automatically receive some global styling. By default, inputs are set to width: 100%;
.
Included with Bootstrap are optional form layouts for common use cases.
Add .form-inline
for left-aligned labels and inline-block controls for a compact layout.
Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:
.form-horizontal
to the form.control-group
.control-label
to the label.controls
for proper alignmentExamples of standard form controls supported in an example form layout.
Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
Requires the use of a specified type
at all times.
Form control which supports multiple lines of text. Change rows
attribute as necessary.
Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
Use .checkbox-inline
or .radio-inline
class to a series of checkboxes or radios for controls appear on the same line.
Use the default option or specify a multiple="multiple"
to show multiple options at once.
Provide feedback to users or visitors with basic feedback states on form controls and labels.
We remove the default outline
styles on some form controls and apply a box-shadow
in its place for :focus
.
Style inputs via default browser functionality with :invalid
. Specify a type
, add the required
attribute if the field is not optional, and (if applicable) specify a pattern
.
This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.
{% highlight html linenos %} {% endhighlight %}Add the disabled
attribute on an input to prevent user input and trigger a slightly different look.
Add the disabled
attribute to a <fieldset>
to disable all the controls within the <fieldset>
at once. Link buttons (with the
element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.
Bootstrap includes validation styles for error, warning, info, and success messages. To use:
.has-warning
, .has-error
, or .has-success
to the parent elementValidation styles are applied on a per-input basis. With horizontal forms, the
will always be styled.
Adding on top of existing browser controls, Bootstrap includes other useful form components.
Add text or buttons before, after, or on both sides of any text-based input. Use .input-group
with a .add-on
to prepend or append elements to an <input>
.
Avoid using <select>
elements here as they cannot be fully styled in WebKit browsers.
Add the relative form sizing classes to the `.input-group-addon`.
{% highlight html linenos %}Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon
, you'll need to use .input-group-btn
to wrap the buttons. This is required due to default browser styles that cannot be overridden.
Use relative sizing classes like .input-large
or match your inputs to the grid column sizes using .span*
classes.
Create larger or smaller form controls that match button sizes.
{% highlight html linenos %} {% endhighlight %}Use .col-span-1
to .col-span-12
for setting widths on inputs that match Bootstrap's grid system.
If you need multiple inputs on the same line, wrap them in the standard grid markup (with .row
and .col-span-*
classes). Each input should have it's own column and will expand to fill the available width automatically.
Present data in a form that's not editable without using actual form markup.
{% highlight html linenos %} Some value here {% endhighlight %}End a form with a group of actions (buttons). When placed within a .form-horizontal
, the buttons will automatically indent to line up with the form controls.
Inline and block level support for help text that appears around form controls.
Button styles can be applied to anything with the .btn
class applied. However, typically you'll want to apply these to only
and <button>
elements for the best rendering.
IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button
elements, rendering text gray with a nasty text-shadow that we cannot fix.
Fancy larger or smaller buttons? Add .btn-large
, .btn-small
, or .btn-mini
for additional sizes.
{% endhighlight %}
Create block level buttons—those that span the full width of a parent— by adding .btn-block
.
Make buttons look unclickable by fading them back 50%.
Add the disabled
attribute to <button>
buttons.
{% highlight html linenos %} {% endhighlight %}
Add the .disabled
class to
buttons.
We use .disabled
as a utility class here, similar to the common .active
class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
Use the .btn
class on an
, <button>
, or <input>
element.
As a best practice, we highly recommend matching using the <button>
element whenever possible to ensure matching cross-browser rendering.
Add classes to an
element to easily style images in any project. Rounded corners are not available in IE8.
Use the generic close icon for dismissing content like modals and alerts.
Float an element left
{% highlight html linenos %}Float an element right
{% highlight html linenos %}Clear the float
on any element. Utilizes the micro clearfix as popularized by Nicolas Gallagher.
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
| Class | Browser | |
|---|---|---|
.visible-print |
Hidden | Visible |
.hidden-print |
Visible | Hidden |
Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.
Resize your browser or load on different devices to test the above classes.
Green checkmarks indicate that class is visible in your current viewport.
Here, green checkmarks indicate that class is hidden in your current viewport.
Dozens of reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more.
Bootstrap comes with all 160 of Glyphicons Halflings set, all available in font formats for easy coloring, sizing, and placement.
Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.
Add the appropriate class to any inline element. All icon classes are prefixed with glyphicon-
for easy styling. To use, place the following code just about anywhere:
Want to change the icon color? Just change the color
of the parent element.
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
Heads up! Using icons without any additional content means the icons are not represented to screen reader users.
Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.
Wrap the dropdown's trigger and the dropdown menu within .dropdown
, or another element that declares position: relative;
. Then add the menu's HTML.
Add .pull-right
to a .dropdown-menu
to right align the dropdown menu.
Add .disabled
to a

in the dropdown to disable the link.
Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu
to any li
in an existing dropdown menu for automatic styling.
Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.
Wrap a series of buttons with .btn
in .btn-group
.
Combine sets of

into a

for more complex components.
Make a set of buttons appear vertically stacked rather than horizontally.
Make a group of buttons stretch at the same size to span the entire width of its parent. This only works with
elements as the <button>
doesn't pick up these styles.
Use any button to trigger a dropdown menu by placing it within a .btn-group
and providing the proper menu markup. Requires the Bootstrap dropdown plugin.
Turn a button into dropdown toggle with some basic markup changes.
Similarly, create split button dropdowns with the same markup changes, only with a separate button.
Button dropdowns work at any size: .btn-large
, .btn-small
, or .btn-mini
.
Trigger dropdown menus above elements by adding .dropup
to the parent.
Indicate the current page's location within a navigational hierarchy.
Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.
Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
{% highlight html linenos %} {% endhighlight %}Links are customizable for different circumstances. Use .disabled
for unclickable links and .active
to indicate the current page.
You can optionally swap out active or disabled anchors for
to remove click functionality while retaining intended styles.
Fancy larger or smaller pagination? Add .pagination-large
, .pagination-small
, or .pagination-mini
for additional sizes.
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
By default, the pager centers links.
{% highlight html linenos %} {% endhighlight %}Alternatively, you can align each link to the sides:
{% highlight html linenos %} {% endhighlight %}Pager links also use the general .disabled
utility class from the pagination.
Add any of the below mentioned modifier classes to change the appearance of a label.
Easily highlight new or unread items by adding a
to links, Bootstrap navs, and more.
When there are no new or unread items, badges will simply collapse (via CSS's :empty
selector) provided no content exists within.
Built-in styles are included for placing badges in active states in pill and list navigations.
A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
A simple shell for an h1
to appropriately space out and segment sections of content on a page. It can utilize the h1
's default small
, element as well most other components (with additional styles).
Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.
By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
{% highlight html linenos %} {% endhighlight %}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.
Wrap any text and an optional dismiss button in .alert
for a basic warning alert message. To ensure proper behavior across all devices, be sure to use <button>
element with the data-dismiss="alert"
data attribute.
For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block
.
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
...
Add optional classes to change an alert's connotation.
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in IE8-9 or older versions of Firefox. Internet Explorer 10 and below, as well as Opera 12, do not support animations.
Default progress bar with a vertical gradient.
Progress bars use some of the same button and alert classes for consistent styles.
Uses a gradient to create a striped effect. Not available in IE8.
Add .active
to .progress-striped
to animate the stripes right to left. Not available in all versions of IE.
Place multiple bars into the same .progress
to stack them.
Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
The default media allow to float a media object (images, video, audio) to the left or right of a content block.
With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.
Adding Glyphicon chevrons are automatically moved to the right.
Add the badges component to any list group item and it will automatically be positioned on the right.
Why not both?
Linkify list group items by using anchor tags instead of list items (that also means a parent

instead of an

. No need for individual parents around each element.
Add nearly any HTML within, even for linked list groups like the one below.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
By default, all the .panel
does is apply some basic border and padding to contain some content.
Easily add a heading to your panel with .panel-heading
. Use it on a

or any heading element (e.g.,

).
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
Easily include full-width list groups within any panel.
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
...
Use the well as a simple effect on an element to give it an inset effect.
Control padding and rounded corners with two optional modifier classes.
Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.
Plugins can be included individually (though some have required dependencies), or all at once. Do not attempt to include both. Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.
You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.
That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this: {% highlight js linenos %} $('body').off('.data-api') {% endhighlight %}
Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:
{% highlight js linenos %} $('body').off('.alert.data-api') {% endhighlight %}We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.
{% highlight js linenos %} $(".btn.danger").button("toggle").addClass("fat") {% endhighlight %}All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):
{% highlight js linenos %} $("#myModal").modal() // initialized with defaults $("#myModal").modal({ keyboard: false }) // initialized with no keyboard $("#myModal").modal('show') // initializes and invokes show immediately {% endhighlight %}Each plugin also exposes its raw constructor on a `Constructor` property: $.fn.popover.Constructor
. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('[rel=popover]').data('popover')
.
Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict
on the plugin you wish to revert the value of.
Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show
) is triggered at the start of an event, and its past participle form (ex. shown
) is trigger on the completion of an action.
All infinitive events provide preventDefault
functionality. This provides the ability to stop the execution of an action before it starts.
For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.
A few examples of the transition plugin:
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
A rendered modal with header, body, and set of actions in the footer.
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
{% highlight html linenos %} {% endhighlight %}Activate a modal without writing JavaScript. Set data-toggle="modal"
on a controller element, like a button, along with a data-target="#foo"
or href="#foo"
to target a specific modal to toggle.
Call a modal with id myModal
with a single line of JavaScript:
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-backdrop=""
.
| Name | type | default | description |
|---|---|---|---|
| backdrop | boolean | true | Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
| keyboard | boolean | true | Closes the modal when escape key is pressed |
| show | boolean | true | Shows the modal when initialized. |
| remote | path | false | If a remote url is provided, content will be loaded via jQuery's |
Activates your content as a modal. Accepts an optional options object
.
Manually toggles a modal.
{% highlight js linenos %}$('#myModal').modal('toggle'){% endhighlight %}Manually opens a modal.
{% highlight js linenos %}$('#myModal').modal('show'){% endhighlight %}Manually hides a modal.
{% highlight js linenos %}$('#myModal').modal('hide'){% endhighlight %}Bootstrap's modal class exposes a few events for hooking into modal functionality.
| Event | Description |
|---|---|
| show | This event fires immediately when the show instance method is called. |
| shown | This event is fired when the modal has been made visible to the user (will wait for css transitions to complete). |
| hide | This event is fired immediately when the hide instance method has been called. |
| hidden | This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete). |
Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.
Add data-toggle="dropdown"
to a link or button to toggle a dropdown.
To keep URLs intact, use the data-target
attribute instead of href="#"
.
Call the dropdowns via JavaScript:
{% highlight js linenos %} $('.dropdown-toggle').dropdown() {% endhighlight %}None
A programmatic api for toggling menus for a given navbar or tabbed navigation.
The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll"
to the element you want to spy on (most typically this would be the body) and data-target=".navbar"
to select which nav to use. You'll want to use scrollspy with a .nav
component.
Call the scrollspy via JavaScript:
{% highlight js linenos %} $('.navbar').scrollspy() {% endhighlight %}home
must correspond to something in the dom like

.
When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
{% highlight js linenos %} $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); {% endhighlight %}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-offset=""
.
| Name | type | default | description |
|---|---|---|---|
| offset | number | 10 | Pixels to offset from top when calculating position of scroll. |
| Event | Description |
|---|---|
| activate | This event fires whenever a new item becomes activated by the scrollspy. |
Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown.  Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
{% highlight js linenos %} $('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show'); }) {% endhighlight %}You can activate individual tabs in several ways:
{% highlight js linenos %} $('#myTab a[href="#profile"]').tab('show'); // Select tab by name $('#myTab a:first').tab('show'); // Select first tab $('#myTab a:last').tab('show'); // Select last tab $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed) {% endhighlight %}You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab"
or data-toggle="pill"
on an element. Adding the nav
and nav-tabs
classes to the tab ul
will apply the Bootstrap tab styling.
To make tabs fade in, add .fade
to each .tab-pane
.
Activates a tab element and content container. Tab should have either a data-target
or an href
targeting a container node in the DOM.
| Event | Description |
|---|---|
| show | This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
| shown | This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
Hover over the links below to see tooltips:
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
When using tooltips and popovers with the Bootstrap input groups, you'll have to set the container
(documented below) option to avoid unwanted side effects.
Trigger the tooltip via JavaScript:
{% highlight js linenos %} $('#example').tooltip(options) {% endhighlight %}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-animation=""
.
| Name | type | default | description |
|---|---|---|---|
| animation | boolean | true | apply a css fade transition to the tooltip |
| html | boolean | false | Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks. |
| placement | string | function | 'top' | how to position the tooltip - top | bottom | left | right |
| selector | string | false | If a selector is provided, tooltip objects will be delegated to the specified targets. |
| title | string | function | '' | default title value if `title` tag isn't present |
| trigger | string | 'hover focus' | how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger multiple, space seperated, trigger types. |
| delay | number | object | 0 |
delay showing and hiding the tooltip (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: |
| container | string | false | false |
Appends the tooltip to a specific element |
Attaches a tooltip handler to an element collection.
Reveals an element's tooltip.
{% highlight js linenos %}$('#element').tooltip('show'){% endhighlight %}Hides an element's tooltip.
{% highlight js linenos %}$('#element').tooltip('hide'){% endhighlight %}Toggles an element's tooltip.
{% highlight js linenos %}$('#element').tooltip('toggle'){% endhighlight %}Hides and destroys an element's tooltip.
{% highlight js linenos %}$('#element').tooltip('destroy'){% endhighlight %}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.
Four options are available: top, right, bottom, and left aligned.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
No markup shown as popovers are generated from JavaScript and content within a data
attribute.
Enable popovers via JavaScript:
{% highlight js linenos %}$('#example').popover(options){% endhighlight %}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-animation=""
.
| Name | type | default | description |
|---|---|---|---|
| animation | boolean | true | apply a css fade transition to the tooltip |
| html | boolean | false | Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks. |
| placement | string | function | 'right' | how to position the popover - top | bottom | left | right |
| selector | string | false | if a selector is provided, tooltip objects will be delegated to the specified targets |
| trigger | string | 'click' | how popover is triggered - click | hover | focus | manual |
| title | string | function | '' | default title value if `title` attribute isn't present |
| content | string | function | '' | default content value if `data-content` attribute isn't present |
| delay | number | object | 0 |
delay showing and hiding the popover (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: |
| container | string | false | false |
Appends the popover to a specific element |
For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
Initializes popovers for an element collection.
Reveals an elements popover.
{% highlight js linenos %}$('#element').popover('show'){% endhighlight %}Hides an elements popover.
{% highlight js linenos %}$('#element').popover('hide'){% endhighlight %}Toggles an elements popover.
{% highlight js linenos %}$('#element').popover('toggle'){% endhighlight %}Hides and destroys an element's popover.
{% highlight js linenos %}$('#element').popover('destroy'){% endhighlight %}Add dismiss functionality to all alert messages with this plugin.
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Enable dismissal of an alert via JavaScript:
{% highlight js linenos %}$(".alert").alert(){% endhighlight %}Just add data-dismiss="alert"
to your close button to automatically give an alert close functionality.
Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade
and .in
class already applied to them.
Closes an alert.
{% highlight js linenos %}$(".alert").alert('close'){% endhighlight %}Bootstrap's alert class exposes a few events for hooking into alert functionality.
| Event | Description |
|---|---|
| close | This event fires immediately when the close instance method is called. |
| closed | This event is fired when the alert has been closed (will wait for css transitions to complete). |
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
Add data-loading-text="Loading..."
to use a loading state on a button.
Add data-toggle="button"
to activate toggling on a single button.
Add data-toggle="buttons-checkbox"
for checkbox style toggling on btn-group.
Add data-toggle="buttons-radio"
for radio style toggling on btn-group.
Enable buttons via JavaScript:
{% highlight js linenos %} $('.nav-tabs').button() {% endhighlight %}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.
None
Toggles push state. Gives the button the appearance that it has been activated.
data-toggle
attribute.
Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text
.
autocomplete="off"
.
Resets button state - swaps text to original text.
Resets button state - swaps text to any data defined text state.
{% highlight html linenos %} {% endhighlight %}Get base styles and flexible support for collapsible components like accordions and navigation.
* Requires the Transitions plugin to be included.
Using the collapse plugin, we built a simple accordion style widget:
You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.
{% highlight html linenos %}Just add data-toggle="collapse"
and a data-target
to element to automatically assign control of a collapsible element. The data-target
attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse
to the collapsible element. If you'd like it to default open, add the additional class in
.
To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector"
. Refer to the demo to see this in action.
Enable manually with:
{% highlight js linenos %} $(".collapse").collapse() {% endhighlight %}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-parent=""
.
| Name | type | default | description |
|---|---|---|---|
| parent | selector | false | If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior) |
| toggle | boolean | true | Toggles the collapsible element on invocation |
Activates your content as a collapsible element. Accepts an optional options object
.
{% highlight js linenos %}
$('#myCollapsible').collapse({
toggle: false
})
{% endhighlight %}
Toggles a collapsible element to shown or hidden.
Shows a collapsible element.
Hides a collapsible element.
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
| Event | Description |
|---|---|
| show | This event fires immediately when the show instance method is called. |
| shown | This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete). |
| hide |
This event is fired immediately when the hide method has been called.
|
| hidden | This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete). |
The slideshow below shows a generic plugin and component for cycling through elements like a carousel.
Add captions to your slides easily with the .carousel-caption
element within any .item
. Place just about any optional HTML within there and it will be automatically aligned and formatted.
Captions are hidden in mobile views and shown with viewports greater than 768px wide.
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
.
Call carousel manually with:
{% highlight js linenos %} $('.carousel').carousel() {% endhighlight %}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-interval=""
.
| Name | type | default | description |
|---|---|---|---|
| interval | number | 5000 | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. |
| pause | string | "hover" | Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. |
Initializes the carousel with an optional options object
and starts cycling through items.
Cycles through the carousel items from left to right.
Stops the carousel from cycling through items.
Cycles the carousel to a particular frame (0 based, similar to an array).
Cycles to the previous item.
Cycles to the next item.
Bootstrap's carousel class exposes two events for hooking into carousel functionality.
| Event | Description |
|---|---|
| slide | This event fires immediately when the slide instance method is invoked. |
| slid | This event is fired when the carousel has completed its slide transition. |
A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.
You'll want to set autocomplete="off"
to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.
Add data attributes to register an element with typeahead functionality as shown in the example above.
Call the typeahead manually with:
{% highlight js linenos %} $('.typeahead').typeahead() {% endhighlight %}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-source=""
.
| Name | type | default | description |
|---|---|---|---|
| source | array, function | [ ] | The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument. |
| items | number | 8 | The max number of items to display in the dropdown. |
| minLength | number | 1 | The minimum character length needed before triggering autocomplete suggestions |
| matcher | function | case insensitive | The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query . Return a boolean true if query is a match. |
| sorter | function | exact match, case sensitive, case insensitive |
Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query . |
| updater | function | returns selected item | The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance. |
| highlighter | function | highlights all default matches | Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html. |
Initializes an input with a typeahead.
The subnavigation on the left is a live demo of the affix plugin.
To easily add affix behavior to any element, just add data-spy="affix"
to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.
affix
, affix-top
, and affix-bottom
. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.
Call the affix plugin via JavaScript:
{% highlight js linenos %} $('#navbar').affix() {% endhighlight %}When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:
{% highlight js linenos %} $('[data-spy="affix"]').each(function () { $(this).affix('refresh') }); {% endhighlight %}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-offset-top="200"
.
| Name | type | default | description |
|---|---|---|---|
| offset | number | function | object | 10 | 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 left directions. To listen for a single direction, or multiple unique offsets, just provide an object offset: { x: 10 } . Use a function when you need to dynamically provide an offset (useful for some responsive designs). |


Online S3 Project
Guide
Toolbox
Contact
Online S3 Platform
End user satisfaction survey
About
Guide
Related documents
Access to application
Online S3 Platform
Toolbox
Monitoring & Evaluation
6.4 End user satisfaction survey
Example survey
Survey Template
Survey Platforms
Google Forms
SurveyGizmo
SurveyMonkey
Qualtrics


Japan’s TradeMin: An extra budget of around JPY 10 tln is needed
by Dhwani MehtaJapanese Trade Minister was on the wires last minutes, via Reuters, also voicing the need for an extra budget of around JPY 10 trillion.
Meanwhile, Japan’s lower house of parliament approved on Tuesday a limited trade deal agreed between the US and Japan. However, uncertainty still prevails over the US tariffs on the Japanese auto imports.
“Japan has estimated the initial deal will boost its economy by about 0.8% over the next 10-20 years, when the benefits fully kick in”, per Reuters.
The Yen stays bid in early Europe, keeping the USD/JPY pair in a narrow range around 108.60 levels, as markets trade cautiously amid trade pessimism and US President Trump’s latest tweet on Fed.


{% extends 'compasweb/base/base.html' %} {% block page_header %}
This application will simulate the evolution of a user-specified binary using COMPAS and produce some plots of the binary evolution. The plots and the data are available for download.
Enter the parameters for the binary you want to evolve below. A description of each parameter is given next to it and the units are given in brackets. The App will check that the requested parameters are within the valid ranges that COMPAS supports.
The "Advanced" section allows you to customise the prescriptions used to model processes like common envelope evolution and supernovae within COMPAS.
Click "Run" to evolve the binary!


Nadal ready to lead Spain at new-look Davis Cup
MADRID (AP) - Top-ranked Rafael Nadal has arrived in Madrid to lead Spain in the new-look Davis Cup Finals.
“It’s a new competition and we must be focused,” Nadal said Sunday. “The first thing is to get familiar with it and to know that each match is vital.”
Spain opens against Russia on Tuesday before facing defending champion Croatia on Wednesday in the men’s international team tournament.
TOP STORIES
Accused thieves, child-porn suspects, suspected murderers among DACA recipients: Report
Woman fatally shot during party at business park
Franklin Graham calls on nation to pray for Trump as impeachment effort gains speed
The matches will be played on hard courts - not Nadal’s preferred clay - at the “Caja Mágica” (Magic Box) tennis complex.
“We have been put in a tough group and the surface is obviously not our favorite, but I believe that we are all motivated to be as well prepared as possible,” Nadal said.
“Today was my first day of training and I have been told that the team has been training well, so we hope that we are all in good shape and we can compete well.”
Nadal was eliminated in the group stage of the ATP Finals on Friday in London.
The 19-time Grand Slam winner will be joined by Feliciano López, Roberto Bautista Agut, Pablo Carreno Busta, and Marcel Granollers.
Spain has won the Davis Cup five times, but its last title came in 2011.
The Davis Cup has completely overhauled its format this year, concentrating all its matches in a World Cup-style format played over one week at one site.
The 18 teams will play in six groups of three, with the group winners advancing to the knockout stage along with the two best second-place teams.
In past years, the competition featured head-to-head matchups played at varied sites over four weekends throughout the year.
More AP Tennis: https://www.apnews.com/apf-Tennis and https://twitter.com/AP_Sports
Sign up for Daily Newsletters
Copyright © 2019 The Washington Times, LLC.
Please read our comment policy before commenting.


Kitura-WebSocket
Kitura-WebSocket provides Kitura based servers the ability to receive and send messages to clients using the WebSocket protocol (RFC 6455). It is compatible with a variety of WebSocket clients, including:
- The built-in WebSocket support in the Chrome, FireFox, and Safari browsers.
- The NPM websocket package.
Kitura-WebSocket supports version thirteen of the WebSocket protocol.
Both the WS and WSS (SSL/TLS secured WS) protocols are supported by Kitura-WebSocket. To enable WSS set up your Kitura based server for SSL/TLS support. See the tutorial Enabling SSL/TLS on your Kitura server on www.kitura.io for details.
Table of Contents
- Usage
- API Overview
- Autobahn TestSuite
- Example - Simple
- Example - Advanced
- API Documentation
- Community
- License
Usage
Add dependencies
Add the Kitura-WebSocket
package to the dependencies within your application’s Package.swift
file. Substitute "x.x.x"
with the latest Kitura-WebSocket
release.
.package(url: "https://github.com/Kitura/Kitura-WebSocket.git", from: "x.x.x")
Add Kitura-WebSocket
to your target’s dependencies:
.target(name: "example", dependencies: ["Kitura-WebSocket"]),
Import package
import KituraWebSocket
API Overview
The following is an overview of the Kitura-WebSocket APIs, for more information see the API reference.
When using the WebSocket protocol, clients connect to WebSocket services running on a particular server. WebSocket services are identified on a particular server via a path. This path is sent in the upgrade request used to upgrade a connection from HTTP 1.1 to WebSocket.
The Kitura-WebSocket API reflects that interaction using the class WebSocketConnection
which represents a WebSocket client’s connection to a service and the protocol WebSocketService
which is implemented by classes that are WebSocket services.
A specific WebSocketConnection
object is connected to a specific WebSocketService
instance. On the other hand a specific WebSocketService
instance is connected to many WebSocketConnection
objects.
WebSocketConnection
The WebSocketConnection class provides:
- Functions to send text and binary messages to the client.
WebSocketConnection.send(message: Data)
WebSocketConnection.send(message: String)
- Functions to close the connection gracefully and forcefully.
WebSocketConnection.close(reason: WebSocketCloseReasonCode?=nil, description: String?=nil)
WebSocketConnection.drop(reason: WebSocketCloseReasonCode?=nil, description: String?=nil)
In both close()
and drop()
, the WebSocketCloseReasonCode
enum provides the standard WebSocket close reason codes with the ability to specify application specific ones.
- A unique identifier that can be used to help manage the collection of
WebSocketConnection
objects connected to aWebSocketService
.
id: String
WebSocketService
The WebSocketService protocol enables Kitura-WebSocket to notify a WebSocket service about a set of events that occur. These events include:
- A client has connected to the WebSocketService.
connected(connection: WebSocketConnection)
- A client has disconnected from the WebSocketService.
disconnected(connection: WebSocketConnection, reason: WebSocketCloseReasonCode)
The reason parameter contains the reason code associated with the client disconnecting. It may come from either a close command sent by the client, or be determined by Kitura-WebSocket if the connection’s socket suddenly was closed.
- A binary message was received from a client.
received(message: Data, from: WebSocketConnection)
The message parameter contains the bytes of the message in the form of a Data struct.
- A text message was received from a client.
received(message: String, from: WebSocketConnection)
The message parameter contains the message in the form of a String.
Detect and close broken connections
WebSocketService protocol has an optional Int property called connectionTimeout
. This is the time in seconds that a connection must be unresponsive to be automatically closed by the server. If the WebSocket server has not received any messages in the first half of the timeout time it will ping the connection. If a pong is not received in the remaining half of the timeout, the connection will be closed with a 1006 (connection closed abnormally) status code. The connectionTimeout
defaults to nil
, meaning no connection cleanup will take place.
You can set the connectionTimeout
by assigning a value to the property within your WebSocketService class:
let connectionTimeout: Int? = 60
WebSocket
Classes which implement the WebSocketService
protocol are registered with the server as follows:
WebSocket.register(service: WebSocketService, onPath: String)
This function is passed the WebSocketService
being registered along with the path it is being registered on.
A registered WebSocketService
can be unregistered from the server as follows:
WebSocket.unregister(path: String)
This function is passed the path which the WebSocketService
being unregistered was registered on.
Autobahn TestSuite
Kitura-WebSocket complies to the Autobahn Testsuite for web sockets. To create an echo server and run this test suite against it, follow the instructions here.
Example - Simple
This example is a simplistic chat service to demonstrate how to use the Kitura-WebSocket APIs. The server side is written in Swift using Kitura-WebSocket and the client side is written in JavaScript using Node.js and the websocket NPM package. The instructions below show you how to create the files for both the server and client and then how to compile and run the application.
Pre-requisites
In order to run the client one must have Node.js installed.
The server
The server keeps track of the clients that have connected to it and echoes all text messages sent to it to all of the clients that have connected to it, with the exception of the client that sent the message.
You will need to create the server’s directory structure to be something like this:
ServerDirectory ├── Package.swift └── Sources └── ChatServer ├── ChatService.swift └── main.swift
Create a Package.swift
file with the following content, substituting "x.x.x"
with the latest releases of Kitura, HeliumLogger and Kitura-WebSocket:
// swift-tools-version:4.0
import PackageDescription
let package = Package(
name: "ChatServer",
dependencies: [
.package(url: "https://github.com/Kitura/Kitura.git", .upToNextMinor(from: "x.x.x")),
.package(url: "https://github.com/Kitura/HeliumLogger.git", from: "x.x.x"),
.package(url: "https://github.com/Kitura/Kitura-WebSocket.git", from: "x.x.x")
],
targets: [
.target(
name: "ChatServer",
dependencies: ["Kitura", "HeliumLogger", "Kitura-WebSocket"]),
]
)
The HeliumLogger package, while strictly not required, was added to enable logging.
Create a ChatService.swift
file which contains:
// ChatServer is a very simple chat server
import Foundation
import KituraWebSocket
class ChatService: WebSocketService {
private var connections = [String: WebSocketConnection]()
let connectionTimeout: Int? = 60
public func connected(connection: WebSocketConnection) {
connections[connection.id] = connection
}
public func disconnected(connection: WebSocketConnection, reason: WebSocketCloseReasonCode) {
connections.removeValue(forKey: connection.id)
}
public func received(message: Data, from: WebSocketConnection) {
from.close(reason: .invalidDataType, description: "Chat-Server only accepts text messages")
connections.removeValue(forKey: from.id)
}
public func received(message: String, from: WebSocketConnection) {
for (connectionId, connection) in connections {
if connectionId != from.id {
connection.send(message: message)
}
}
}
}
The class has a Dictionary, connections, which is used to keep track of the connections of all of the connected clients. The Dictionary is
maintained by the connected
and disconnected
functions, which are, respectively, adding and removing connections from the dictionary.
The received
function, which receives binary messages, is rejecting the message, closing the client connection and removing the connection
from the set of known connections.
Lastly, the received
function, which receives text messages, simply echoes the message received to all clients except the one who sent the message.
It should be noted that all of these functions can be invoked from many threads simultaneously. In real applications, one should add locking around the access of non-thread safe artifacts of the application such as the connections Dictionary in this very simplistic example.
Create a main.swift
file which contains:
// ChatServer is a very simple chat server
import Foundation
import KituraNet
import KituraWebSocket
import HeliumLogger
import LoggerAPI
// Using an implementation for a Logger
HeliumLogger.use(.info)
WebSocket.register(service: ChatService(), onPath: "chat")
class ChatServerDelegate: ServerDelegate {
public func handle(request: ServerRequest, response: ServerResponse) {}
}
// Add HTTP Server to listen on port 8080
let server = HTTP.createServer()
server.delegate = ChatServerDelegate()
do {
try server.listen(on: 8080)
ListenerGroup.waitForListeners()
} catch {
Log.error("Error listening on port 8080: \(error).")
}
In the main.swift file:
- The HeliumLogger is set up to log info, warning, and error type messages.
- The ChatService defined in the ChatService.swift file is registered on the path chat.
- An HTTP server is created and setup to listen on port 8080.
With this server set up clients should connect to the chat service as ws://host:8080/chat, where host is the host running the server.
The client
The client has a simple command line interface. At startup one passes the host and port number. The client simply reads messages to be sent from the terminal and displays messages received on the terminal as well.
You will need to create the client’s directory structure to be something like this:
ClientDirectory ├── package.json └── chat.js
Create a package.json
file which, at a minimum, contains:
{
"name": "chat",
"description": "Simple chat server client",
"version": "0.0.1",
"engines": {
"node": ">=0.8.0"
},
"dependencies": {
"websocket": "^1.0.23"
}
}
Create a chat.js
file which contains:
/* main file of Simple Chat Server Client */
var readline = require('readline');
var WebSocketClient = require('websocket').client
var host = process.argv[2];
rl = readline.createInterface(process.stdin, process.stdout);
rl.setPrompt('> ');
rl.prompt();
var client = new WebSocketClient();
client.on('connectFailed', function(error) {
console.log('Connect Error: ' + error.toString());
process.exit();
});
client.on('connect', function(connection) {
connection.on('error', function(error) {
console.log("Connection Error: " + error.toString());
process.exit();
});
connection.on('close', function(reasonCode, description) {
console.log('chat Connection Closed. Code=' + reasonCode + ' (' + description +')');
});
connection.on('message', function(message) {
if (message.type === 'utf8') {
console.log('\r=> ' + message.utf8Data);
rl.prompt();
}
});
rl.on('line', function(line) {
connection.sendUTF(line);
rl.prompt();
});
rl.on('close', function() {
connection.close();
console.log('Have a great day!');
process.exit(0);
});
rl.prompt();
});
client.connect("ws://" + host +"/chat", "chat");
Building and running the example
To build the server, in the server directory, type:
swift build
To run the server, in the same directory, type:
.build/debug/ChatServer
The server will now be up and running. The informational log message below will be displayed:
[INFO] [HTTPServer.swift:124 listen(on:)] Listening on port 8080
Setting up and running the client
To setup the client, in the client directory, simply:
npm install
That will install the websocket package.
To run the client, again in the client directory, run:
node chat.js host:8080
Where host is the hostname of the host on which the server is running, e.g. if your server is running on the localhost run:
node chat.js localhost:8080
As described above, the server echoes all text messages sent to it to all of the clients that have connected to it, with the exception of the client that sent the message. Therefore, in order to see the example in action you will need to connect more than one client to the server. The client can be run in several terminal windows on the same computer. You can then enter a message on one client and see it appear on another client and vice versa.
Example - Advanced
For a more complete example please see Kitura-Sample.
API Documentation
For more information visit our API reference.
Community
We love to talk server-side Swift, and Kitura. Join our Slack to meet the team!
License
This library is licensed under Apache 2.0. Full license text is available in LICENSE.


DataTime is capable of fixing this problem using the GoogleAPI Open Images used for object detection ,so DataTime takes all these images of the object detection and extract all the bounding boxes by crop them to create a powerfull image classification dataset but not only that, DataTime is capable of generating what it ever your number data is and this is a good point of generating a BigData images.
Data Collection also is one of the most important things in Machine Learning & Deep Learning tasks, so we can fix that problem with DataTime using an interactive and dynamic dashboard which i developed and you can call it with an built-in CLI command called DataDash that takes few arguments.
GitHub Repository


Detects use of the non-existent
=*
,
=!
and
=-
operators that are probably typos.
Corresponds to
suspicious_assignment_formatting
lint from Rust Clippy.


The minimal inhibitory concentrations (MICs) of O. citriodorum, O. basilicum var. thyrsiflora and O. basilicum var. purpureum essential oils on selected Gram-positive, Gram-negative bacteria and fungi. Antibiotic-resistant E. coli dhpα-pUC18 strain was used. For bacteria and fungi strains and other details, see Methods. *Antibiotic-resistant E. coli dhpα-pUC18 strain
) )Fig. 1
)


Only Firefox after 60 are supported now
Hint of v1.3.2: Please re-install backend to make ScrapBee safer
What's ScrapBee?
ScrapBee is a Firefox Quantum extension trying to inherit some properties of ScrapBook,
at least, it can read/write data left over from ScrapBook (of course, we can create new). For ScrapBook do not support Firefox Quantum, ScrapBee is expected to be
an extension acts like ScrapBook under Firefox Quantum.
With ScrapBee, you can save web page scraps to local storage, and manage scraps in browser sidebar。
What's Rdf?
Rdf is ScrapBee/ScrapBook's data file in which properties of scraps stored in.
Install/Setup
After ScrapBee installed, please just finish the Initiate steps before using ScrapBee.
How to use?
Click on ScrapBee Icon, ScrapBee will be opened in sidebar(Mark1), create folders in sidebar if needed.(Mark2)
Full load the page you want to capture, click on menu item "Capture Page" in content menu to capture the page(Mark3)
You can also save selected part of the page, and click on menu item Capture Selection to save it(Mark4)
When you are capturing content, a entity will be showed up in sidebar(Mark5),
and it's icon will be showed in status waiting until capture finished, then you can open local content(Mark6) by
clicking on it, you can also open origin URL by click on the origin URL button(Mark7).
Be Ware
Whatever you are capturing, please keep ScrapBee opened in sidebar, entity of scraps captured will be saved to position in sidebar currently selected(if no folder/entity selected, it will be saved as top level). Also, you can move entities around by dragging them.
Trouble Shooting
Port
If ScrapBee stop working, and if you see error message in Log window like:
error: listen tcp :9900: bind: address already in use
Please try to kill the process binds on that port manually, e.g. under Linux you can do:
fuser -k 9900/tcp
Or try another backend port in Settings
File system permission
Please do not register rdfs under a directory without read/write permission for current user,
e.g. common users have no write permission of Windows root directory like c:\, but register rdfs
in a sub directory of it like c:\foobar will work in general.
Reported as Trojan malware
Backend of ScrapBee is likely treated as Trojan by scanners, please add ScrapBee to white list of scanners to prevent miss-block/mis-kill, please contact me if you have a better solution。
Download installation scripts fails
If you can not download the installation scripts for some reason, e.g. mis-blocked by security tools.
Please try to re-download the backend:
Close Firefox->Delete files under “USER-DOWNLOAD-DIRECTORY/scrapbee/”->Start Firefox->Download again
If this not helps, please create the scripts manually in “USER-DOWNLOAD-DIRECTORY/scrapbee/”:
scrapbee_backend.json: (Important: replace "USER-DOWNLOAD-DIRECTORY" to your real USER DOWNLOAD DIRECTORY)
{
"allowed_extensions": [
<EMAIL_ADDRESS>],
"description": "Scrapbee backend",
"name": "scrapbee_backend",
"path": "USER-DOWNLOAD-DIRECTORY/scrapbee/scrapbee_backend",
"type": "stdio"
}
install.bat(Windows):
reg delete "HKEY_CURRENT_USER\Software\Mozilla\NativeMessagingHosts\scrapbee_backend" /f
reg add "HKEY_CURRENT_USER\Software\Mozilla\NativeMessagingHosts\scrapbee_backend" /d %USERPROFILE%\Downloads\scrapbee\scrapbee_backend.json /f
echo done
pause
install.sh(Linux)
#!/bin/bash
chmod +x scrapbee_backend
dest="${HOME}/.mozilla/native-messaging-hosts"
if [ ! -d "$dest" ];then
mkdir -p "$dest"
fi
cp scrapbee_backend.json "$dest"
echo done
install.sh(Mac)
#!/bin/bash
chmod +x scrapbee_backend
dest="${HOME}/Library/Application Support/Mozilla/NativeMessagingHosts"
if [ ! -d $dest ];then
mkdir -p $dest
fi
cp scrapbee_backend.json $dest
echo done
STILL DO NOT WORK?
Check the log, there are maybe infomation shows what happend.
Restart Firefox, this helps sometime.
Or you can email us to<EMAIL_ADDRESS>Or you can make questions in our github repo<EMAIL_ADDRESS>BACKUP
ScrapBee provides no backup function, please backup rdfs and other data files manually often :).


← Open News After Party toolkit
How to host a brown-bag session
Brown bag sessions are traditionally held over a shared lunch hour and participants are encouraged to bring their own lunch. You may want to incentivize participation by asking your bosses to let you order pizza or dessert or even just try bringing candy. Remember journalists will eat that week-old corner slice of birthday cake leftover in the breakroom: the bar here is pretty low.
- That being said, you should ask around and make sure your order is inclusive of folks’ food restrictions and preferences. Some common dietary preferences or restrictions include gluten-free, vegetarian and/or vegan, pork-free, nut-free and dairy-free (obviously not a comprehensive list, but these are some common ones to check for).
There are several ways you can decide your topic for your brown bag lunch session. You may want to simply give a more public version of the memo you wrote for your leadership team: reviewing the top themes and takeaways then sharing your suggestions. You may want to do a deeper dive on a narrow topic. You may want to team up with others who attended the same event and do a quick round of 5-minute Lightning-style talks.
- Try to think in terms of goals for your colleagues: should they be trying a new skill immediately? Should they be ready to collaborate with a new team?
Consider who you are targeting with this session: is this meant to be a summary of what you learned with everyone across the newsroom in mind? Is it meant to help two teams better work together on projects moving forward? Is it meant to share story ideas with editors and reporters?
Create an agenda for your session and send it out at least 1 week in advance. Send an email or Slack reminder 1 day before your session and about 30 minutes before. This helps people plan and see in advance what they might miss if they skip your session!
- Also be very clear with folks about whether lunch will be provided or whether they are expected/invited to bring their own. (It’s a little chaotic when there is confusion over this! You don’t want to distract from the message and takeaways from your session)
Decide how you want to make the session available to folks who are not in the office that day or who get deterred at the last minute by breaking news: will you record the session? send your slides and handouts around after via email? Can remote staff dial in to hear and see your screenshare? Will there be a repeat session later in the day or week for the night and weekend teams?
Remember to book a conference room and set the reservation for 15 minutes before your session is going to start (11:45 for a 12 meeting, etc) if at all possible. This will give you the opportunity to get set up if you are bringing in food, test your slides or visuals, etc. If you can’t get that 15 minute window, find another time to test your AV needs. Basically do anything you can to avoid losing 5-10 minutes of your actual session time to finding a dongle or figuring out how to get your slides on screen.
Make handouts (see the next section of this guide for more tips!) and have them printed. If you’re trying to save the planet, just email the handouts or slides around to your team at the start of your session.
Follow up immediately after your session. Make your materials available via email, Slack, and any shared drives like Dropbox or Google. Make sure your materials are available to the night shift, the weekend team, and any remote folks.
This resource is part of the OpenNews After Party toolkit, developed by Emma Carew Grovum. It’s meant to help you get the most out of SRCCON—or any journalism event—and share what you learn with your own organization. The toolkit is licensed CC BY-SA 4.0, and we’d love to see you use or adapt it for your own event—all we need is a link back here.
We’d also be thrilled to hear how you put what you learn into practice, so please tweet us at #OpenNewsAfterParty, or if you have any questions, let us know!


Barbara Delapa
Democrat
Freelance Writer. Writer Access
Master of Public Administration Master of Science in Occupational Therapy Bachelor of Arts in Theatre
80205
Donations: John Hickenlooper for Senate Kamala Harris for President Amy McGrath for Senate Volunteer: Andrew Romanoff for Senate Proposition 112
American Occupational Therapy Association Association for Corporate Health Risk Management One World Singers Loyola Catholic Church Care for the Common Home Team
Activities at the Association for Corporate Health Risk Management include working on the Health Data Analytics Team; editing white papers and other narratives; developing and presenting webinar presentations on employee total health and wellness. Activities for the Loyola Catholic Church Care for the Common Home team included outreach for Engines Off program to minimize vehicle idling; parishioner outreach; grant research and applications; interview with Positive Energy Works; webinar development and presentation.
I would be honored to serve on the Redistricting Commission because, first and foremost, I have a deep love and appreciation for Colorado. The overwhelming passing of Amendments Y and Z are proof that our residents care deeply about equality, fairness, and the true democratic process. We are a state that values diversity of thought and concurrently the need to respect those differences to find a common ground. I have lived and thrived in Colorado since I was four years old. Therefore, it is my sincere wish that I return the favor and use every skill that I have to assist our residents in making their communities, as well as those of their neighbors, better places to live, work, and flourish.
If selected as a Colorado Redistricting Commissioner, I commit to using all skills I have learned through academic education, continuing education, and personal/professional experience to help my fellow Coloradans reach consensus. My academic degrees are in Public Administration, Occupational Therapy, and Theatre. Although these are three very different degrees, they have exposed me to different ways of thinking, different ways of relating to the world, and different values. The common thread in all of my degrees is the paramount importance of putting yourself in someone else’s shoes. This is a critical component of gaining consensus. In addition, I plan to: • Establish Trust: following through with requests, being open and honest, and being prepared. • Listen to all public comments, my fellow Commissioners, and Commission administrators. • Ask questions: to get clarification, to learn about concerns, to understand the issues. • Research all related documents (including maps, regulations, procedures) with abandon-and subsequently effectively explain them, so that stakeholders have the information that they need to reach consensus. • Find a common ground: by observing agreements as well as disagreements, confirming similarities in priorities, making respectful suggestions to all parties concerned. • And finally, to lead by example. My ability to be fair and impartial is rooted in the Golden Rule. “Treat others the way you would like to be treated.” I have been very fortunate in my professional and volunteer endeavors in public, private, and non-profit organizations. These varied experiences have merged with my inherent desire to help others and my strong work ethic. The result is a deep respect for diverse opinions and a never-ending faith we can all work together to create something that is bigger than ourselves. Another benefit that comes out of my professional and volunteer endeavors is the desire and ability to listen with respect and concern to those who may be uncomfortable communicating in the public arena. Similarly, there will undoubtedly be those who express their opinions in an overly-assertive or forceful manner. I will set the example by communicating in a respectful manner to get to the issues at hand. Along with my fellow commissioners, I will assure that those individuals who may be less assertive are also afforded the chance to speak. The goals and required procedures of the Redistricting Commission are guided by Amendments Y and Z. My experiences at University of Colorado in Public Administration and my skills in regulatory analysis at the State of Colorado have prepared me well in ensuring that stakeholder interests, however strong, will stay within all related mandates and regulations.
I have developed and sharpened my analytical skills through the health sciences as well as the social/political sciences in relation to my public administration degree. I am abled to take statistical data, summarize it, and understand it. Most of all, I can make logical conclusions and, through collaboration and communication with others, make a reasonable determination on how it may affect a person or a group of people.
Female


{% extends "layout.html" %} {% block content %} Add league player: add a player to the league Remove league player: remove a player from the league {% endblock %}