Migrating to Athena from Bootstrap 3

The most notable changes between Bootstrap 3 and Athena are summarized immediately below, followed by more specific class and behavioral changes to relevant components.



Here are the big ticket items you'll want to be aware of when moving from Bootstrap 3 to Athena.

Browser support

Global changes

Grid system


Style resets

Athena includes a combination of opinionated element style resets and Reboot, a new stylesheet from Bootstrap 4 that builds on Normalize with somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the box-sizing: border-box change, moving from em to rem units on many elements, link styles, and many form element resets.





Vendor prefix mixins

Bootstrap 3's vendor prefix mixins, which were deprecated in v3.2.0, have been removed in Athena. Since we use Autoprefixer, they're no longer necessary.

Removed the following mixins: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d, user-select

Responsive utilities

All @screen- variables have been removed in Athena. Use the media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only() Sass mixins or the $grid-breakpoints Sass map instead.

The responsive utility classes have also been overhauled.

Rather than using explicit .visible-* classes, you make an element visible by simply not hiding it at that screen size. You can combine one .hidden-*-up class with one .hidden-*-down class to show an element only on a given interval of screen sizes (e.g. .hidden-sm-down.hidden-xl-up shows the element only on medium and large devices).

Note that the changes to the grid breakpoints in Athena means that you'll need to go one breakpoint larger to achieve the same results (e.g. .hidden-md is more similar to .hidden-lg-down than to .hidden-md-down). The new responsive utility classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases.


By component

This list highlights key changes by component between Bootstrap v3.x.x and Athena.


Button group


Labels and badges

List groups

The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization.


Panels, thumbnails, and wells

Dropped entirely for the new card component.



Tooltips and Popovers