---json
{
    "canonical": ":boostrap5",
    "layout": "median",
    "page_id": "fk6mcn7x7aqkxihd1nd59",
    "title": "ComboStrap - Release 1.13 - BootStrap 4 to 5 Migration Changes"
}
---
====== ComboStrap - Release 1.13 - BootStrap 4 to 5 ======


===== About =====
In the [[1.13|release 1.13]], we made Bootstrap 5 available. This page regroups all migration matters from BootStrap 4 to BootStrap 5.

ComboStrap supports the two version.



<note>
If you got any problem on this migration, don;'t hesitate to [[:support|open a ticket or contact us]].
</note>


===== New in Bootstrap 5 =====
  * [[docs:styling:scale|Responsive Font size]] is on by default. We deleted the fix to make the [[release:deprecated:title|title display]] responsive.
  * [[https://getbootstrap.com/docs/5.0/layout/containers/|The container xxl!]] [[docs:styling:breakpoint|breakpoint]]- You can have a width of 1320 on large screen
  * [[https://getbootstrap.com/docs/5.0/layout/grid/#row-columns|Natural Auto Width for a grid column]] - we support it with the [[docs:layout:component:grid|row auto type]]
  * [[https://getbootstrap.com/docs/5.0/utilities/position/|Position]] more position utility class already supported (in Bootstrap version 4) via the [[release:beta:position|position attribute]].
  * [[docs:utility:jquery|JQuery]] is no more needed and Popper is included in one bundle.
  * [[release:deprecated:text-align|Text-align]] can now be applied conditionally by screen size
  * Supports for [[docs:locale:lang|RTL language]]. Example: Check this arabic page: [[docs:locale:lang_ar]]
  * The two new [[docs:content:heading|heading display style]] `d5` and `d6`



===== Breaking changes from Combostrap 5 =====

==== Start and End in place of Left and Right in Utility Class ====
To support [[https://getbootstrap.com/docs/5.0/getting-started/rtl/|RTL languages, Bootstrap has renamed the direction properties ''left'' and ''right'' in favor ''start'' and ''end'']].

The only breaking change is when you use utility class directly from bootstrap with the [[docs:styling:class|class attribute]] (ie without using for instance the [[docs:styling:spacing|spacing utility]] for instance).

They have been [[https://getbootstrap.com/docs/5.0/migration/#utilities-2|renamed]] and we can't do much in this case

The left and right spacing utility have been renamed to support text direction.
  * in place of ''l'' (''left''), you get a ''s'' (''start'') - for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
  * in place of ''r'' (''right''), you get a ''e'' (''end'')- for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL

==== Theme ====
<note>
The below change is only valid for the default bootstrap theme, not for [[:howto:stylesheet-bootstrap|third theme stylesheet such as bootswatch]]
</note>

The [[https://getbootstrap.com/docs/5.0/migration/#color-system|colors have changed]] in the default Bootstrap them to add more contrast. Unfortunately, it means that the default colors are more bright.


Example with the ''info'' color

^ Bootstrap 4 ^ Bootstrap 5 ^
| <icon name="folder" color="#17a2b8"/> | <icon name="folder" color="#0dcaf0"/> |



===== Changes preserved  =====
This section lists the changes preserved by ComboStrap.
==== Deleted ====
The following elements are deleted in Bootstrap 5 but preserved in Combostrap.

  * [[docs:layout:component:masonry|Card Columns]] was deleted from Bootstrap 4 but we maintain it as explained in this [[https://getbootstrap.com/docs/5.0/examples/masonry/|example]]
  * [[docs:utility:jquery|Jquery]] is [[https://getbootstrap.com/docs/5.0/getting-started/javascript/#still-want-to-use-jquery-its-possible|no more a dependency for Bootstrap]].
  * [[docs:layout:component:jumbotron|jumbotron]] was [[https://getbootstrap.com/docs/5.0/migration/#jumbotron|deleted]].

==== Modified ====

  * The ''bs'' namespace has been added to all variables:
      * [[https://getbootstrap.com/docs/5.0/customize/css-variables/|color names]]. We maintain the old color scheme without the prefix name by applying the new prefix transparently.
      * [[https://getbootstrap.com/docs/5.0/migration/#javascript-2|data attributes]]
  * ''auto margin'' used in the [[docs:menubar:group|Navgroup]] with the ''expand'' attribute has been renamed from [[https://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins|mr-auto]] to [[https://getbootstrap.com/docs/5.0/utilities/flex/#auto-margins|me-auto]].
  * the [[https://getbootstrap.com/docs/5.0/getting-started/accessibility/#visually-hidden-content|assistive technologies class]] given in the [[docs:menubar:search|search bar]] has changed from ''sr-only'' to ''visually-hidden''
  * [[docs:content:badge|badge]] uses now [[https://getbootstrap.com/docs/5.0/components/badge/#background-colors|background class]] to specify the background color. The colors have changed slightly.
  * [[docs:styling:spacing|spacing]] and [[docs:styling:float|Float]] uses now also the ''start'' and ''end'' positioning


===== More info =====
For more information, see the [[https://getbootstrap.com/docs/5.0/migration/|whole migration documentation at Bootstrap]]