Skip to content

Migrating Bootstrap to Version 5 #487

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions 404.html
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@

<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-bs-target="#collapseTwo"
aria-expanded="true" aria-controls="collapseTwo">
<i class="fas fa-fw fa-cog"></i>
<span>Components</span>
Expand All @@ -75,7 +75,7 @@ <h6 class="collapse-header">Custom Components:</h6>

<!-- Nav Item - Utilities Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities"
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-bs-target="#collapseUtilities"
aria-expanded="true" aria-controls="collapseUtilities">
<i class="fas fa-fw fa-wrench"></i>
<span>Utilities</span>
Expand All @@ -102,7 +102,7 @@ <h6 class="collapse-header">Custom Utilities:</h6>

<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item active">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true"
<a class="nav-link" href="#" data-toggle="collapse" data-bs-target="#collapsePages" aria-expanded="true"
aria-controls="collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Pages</span>
Expand Down Expand Up @@ -181,7 +181,7 @@ <h6 class="collapse-header">Other Pages:</h6>
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
<li class="nav-item dropdown no-arrow d-sm-none">
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-search fa-fw"></i>
</a>
<!-- Dropdown - Messages -->
Expand All @@ -205,7 +205,7 @@ <h6 class="collapse-header">Other Pages:</h6>
<!-- Nav Item - Alerts -->
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-bell fa-fw"></i>
<!-- Counter - Alerts -->
<span class="badge badge-danger badge-counter">3+</span>
Expand Down Expand Up @@ -256,7 +256,7 @@ <h6 class="dropdown-header">
<!-- Nav Item - Messages -->
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-envelope fa-fw"></i>
<!-- Counter - Messages -->
<span class="badge badge-danger badge-counter">7</span>
Expand Down Expand Up @@ -324,7 +324,7 @@ <h6 class="dropdown-header">
<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Douglas McGee</span>
<img class="img-profile rounded-circle"
src="img/undraw_profile.svg">
Expand All @@ -345,7 +345,7 @@ <h6 class="dropdown-header">
Activity Log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<a class="dropdown-item" href="#" data-toggle="modal" data-bs-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
Expand Down Expand Up @@ -402,13 +402,13 @@ <h6 class="dropdown-header">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<button class="close" type="button" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
Expand Down
28 changes: 28 additions & 0 deletions AGENT.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
# Agent Guidelines for SB Admin 2 Template

## Build Commands
- `npm install` - Install dependencies
- `npm start` - Start development server with live reload
- `gulp` - Default task that builds everything
- `gulp watch` - Start browserSync server and watch for changes
- `gulp css` - Compile SCSS to CSS and minify
- `gulp js` - Minify JavaScript files
- `gulp vendor` - Copy dependencies from node_modules to vendor directory
- `gulp build` - Run all build tasks

## Code Style Guidelines
- Uses Bootstrap 5 framework and conventions
- SCSS for styling with component-based organization
- JavaScript follows jQuery patterns
- HTML uses Bootstrap component classes
- BEM-like naming convention for custom classes
- File organization:
- scss/ - SCSS source files
- css/ - Compiled CSS
- js/ - JavaScript source files
- vendor/ - Third-party dependencies

## Error Handling
- Check browser console for errors
- Validate HTML against Bootstrap standards
- Test responsive behavior across device sizes
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
# [Start Bootstrap - SB Admin 2](https://startbootstrap.com/theme/sb-admin-2/)

[SB Admin 2](https://startbootstrap.com/theme/sb-admin-2/) is an open source admin dashboard theme for [Bootstrap](https://getbootstrap.com/) created by [Start Bootstrap](https://startbootstrap.com/).
[SB Admin 2](https://startbootstrap.com/theme/sb-admin-2/) is an open source admin dashboard theme for [Bootstrap 5](https://getbootstrap.com/) created by [Start Bootstrap](https://startbootstrap.com/).

For the legacy Bootstrap 3 version of this theme, you can view the [last stable release](https://github.com/StartBootstrap/startbootstrap-sb-admin-2/releases/tag/v3.3.7%2B1) of SB Admin 2 for Bootstrap 3.
For the legacy Bootstrap 4 version of this theme, you can view the [v4.1.4 release](https://github.com/StartBootstrap/startbootstrap-sb-admin-2/releases/tag/v4.1.4) of SB Admin 2.

For the legacy Bootstrap 3 version of this theme, you can view the [v3.3.7+1 release](https://github.com/StartBootstrap/startbootstrap-sb-admin-2/releases/tag/v3.3.7%2B1) of SB Admin 2 for Bootstrap 3.

## Preview

Expand Down
20 changes: 10 additions & 10 deletions blank.html
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@

<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-bs-target="#collapseTwo"
aria-expanded="true" aria-controls="collapseTwo">
<i class="fas fa-fw fa-cog"></i>
<span>Components</span>
Expand All @@ -74,7 +74,7 @@ <h6 class="collapse-header">Custom Components:</h6>

<!-- Nav Item - Utilities Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities"
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-bs-target="#collapseUtilities"
aria-expanded="true" aria-controls="collapseUtilities">
<i class="fas fa-fw fa-wrench"></i>
<span>Utilities</span>
Expand All @@ -101,7 +101,7 @@ <h6 class="collapse-header">Custom Utilities:</h6>

<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item active">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true"
<a class="nav-link" href="#" data-toggle="collapse" data-bs-target="#collapsePages" aria-expanded="true"
aria-controls="collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Pages</span>
Expand Down Expand Up @@ -180,7 +180,7 @@ <h6 class="collapse-header">Other Pages:</h6>
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
<li class="nav-item dropdown no-arrow d-sm-none">
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-search fa-fw"></i>
</a>
<!-- Dropdown - Messages -->
Expand All @@ -204,7 +204,7 @@ <h6 class="collapse-header">Other Pages:</h6>
<!-- Nav Item - Alerts -->
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-bell fa-fw"></i>
<!-- Counter - Alerts -->
<span class="badge badge-danger badge-counter">3+</span>
Expand Down Expand Up @@ -255,7 +255,7 @@ <h6 class="dropdown-header">
<!-- Nav Item - Messages -->
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-envelope fa-fw"></i>
<!-- Counter - Messages -->
<span class="badge badge-danger badge-counter">7</span>
Expand Down Expand Up @@ -323,7 +323,7 @@ <h6 class="dropdown-header">
<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Douglas McGee</span>
<img class="img-profile rounded-circle"
src="img/undraw_profile.svg">
Expand All @@ -344,7 +344,7 @@ <h6 class="dropdown-header">
Activity Log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<a class="dropdown-item" href="#" data-toggle="modal" data-bs-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
Expand Down Expand Up @@ -396,13 +396,13 @@ <h1 class="h3 mb-4 text-gray-800">Blank Page</h1>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<button class="close" type="button" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
Expand Down
Loading