For those that missed it around the holidays last year, the Disney Parks Blog recently used the Before/After plugin to show some dramatic differences in Walt Disney World’s Tomorrowland from 1971 to today. The plugin was also used in 2013 to showcase differences in Fantasyland in the blog’s Then and Now series.
An abridged list of the most commonly used Bootstrap code and features (by me)
Over the past couple of months, I’ve been exploring and getting familiar with Bootstrap. During this time I’ve been keeping notes on some of the sticking points I encountered, along with useful tips and commonly used features I’ve learned from testing Bootstrap and reading various online tutorials. Here I present a quick reference of sorts of what I’ve found to be the most useful, and frequently used, parts of Bootstrap. If you find an error, or would like me to add something that you find useful, post a comment or email me.
- Text alignment classes:
.text-justify. These map to the CSS text-align property. Example:
<p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p><p class="text-justify">Justified text.</p>
- Paragraphs (and presumably other text elements) can be make to stand out with the
.leadclass, which sets the font size and weight, line-height, and bottom margin.
- In headings (
<h1>-<h6>) you can create lighter, secondary text with a generic
<small>tag or the .small class.
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
- To have Bootstrap remove the default styling on a list (ordered and unordered), add the
.list-unstyledclass. Note that this only applies to immediate children list items, meaning you will need to add the class for any nested lists as well. Example:
- Display list items horizontally using the
.list-inlineclass. This uses display:inline-block and some padding. Example:
- Make description lists (a.k.a definiton lists) two columns by using the
- For basic styling – light padding and only horizontal dividers – add the base class
- For zebra-striping rows, add the class
.table-stripedto the table.
- For borders on all sides of the table and cells, add the class
.table-borderedto the table.
- To enable a hover state on table rows within a
<tbody>, add the
.table-hoverclass to the table.
- To make tables more compact by cutting cell padding in half, add the
.table-condensedclass to the table.
- Contextual classes for table rows or cells:
- Create responsive tables by wrapping any table in
.table-responsiveto make them scroll horizontally on small devices (< 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
- Bootstrap has three main form layouts. Normal (vertical with labels above inputs), horizontal (labels to the left of inputs), and inline (like horizontal but with form controls not using 100% width)
- Wrap form controls (label, input, textarea, select) in divs and give the div the class
.form-group(Note: checkboxes and radio buttons instead get the checkbox or radio class respectively). This sets extra bottom margin on grouped form elements and allows changing orientation more easily. Don’t forget to add labels to your controls.
.form-inlineto your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
- Give form controls (input, textarea, select) the class
.form-controlto pickup Bootstrap styling.
- In form inputs you can use
.input-smfor taller or shorter form controls.
- Use the
.radio-inlineclasses on a series of checkboxes or radios for controls that appear on the same line.
- Style buttons with the
- You can also add
<button type="button" class="btn btn-danger">Danger</button>
- Button size classes:
.btn-xs. For block level (full-width) buttons, use
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
- You can also add
- All textual <input>, <textarea>, and <select> elements with the
.form-controlclass are set to width: 100%; by default.
- Use Bootstrap’s predefined grid classes to align labels and groups of form controls in a horizontal layout by adding
.form-horizontalto the form. Doing so changes
.form-groupsto behave as grid rows, so no need for
- Give form controls the class
.form-control. This applies various styles including 100% width.
- Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
- Images can be made responsive by adding the
.img-responsiveclass which add a max-width:100% and height:auto;. You can also give images shapes with the
- Rows (typically divs with the class
.row) must be placed within a
.container-fluid(full-width) for proper alignment and padding.
- Grid columns are created by specifying the number of twelve available columns you wish to span. Use rows to create horizontal groups of columns. Columns should total no more than 12 per row per size. Example:
<div class="col-md-8">.col-md-8</div><div class="col-md-4">.col-md-4</div>
- Content should be placed within columns, and only columns may be children of rows.
- Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any
.col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a
.col-lg-xclass is not present. Columns stack on smaller screens. Don’t want stacking? Apply classes for smaller resolutions in addition to the larger resolutions like
<div class="col-xs-6 col-md-4">.
- Columns can be moved to the right using:
.col-lg-offset-*. These classes increase the left margin of a column by X columns. For example,
.col-md-offset-4moves the column over by four columns. Another example,
<div class="col-md-6 col-md-offset-3">moves a six column wide column over by three columns.
- The order of columns can be changed via the
.col-md-push-*(pushes to the right) and
.col-md-pull-*(pulls to the left) classes.
- Easily center a page’s contents by wrapping it in an element (e.g. div) with the
.containerclass. Containers set width at various media query breakpoints to match the Bootstrap grid system.
- For multi-line blocks of code, you can use the
.pre-scrollableclass to create a scrollable, 350px (max) tall block.
- General purpose text color classes:
- General purpose background color classes:
- Floating left and right can be accomplished with the
- The class
.sr-onlywill hide all elements with the class to all devices except screen readers.
- Mobile specific classes:
- Visible only on the specified screen size:
.visible-*-inline-block. So, for extra small (xs) screens for example, the available
- (Deprecated as of 3.2.0, but still usable) Visible only on the specified screen size:
- Hidden only on the specified screen size:
- Visible only on the specified screen size:
- Printer classes:
.visible-print(deprecated as of 3.2.0) and
- Current media query breakpoint widths (in pixels): xs < 768, sm >=768, md >=992, lg >=1200.
- To ensure proper rendering and touch zooming, add the viewport meta tag to your
<meta name="viewport" content="width=device-width, initial-scale=1">. To disable zooming (not recommended), you can add the parameters user-scalable=no for a more app-like feel.
- Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add
.has-successto the parent element. Any
.help-blockwithin that element will receive the validation styles.
- Style anchors to look like buttons by using button classes. Example:
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
- Button classes can be used on
- Add the bootstrap theme for visual enhancements. See http://getbootstrap.com/dist/css/bootstrap-theme.min.css and http://getbootstrap.com/examples/theme/
A Final Note:
Bootstrap is a starting point. An excellent one, but a starting point nonetheless. You are by no means constrained by anything that it provides, and you can override anything it sets. Always refer to http://getbootstrap.com for the latest info, more examples, and advanced topics.
The US government’s Global Change Research Program recently debuted a fancy new website with loads of HTML5 and CSS3 bells and whistles to discuss climate change. Among the visual eye candy is our own Before/After plugin in use to show the dramatic change in the Alaskan Muir glacier over a period of 60 years. Have a look at http://nca2014.globalchange.gov/report/regions/alaska#graphic-20971.
15/the-destruction-of-a- nation-syrias-war-revealed-in- satellite-imagery/
05/23/before-and-after-the- tornado-satellite-shots-of- moore/
06/07/before-and-after-a- satellite-captures-damage-and- recovery-from-superstorm- sandy/
Sometime last year I came across an image carousel on an Italian website done in Flash that allowed you to scroll a set of images horizontally with the flick of your mouse. What I loved about it was how natural and intuitive it felt. The gallery of images was infinite, meaning that the same X number of images would repeat no matter how often you scrolled it. The obvious downsides were that it was done in Flash and not mobile friendly.
I’ve been working on and off since then to replicate the effect, as well as improve upon it. I finally have a non-Flash solution that uses jQuery to achieve the effect both on desktops and mobile devices that doesn’t require any other libraries and is super slim. I love the infinite scrolling effect in use here which relies on an optical illusion of sorts.
I’m posting the first examples here and would like your feedback to see if I should turn this into a jQuery plugin. I’m also open to some suggestions in terms of a name. I like the “flick” part, but struggle with calling this a carousel, gallery,scroller, or something else.
A caveat: The only downside I’ve discovered so far lies in mobile Safari. I have seen the scroller start off and work fine in this browser, yet cease to respond after a few flicks. Unfortunately I seem to have no way to debug mobile Safari, so if anyone can shed light onto the issue I’d be happy to update the code.