AdminLTE/docs/upgrade-guide.md

layout	title
page	Upgrade Guide

Migration from v2.4.x

The first step to migrate AdminLTE v2.4.x to v3.0 is upgrade the Bootstrap 3 base code to Bootstrap 4, the full instruction here after you upgraded the base code you need to update the markups.

CSS / JS Files

Since AdminLTE v3.0 Bootstrap 4 is complete included in AdminLTE's CSS file. You will not need to load the Bootstrap CSS file bootstrap(.min).css, but you will need the Bootstrap JS file bootstrap(.min).js.

Main Header

The biggest change in Main Header is the Logo is moved to Main Sidebar and the Main Header has now color variations, here are all changes:

1. Logo

• <a href="index2.html" class="logo"> moved & rebuild to .brand-link inside .main-sidebar

2. Header / Nav

• <header class="main-header"> & <nav class="navbar navbar-static-top"> merged with <nav class="main-header navbar navbar-expand navbar-white navbar-light">

3. Sidebar Toggle / Left Navbar

• <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"><span class="sr-only">Toggle navigation</span></a> replaced with <ul class="navbar-nav"><li class="nav-item"><a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a></li></ul>

3. Right Navbar

• <div class="navbar-custom-menu"> & <ul class="nav navbar-nav"> merged with <ul class="navbar-nav ml-auto">

Main Sidebar

Like above the biggest change is the Main Sidebar contains now the Logo and the sidebar has now color variations, here all changes:

1. Main Sidebar Color

• <aside class="main-sidebar"> replaced with <aside class="main-sidebar sidebar-dark-primary">

2. Logo / Brand Link

• <a href="index3.html" class="brand-link"><img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"><span class="brand-text font-weight-light">AdminLTE 3</span></a> replaces the old logo

3. Sidebar

• <section class="sidebar"> replaced with <div class="sidebar">

4. User Panel

• <div class="user-panel"><div class="pull-left image"><img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"></div><div class="pull-left info"><p>Alexander Pierce</p><a href="#"><i class="fa fa-circle text-success"></i> Online</a></div></div> replaced with <div class="user-panel mt-3 pb-3 mb-3 d-flex"><div class="image"><img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image"></div><div class="info"><a href="#" class="d-block">Alexander Pierce</a></div></div>

5. Sidebar Menu

• <nav class="mt-2"> now around <ul class="sidebar-menu" data-widget="tree">
• <ul class="sidebar-menu" data-widget="tree"> replaced with <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu">
• <li class="header"> repalced with <li class="nav-header">
• <li> need a new class .nav-item
• <li> <a> need a new class .nav-link
• <li> <a> <i> need a new class .nav-icon
• <li> <a> <span> replaced with <p>
• <span class="pull-right-container"> removed
• <i class="fa fa-angle-left pull-right"></i> replaced with <i class="right fas fa-angle-left"></i>
• <small class="label pull-right bg-green">new</small> replaced with <span class="right badge badge-danger">New</span>
• <li> <ul class="treeview-menu"> replaced with <ul class="nav nav-treeview">

Old sample entry ```html

Widgets new

```

New sample entry ```html

Widgets New

```

Old sample entry (with tree menu) ```html

Dashboard

• Dashboard v1

```

New sample entry (with tree menu) ```html

Dashboard

• Dashboard v1

```

Content Header

The biggest change in content header is AdminLTE use here now .container-fluid, .row & .col-* and the breadcrumb markup changed, here are all changes:

• <section class="content-header"> replaced with <div class="content-header">
• <div class="container-fluid"> added in <div class="content-header">
• <h1> & <ol class="breadcrumb"> rebuild in <div class="row"> & <div class="col-sm-6">
• <h1> replaced with <h1 class="m-0 text-dark">
• <ol class="breadcrumb"> need new class .float-sm-right
• <ol class="breadcrumb"> <li> need new class .breadcrumb-item

Old Content Header Markup ```html

Dashboard Control panel

1. Home
2. Dashboard

```

New Content Header Markup ```html

Dashboard Control panel

1. Home
2. Dashboard v1

```

Content

The content has no change, we only split <section class="content container-fluid"> in two elements:

• <section class="content">
• <div class="container-fluid">

Footer

The footer has only one little change for the right sided div.

• <div class="pull-right hidden-xs"> changed to <div class="float-right d-none d-sm-inline">

Miscellaneous

Here are some other little css/html changes since v3.0:

• .label renamed to .badge

JavaScript Plugins

Here are some other little JavaScript changes since v3.0:

• data-toggle="*" renamed to data-widget="*" instead of CardWidget items
  • for CardWidget it's now data-card-widget="*"