Backwards Compatibility

Some styles and classes available in UA Bootstrap (Bootstrap 3) have been deprecated, replaced, or removed in Arizona Bootstrap (Bootstrap 4).

Overview

Although backwards compatibility is included for some components and utilities available in UA Bootstrap, it is highly recommended that you utilize the new classes available in Arizona Bootstrap . They are simply included here to lessen the burden on site builders for migrating from Drupal 7 sites using UA Bootstrap to Drupal 8 sites using Arizona Bootstrap . All items that are included with backwards compatibility are built by extending the classes and styles available in Arizona Bootstrap . Any items that were marked as “deprecated” in UA Bootstrap do not include backwards compatibility; these items are listed in the Removed Utilities and Removed Components sections.

Backwards Compatible Components

UA Bootstrap utilized components that are no longer supported/maintained in Arizona Bootstrap , but can be replicated by utilizing a combination of available classes. They have been included with backwards compatibility in Arizona Bootstrap to avoid breaking changes.

Background Wrappers

In UA Bootstrap, the following background wrapper patterns were marked as deprecated. They are also deprecated in Arizona Bootstrap and have been removed from the docs. Background patterns for triangles top-left, top-right, centered, and tri-lines are still available.

Triangles Fade Background Wrapper

Catalinas Abstract Background Wrapper

Triangle Mosaic Background Wrapper

Buttons

In Arizona Bootstrap , Button classes have changed as follows:

Default, Primary, and Secondary

The classes .btn-default and .btn-primary available in UA Bootstrap have been deprecated in Arizona Bootstrap . Similarly, .btn-secondary (which is available in base Bootstrap 4) has been removed from Arizona Bootstrap . These classes have been deprecated in favor of more intuitive button classes (e.g., .btn-red and .btn-blue). However, .btn-default and .btn-primary are both backwards compatible, and all three classes can be extended using the available button color classes.

Hollow Buttons

Hollow buttons now use the .btn-outline-* class. These buttons are included with backwards compatibility and can be extended using the available outline classes.

The class .btn-hollow-reverse is included with backwards compatibility and can be extended using the .btn-outline-white class.

Cards

In Arizona Bootstrap , color-specific cards can be replicated by using the background color utility classes and border utility classes.

Primary Card

Success Card

Info Card

Warning Card

Danger Card

Primary Outline Card

Success Outline Card

Info Outline Card

Warning Outline Card

Danger Outline Card

Labels

In Arizona Bootstrap , labels have been replaced with the Badge component. Labels can be replicated by extending the .badge styles.

Default Primary Success Info Warning Danger Muted

Panels

Panels have been extended using a combination of the .card class (and its child classes) and the .bg-light class. “Expanding” or “collapsible” panels, however, are still available as an Arizona Bootstrap component: Collapse.

Panel Default

This is an example of how the backwards-compatible Panel looks in Arizona Bootstrap . This component should not be used, but is included here for the sake of verifying its backwards-compatibility.

Panel Primary

This is an example of how the backwards-compatible Panel looks in Arizona Bootstrap . This component should not be used, but is included here for the sake of verifying its backwards-compatibility.

{{- range (index $.Site.Data "theme-colors") }} {{ if and (ne .name "light") (ne .name "dark") }}
Panel {{ .name | title }}

This is an example of how the backwards-compatible Panel looks in Arizona Bootstrap . This component should not be used, but is included here for the sake of verifying its backwards-compatibility.

{{ end }} {{ end }}

Thumbnails

Thumbnails have been extended using a combination of the .card class and its child classes.

Thumbnail Title

This is an example of how the backwards-compatible Thumbnail looks in Arizona Bootstrap . This component should not be used, but it included here for the sake of verifying its backwards-compatibility.

Wells

Wells have been extended using a combination of the .card class and the .bg-light class, and swapping out .bg-light for .bg-white for the hollow well.

This is an example of how the backwards-compatible well looks in Arizona Bootstrap . This component should not be used, but is included here for the sake of verifying its backwards-compatibility.

This is an example of how the backwards-compatible hollow well looks in Arizona Bootstrap . This component should not be used, but is included here for the sake of verifying its backwards-compatibility.

This is an example of how the backwards-compatible small well looks in Arizona Bootstrap . This component should not be used, but is included here for the sake of verifying its backwards-compatibility.

Backwards Compatible Utilities

UA Bootstrap contained utility classes that are no longer supported/maintained in Arizona Bootstrap , but can be replicated by utilizing a combination of classes. They have been included with backwards compatibility in Arizona Bootstrap to avoid breaking changes.

Background Color

.bg-silver-tint

Column Offset

The syntax for column offsets has changed in Arizona Bootstrap . Previously, you would offset columns using .col-md-offset-2. In Arizona Bootstrap , you use .offset-md-2. Refer to Offsetting Columns for further details.

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

Pull Left/Right

The syntax for pulling content to the left/right has changed to .float-left and .float-right.

