CakePHP Sandbox App: Bootstrap

HtmlHelper - Badges & Icons

The BootstrapUI HtmlHelper provides Bootstrap-styled badge and icon components.

Badges

Bootstrap badges for counts and labels.

Basic Badges

Default Primary Secondary Success Danger Warning Info Light Dark


			$this->Html->badge('Text', ['class' => 'bg-primary'])

Pill Badges

Rounded pill 99+ New


			$this->Html->badge('Text', ['class' => 'rounded-pill bg-primary'])

Badges in Context

Messages 4

Inbox 12

Button with badge:


			Messages <?= $this->Html->badge('4', ['class' => 'bg-primary']) ?>

Icons (Bootstrap Icons)

Bootstrap Icons integration for consistent iconography.

Note: Bootstrap Icons must be installed via npm. The icon component renders <i> tags with the appropriate Bootstrap Icons classes.

Basic Icons


			$this->Html->icon('house-fill')

Icon Sizes

Small: Normal: Large: X-Large: XX-Large:


			$this->Html->icon('star-fill', ['style' => 'font-size: 2rem;'])

Colored Icons


			$this->Html->icon('check-circle-fill', ['class' => 'text-success'])

Icons with Text

Home
Messages
Profile
Settings


			<?= $this->Html->icon('house-fill') ?> Home

Icons in Buttons


			<button class="btn btn-primary">

			  <?= $this->Html->icon('check-circle') ?> Save

			</button>

Combined: Badges with Icons

5 new 12 Verified


			$this->Html->badge(

			  $this->Html->icon('envelope-fill') . ' 5 new',

			  ['class' => 'bg-primary', 'escape' => false]

			)

Available Bootstrap Icons

See the full list at Bootstrap Icons. Common icons include: house, heart, star, check, x, info, exclamation, gear, person, envelope, bell, trash, plus, minus, arrow-left, arrow-right, search, and many more.