How do I replace row-fluid span12 on Joomla 4 or 6?

Joomla 3 templates (Protostar, Beez, club templates) used Bootstrap 2. Joomla 4/5/6 admin and Cassiopeia use Bootstrap 5. Old class names do nothing — the layout collapses into one column. Use Bootstrap 5: row + col-*. Replace row-fluid with row. Replace span1–span12 with col-md-* (or col-*). pull-left/right → float-start/end. hide → d-none. img-responsive → img-fluid. btn-small → btn-sm. hero-unit and well have no 1:1 class — use spacing utilities or a card.

CSS-BS2-001

row-fluid span12

Bootstrap 2 markup (row-fluid / span*)

Joomla 3 templates (Protostar, Beez, club templates) used Bootstrap 2. Joomla 4/5/6 admin and Cassiopeia use Bootstrap 5. Old class names do nothing — the layout collapses into one column.

row-fluid span12 → Bootstrap 5: row + col-*

Dies at Joomla 3 → 4J3: Works nativelyJ4: Removed — fatalJ6: Removed — fatalBC plugin: no — already dead on J4Patch possible — review itCSS / Bootstrap

Symptoms people search

template layout broken after upgrade · everything in one column · module chrome looks like 2012 · row-fluid does nothing

Replace this code

Swap row-fluid span12 for Bootstrap 5: row + col-*.

Joomla 3

Remove or stop calling this

<div class="row-fluid">
  <div class="span8">...</div>
  <div class="span4">...</div>
</div>
<button class="btn btn-small pull-right">

Joomla 4 / 6

Use this instead

<div class="row">
  <div class="col-md-8">...</div>
  <div class="col-md-4">...</div>
</div>
<button class="btn btn-sm float-end">

How to fix it

1Replace row-fluid with row.
2Replace span1–span12 with col-md-* (or col-*).
3pull-left/right → float-start/end. hide → d-none. img-responsive → img-fluid. btn-small → btn-sm.
4hero-unit and well have no 1:1 class — use spacing utilities or a card.

Also known as

row-fluid · span1 · span2 · span3 · span4 · span5 · span6 · span7 · span8 · span9 · span10 · span11 · span12 · offset1 · offset2 · offset3 · offset4 · pull-left · pull-right · hero-unit · nav-collapse · btn-mini · btn-small · input-block-level · element-invisible · hide · show · Bootstrap 2 · float-start · float-end · visually-hidden · form-control

Scan a ZIP for this Ask Infyways to fix it

Related issues

Have a project in mind? Let's talk about it.

Tell us what you're building. Whether it's a new site, an online store, a mobile app, or something that needs AI under the hood, we'll get back to you within a business day.

Free consultation

No commitment, no pressure

Reply within 24 hours

Usually much faster

row-fluid span12

Symptoms people search

Replace this code

How to fix it

Also known as

Related issues

Have a project in mind? Let's talk about it.

Tell us about your project

Services

AI & Automation

Industries

Company

Technologies