Example image 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit scelerisque in dictum non consectetur a erat nam. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc. Dui nunc mattis enim ut tellus elementum sagittis vitae. Id donec ultrices tincidunt arcu non sodales. Enim diam vulputate ut pharetra sit. Amet consectetur adipiscing elit ut aliquam purus sit amet. Malesuada nunc vel risus commodo viverra maecenas accumsan. Purus semper eget duis at tellus at urna. A condimentum vitae sapien pellentesque. Cras adipiscing enim eu turpis egestas. Consequat semper viverra nam libero justo laoreet sit amet. Pellentesque diam volutpat commodo sed egestas egestas fringilla. Id venenatis a condimentum vitae. Ultricies integer quis auctor elit sed vulputate mi sit amet.

Example image 1

Turpis cursus in hac habitasse platea dictumst quisque. Tellus cras adipiscing enim eu. Lectus sit amet est placerat in egestas. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Facilisi nullam vehicula ipsum a arcu cursus vitae congue. Sed euismod nisi porta lorem. Quis ipsum suspendisse ultrices gravida dictum fusce ut. Convallis posuere morbi leo urna molestie at elementum. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Vulputate dignissim suspendisse in est ante in nibh mauris.

Input Group Button

In Arizona Bootstrap , what was previously .input-group-btn has been replaced by .input-group-append.

Margin Vertical Align

The margin align classes have been replaced in Arizona Bootstrap with the vertical align utility classes.

top middle bottom

Text align with zero margin-top

Text align with zero margin-bottom

The .modal-bg-dark class can be extended by using the .bg-dark class.

The .navbar-default class can be extended by utilizing the .navbar-light class.

The .divider and .nav-divider classes have been replaced by the .dropdown-divider class.

The .page-header class available in UA Bootstrap has been removed in Arizona Bootstrap . You can replicate its effect by combining headers (e.g., h1, h2, h3, etc.) with spacing utility classes.

Fonts & Font Styles

You can replicate these effect by using the available font weight and italic and font family classes.

.bold

Responsive Text Alignment *-not Classes

UA Bootstrap included custom classes that utilized the *-not formatting. These classes are not included in Arizona Bootstrap , but are backwards compatible and can be extended using a combination of the available text alignment classes, which are also responsive using the usual grid breakpoints.

.text-left-not-xs

.text-center-not-xs

.text-right-not-xs

.text-justify-not-xs

.text-left-not-sm

.text-center-not-sm

.text-right-not-sm

.text-justify-not-sm

.text-left-not-md

.text-center-not-md

.text-right-not-md

.text-justify-not-md

.text-left-not-lg

.text-center-not-lg

.text-right-not-lg

.text-justify-not-lg

Text Size

Text size classes have been extended by combining header classes (e.g., .h1) with margin-bottom-zero (.mb-0).

{{ range (seq 1 6) }}

.text-size-h{{ . }}

{{ end }}

Triangle List

In UA Bootstrap, the .triangle class was available for unordered lists. This class has been renamed .ul-triangles in Arizona Bootstrap . This rename is to match the naming scheme that the rest of Arizona Bootstrap ’s components follow, and to make it more intuitive that the class can only be used on unordered lists.

  • Triangle unordered list item

Removed Utility Classes

Components and utility classes that were marked as deprecated in UA Bootstrap have been completely removed in Arizona Bootstrap .

Column Push/Pull

The column push/pull classes available in UA Bootstrap have been replaced by Order Classes. These classes are not backwards compatible and will need to be updated to use Arizona Bootstrap ’s classes.

Mailto

The .mailto class, which is placed directly on the <a> link tag, has been deprecated in favor of Bootstrap’s .text-truncate class, which is placed on the surrounding <div> instead. See Text Wrapping and Overflow for more details.

No Line Height

The .no-line-height class has been completely removed and does not have an equivalent in Arizona Bootstrap .

Row and Column Buffers

Row and column buffers were deprecated in UA Bootstrap and have been completely removed in Arizona Bootstrap . For the same effect, please use the spacing utility classes.

Theme Colors

The decision was made to remove all .*-primary and .*-secondary classes from Arizona Bootstrap in favor of encouraging the use of more intuitive utility classes, and to avoid backwards compatibility issues with UA Bootstrap.

Tooltip Arrow

In UA Bootstrap, tooltip markup used the class .tooltip-arrow for its arrow. In Arizona Bootstrap , the class .arrow is used.

Removed Components

The .navbar-inverse class has been completely removed.

Removed JavaScript

Components listed in the JavaScript section of UA Bootstrap (e.g., Modals, Tooltips, Popovers) have had certain methods, options, and events removed or changed in Arizona Bootstrap . These items are not backwards compatible. They should not cause breaking changes, but if you are manually calling any of these methods, they will need to be updated to use the methods/events/functions that Arizona Bootstrap uses. Some examples include: remote, .in vs. .show, and viewport vs. boundary. Refer to each individual component’s documentation for an explanation of proper methods, options, and events.