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 .btn-hollow class (in practice identical to .btn-hollow-default) is not backwards compatible, needing replacement by .btn-outline-red.
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.
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.
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.
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.
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.
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.
Pull Left/Right
The syntax for pulling content to the left/right has changed to .float-left and .float-right.
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.
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
Modal Dark
The .modal-bg-dark class can be extended by using the .bg-dark class.
Navbar Default
The .navbar-default class can be extended by utilizing the .navbar-light class.
Navbar Divider
The .divider and .nav-divider classes have been replaced by the .dropdown-divider class.
Page Header
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.
Page Header
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).
.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
Navbar Inverted
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.