Upgrade Bootstrap 3 to 4 (EE Checklist)
EE version of https://gitlab.com/gitlab-org/gitlab-ce/issues/45185
Migration checklist (When in doubt, copy the CE implementation if possible)
Upgrade scss
-
Add bootstrap4 dependency to package.json -
Convert all .card to .board-card -
Replace $gray
withcolor("gray")
in matching scss -
Replace .label-inverse
withbackground-color: $label-inverse-bg
property in matching scss -
Add bootstrap-migration.scss from CE -
Run migration script exclude .badge changes -
Remove deprecated mixins ( user-select
,transition-property
,text-overflow
,make-md-column
) -
GitLab instance should now be able to load in the browser -
Update .label
to.badge
changes (Also check for.badge.badge-pill
changes) -
.col-*-offset-*
should change to.offset-*
-
.col-*-push-*
should change to.order-*-2
-
.col-*-pull-*
should change to.order-*-1
-
Remove bootstrap3 dependency -
Disable declarationOrder scss lint rule to minimize migration footprint
Upgrade JS
-
Remove bootstrap3 JS dependency -
Use bootstrap4 JS dependency
Upgrade CSS used in generated HTML
-
Typography -
.page-header
- dropped -
.dl-horizontal
- dropped -
<blockquote>
to.blockquote
-
-
Grid -
.col-xs-*
to.col-*
-
.col-*-offset-*
tooffset-*
(E.g.col-md-offset-1
tooffset-md-1
) Replacecol\-(sm|xs|md|lg)\-offset\-(\d+)
withoffset-${1}-${2}
-
.col-*-push-*
- dropped (in favor of flexbox utility classes such asorder-*
) -
.col-*-pull-*
- dropped (in favor of flexbox utility classes such asorder-*
)
-
-
Buttons -
.btn-default
to.btn-secondary
-
.btn-xs
- dropped (We can replace with.btn-sm
to keep similar size)
-
-
Button group -
.btn-group-justified
tobtn-group.d-flex
-
.btn-group-xs
- dropped (Usebtn-group-sm
)
-
-
Breadcrumbs -
.breadcrumb > li
to.breadcrumb > li.breadcrumb-item
-
-
Carousel (we have no carousels) -
.next
to.carousel-item-next
-
.prev
to.carousel-item-prev
-
.left
to.carousel-item-left
-
.right
to.carousel-item-right
-
.carousel-control.right
to.carousel-control-right
-
.carousel-control.left
to.carousel-control-left
-
-
Dropdowns -
.divider
to.dropdown-divider
-
<span class="caret"></span>
to dropped (override automatic placement of caret) -
Dropdown items now require .dropdown-item
(ignore for now, since it doesn't seem to make much of a difference)
-
-
Forms -
.radio-inline
- dropped -
.checkbox-inline
- dropped -
.form-horizontal
- dropped (We can use<div class="form-group row">
instead for horizontal forms) -
.control-label
to.col-form-label
-
.input-lg
to.form-control-lg
-
.input-sm
to.form-control-sm
-
.form-group-*
to.form-control-*
-
.help-block
to.form-text.text-muted
-
.has-error
,.has-warning
to:invalid
-
.has-success
to:valid
-
.has-error
to.has-danger
-
.radio
to.form-check
(be careful of f.radio_button ruby helper) -
.checkbox
to.form-check
-
.form-control-static
to.form-control-plaintext
-
-
Helper classes -
.center-block
tomx-auto
-
.pull-left
tofloat-left
-
.pull-right
tofloat-right
-
.visible-xs-*
to.d-block.d-sm-none
-
.visible-sm-*
to.d-block.d-md-none
-
.visible-md-*
to.d-block.d-lg-none
-
.visible-lg-*
to.d-block.d-xl-none
-
.hidden-xs-up
to.d-none
-
.hidden-sm-up
to.d-sm-none
-
.hidden-md-up
to.d-md-none
-
.hidden-lg-up
to.d-lg-none
-
.hidden-xl-up
to.d-xl-none
-
-
Images -
.img-responsive
to.img-fluid
-
.img-rounded
to.rounded
-
.img-circle
to.rounded-circle
-
-
Input groups -
.input-group-addon
to.input-group-prepend
,.input-group-append
(don't forget to nest content in<div class="input-group-text">
) -
.input-group-btn
to.input-group-prepend
,.input-group-append
(Place.input-group-text
for the actual button class to prevent weird padding issues)
-
-
Labels & Badges -
.label
to.badge
(f.label is a rails thing, reminder not to replace that, don't replacelabel-light
, it is a preexisting bad css name that is used for styling labels in forms) -
.badge
to.badge.badge-pill
-
.badge-default
to.badge-secondary
-
-
Navbar -
.navbar-default
to.navbar-light
-
.navbar-toggle
to.navbar-toggler
-
.navbar-form
to.form-inline
-
.navbar-btn
to.nav-item
-
.navbar-right
to.ml-auto
-
.navbar-left
to.mr-auto
-
.navbar-fixed-top
to.fixed-top
-
-
Navs -
.nav > li
to.nav > li.nav-item
-
.nav > li > a
to.nav > li.nav-item > a.nav-link
-
-
Pagination -
.pagination > li
to.pagination > li.page-item
-
.pagination > li > a
to.pagination > li.page-item > a.page-link
-
-
Panels -
.panel
to.card
-
.panel-default
- dropped -
.panel-group
to.card-group
-
.panel-heading
to.card-header
-
.panel-title
to.card-title
-
.panel-body
to.card-body
-
.panel-footer
to.card-footer
-
.panel-primary
-bg-primary
-
.panel-success
-bg-success
-
.panel-info
-bg-info
-
.panel-warning
-bg-warning
-
.panel-danger
to.bg-danger
-
.panel-footer
to.card-footer
-
-
Wells (Same as panels) -
.well
to.card
(Converted some and ported some of the classes)
-
-
Progress -
.progress-bar-*
to.bg-
-
.active
to.progress-bar-animated
-
-
Tables -
.table-condensed
to.table-sm
-
.active
to.table-active
-
.success
to.table-success
-
.info
to.table-info
-
.warning
to.table-warning
-
.danger
to.table-danger
-
-
GitLab specific helpers -
.hidden-xs
to.d-none .d-sm-(display type)
-
.hidden-sm
to.d-none .d-md-(display type)
-
.hidden-md
to.d-none .d-lg-(display type)
-
.hidden-lg
to.d-none .d-xl-(display type)
-
.hidden-xl
to.d-xl-none
-
.visible-*
to http://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements
-
Javascript Plugin changes
-
tooltip('destroy')
totooltip('dispose')
-
tooltip('fixTitle')
totooltip('_fixTitle')
-
popover('destroy')
topopover('dispose')
-
Error: TOOLTIP: Option "html" provided type "number" but expected type "boolean".
Fix quirks
-
Fix login page order -
Fix right alignment dropdowns -
Set dropdown to data-display: static if the dynamic positioning messes up -
Fix the navigation bar so that everything shows up correctly -
Fix project stats alignment -
Fix SSH/HTTPS project input group -
Fix contributors graph alignment -
Fix compare page -
Fix related issues header -
Fix issue create merge request
button group alignment between button and dropdown -
Fix new label form -
Fix new milestone form -
Close merge request button group is opened when MR page is loaded -
MR tabs are not working
Test
- Email notifications layout
Edited by Clement Ho