Migration from Bootstrap

A comprehensive guide for migrating your project from Bootstrap to Apex.

Major Changes

Migrating from Bootstrap to Apex requires significant changes to your HTML structure and class names.

Grid System Migration

Bootstrap uses a 12-column grid, while Apex uses a flexible utility-based approach:

HTML

<!-- Bootstrap -->
<div class="row">
  <div class="col-md-6">Content</div>
  <div class="col-md-6">Content</div>
</div>

<!-- Apex -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <div>Content</div>
  <div>Content</div>
</div>

Component Migration

Bootstrap components need to be rebuilt using utility classes:

HTML

<!-- Bootstrap Button -->
<button class="btn btn-primary">Button</button>

<!-- Apex -->
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  Button
</button>

Spacing Migration

Bootstrap uses numbered spacing (1-5), while Apex uses size-based naming:

HTML

<!-- Bootstrap -->
<div class="mt-3 mb-3">Content</div>

<!-- Apex -->
<div class="mt-4 mb-4">Content</div>