Bootstrap 5.3 UI

Style Guide

A working reference page where each core UI element lives in its own Twig file.

Sections

Buttons
Simple button building blocks kept as isolated Twig snippets.
Form Controls
Inputs and selects separated into reusable files.
Feedback and Surfaces
Alerts, badges, cards, and tabs grouped for quick visual work.

Buttons

Each button lives in its own Twig file with only the element markup inside.

Primary Button

<button type="button" class="btn btn-primary">Base class</button>

Secondary Button

<button type="button" class="btn btn-secondary">Base class</button>

Outline Button

<button type="button" class="btn btn-outline-dark">Base class</button>

Form Controls

Core inputs are separated so teams can reuse them without copying full page markup.

Text Input

<input type="text" class="form-control" placeholder="Base input">

Select

<select class="form-select">
    <option selected>Base select</option>
    <option>Option one</option>
    <option>Option two</option>
</select>

Input Error

Please enter a valid email address.
<input class="form-control is-invalid">
<div class="invalid-feedback">Please enter a valid email address.</div>

Input Success

Looks good.
<input class="form-control is-valid">
<div class="valid-feedback">Looks good.</div>

Textarea Note

This field is for optional notes or context.
<textarea class="form-control"></textarea>
<div class="form-text">This field is for optional notes or context.</div>

Checkbox Group

<div class="form-check">
    <input class="form-check-input" type="checkbox">
    <label class="form-check-label">Notify me by email</label>
</div>

Feedback and Surfaces

Reusable blocks for messaging, hierarchy, and lightweight interface composition.

Alert

<div class="alert alert-success" role="alert">A simple success alert.</div>

Badge

Pending 
<span class="badge text-bg-warning">Pending</span>

Card

Card title

Quick example text to build on the card title.

<div class="card">
    <div class="card-body">
        <h4 class="card-title h5">Card title</h4>
        <p class="card-text mb-0">Quick example text to build on the card title.</p>
    </div>
</div>
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
</ul>

Warning Alert

<div class="alert alert-warning" role="alert">Check this step before continuing.</div>

Error Alert

<div class="alert alert-danger" role="alert">Something went wrong. Please try again.</div>

Status System

Useful status blocks for tasks, forms, and dashboard-style UI.

Done

تم

Used when an action is completed successfully.

Error

مشكلة

Used when something failed and needs attention.

Note

ملاحظة

Used for neutral guidance or contextual information.

Warning

تنبيه

Used when the user should pause before proceeding.