Skip to content

Bootstrap Components

Starlette-Templates includes Bootstrap 5.3 components. All components are built using Pydantic models for type safety and validation and can be overridden with custom HTML templates.

Getting Started

Bootstrap components require Bootstrap CSS and JavaScript to be included in your templates. You can add them via CDN:

<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CSS and Icons -->
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
</head>
<body>
    <!-- Your content here -->
    {{ content }}
    <!-- Bootstrap Javascript -->
    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Usage in Templates

All components can be rendered in Jinja2 templates by passing them directly to the template context or calling them within the template.

from starlette_templates import TemplateResponse
from starlette_templates.components import Alert, Button

async def homepage(request):
    alert = Alert(content="Welcome!", variant="info")
    button = Button(content="Get Started", variant="primary")

    return TemplateResponse(
        "index.html",
        context={"alert": alert, "button": button}
    )

In your template:

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- Render components from context -->
        {{ alert }}
        {{ button }}

        <!-- Or create components directly in the template -->
        {{ Alert(content="Welcome!", variant="warning") }}
        {{ Button(content="Get Started", variant="secondary") }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Layout Components

Container

A responsive container for wrapping page content.

Bootstrap Container Documentation

from starlette_templates.components import Container

container = Container(content="<h1>Hello World</h1>", fluid=True)

Row

Grid row component for creating responsive layouts.

Bootstrap Grid Documentation

from starlette_templates.components import Row, Col

row = Row(
    content=[
        Col(md=6, content="Left column"),
        Col(md=6, content="Right column")
    ],
    gap=3
)

Col

Grid column component with responsive breakpoints.

Bootstrap Grid Documentation

from starlette_templates.components import Col

col = Col(
    xs=12,
    md=6,
    lg=4,
    content="Responsive column"
)

Grid

CSS Grid component for simplified layouts.

from starlette_templates.components import Grid

grid = Grid(
    cols=3,
    gap=3,
    content="<div>Item 1</div><div>Item 2</div><div>Item 3</div>"
)

Responsive navigation bar with branding and links.

Bootstrap Navbar Documentation

from starlette_templates.components import Navbar, NavLink, NavDropdown

navbar = Navbar(
    brand="My Site",
    brand_href="/",
    links=[
        NavLink(label="Home", href="/", active=True),
        NavDropdown(
            label="Products",
            items=[
                NavLink(label="Widgets", href="/widgets"),
                NavLink(label="Gadgets", href="/gadgets")
            ]
        ),
        NavLink(label="Contact", href="/contact")
    ],
    theme="dark",
    bg_color="dark"
)

Offcanvas sidebar for mobile-friendly navigation.

Bootstrap Offcanvas Documentation

from starlette_templates.components import Sidebar, SidebarButton, NavLink

sidebar = Sidebar(
    title="Menu",
    links=[
        NavLink(label="Dashboard", href="/dashboard"),
        NavLink(label="Settings", href="/settings")
    ],
    placement="start"
)

# Toggle button for the sidebar
button = SidebarButton(target_id="sidebar-id", text="Menu")

Breadcrumb navigation for showing page hierarchy.

Bootstrap Breadcrumb Documentation

from starlette_templates.components import Breadcrumb, BreadcrumbItem

breadcrumb = Breadcrumb(items=[
    BreadcrumbItem(label="Home", href="/"),
    BreadcrumbItem(label="Products", href="/products"),
    BreadcrumbItem(label="Widget", active=True)
])

Sub-navigation component with responsive dropdown for mobile.

from starlette_templates.components import SubNav, SubNavLink

subnav = SubNav(links=[
    SubNavLink(label="Overview", href="/overview", active=True),
    SubNavLink(label="Details", href="/details"),
    SubNavLink(label="Settings", href="/settings")
])

Content Components

Card

Flexible content container with header, body, and footer.

Bootstrap Card Documentation

from starlette_templates.components import Card

card = Card(
    title="Product Name",
    content="<p>Product description goes here.</p>",
    footer="<small>Price: $19.99</small>"
)

Page header with title and optional subtitle.

from starlette_templates.components import PageHeader

header = PageHeader(
    title="Welcome",
    subtitle="Find what you're looking for"
)

Table

Responsive table component with styling options.

Bootstrap Table Documentation

from starlette_templates.components import Table

table = Table(
    data=[
        {"name": "John", "age": 30, "city": "New York"},
        {"name": "Jane", "age": 25, "city": "San Francisco"}
    ],
    striped=True,
    hover=True
)

Interactive Components

Button

Bootstrap button with variants and icons.

Bootstrap Button Documentation

from starlette_templates.components import Button

button = Button(
    content="Click Me",
    variant="primary",
    icon="bi-check",
    size="lg"
)

Dropdown menu component.

Bootstrap Dropdown Documentation

from starlette_templates.components import Dropdown, DropdownItem

dropdown = Dropdown(
    button_text="Actions",
    items=[
        DropdownItem(label="Edit", href="/edit"),
        DropdownItem(label="Delete", href="/delete"),
        DropdownItem(divider=True),
        DropdownItem(label="Archive", href="/archive")
    ],
    variant="secondary"
)

ButtonGroup

Group multiple buttons together.

Bootstrap Button Group Documentation

from starlette_templates.components import ButtonGroup

button_group = ButtonGroup(
    data=[
        {"label": "Left", "href": "#", "active": True},
        {"label": "Middle", "href": "#"},
        {"label": "Right", "href": "#"}
    ]
)

Modal dialog component.

Bootstrap Modal Documentation

from starlette_templates.components import Modal

modal = Modal(
    title="Confirm Action",
    content="<p>Are you sure you want to continue?</p>",
    footer='<button type="button" class="btn btn-primary">Confirm</button>',
    size="lg"
)

Collapse

Collapsible content component.

Bootstrap Collapse Documentation

from starlette_templates.components import Collapse

collapse = Collapse(
    button_text="Show More",
    content="<p>Hidden content that can be toggled.</p>",
    expanded=False
)

Offcanvas

Generic offcanvas component (similar to Sidebar but more flexible).

Bootstrap Offcanvas Documentation

from starlette_templates.components import Offcanvas

offcanvas = Offcanvas(
    title="Settings",
    body="<p>Settings content here.</p>",
    placement="end"
)

Feedback Components

Alert

Contextual feedback messages.

Bootstrap Alert Documentation

from starlette_templates.components import Alert

alert = Alert(
    content="Your changes have been saved successfully!",
    variant="success",
    dismissible=True,
    icon="bi-check-circle"
)

Toast

Push notifications for temporary messages.

Bootstrap Toast Documentation

from starlette_templates.components import Toast

toast = Toast(
    title="Notification",
    content="You have a new message",
    variant="info",
    autohide=True,
    delay=5000
)

Badge

Small count and labeling component.

Bootstrap Badge Documentation

from starlette_templates.components import Badge

badge = Badge(
    content="New",
    variant="danger",
    pill=True
)

Tag

Tag/chip component (badge variant) with optional remove button.

from starlette_templates.components import Tag

tag = Tag(
    content="Python",
    variant="info",
    removable=True,
    icon="bi-tag"
)

ProgressBar

Progress indicator component.

Bootstrap Progress Documentation

from starlette_templates.components import ProgressBar

progress = ProgressBar(
    value=75,
    variant="success",
    striped=True,
    animated=True,
    show_label=True
)

Spinner

Loading spinner component.

Bootstrap Spinner Documentation

from starlette_templates.components import Spinner

spinner = Spinner(
    type="border",
    variant="primary",
    size="sm",
    label="Loading..."
)

Tooltip

Hover tooltips for additional information.

Bootstrap Tooltip Documentation

from starlette_templates.components import Tooltip

tooltip = Tooltip(
    content="Hover over me",
    tooltip_text="This is a tooltip!",
    placement="top"
)

Popover

Clickable popover with title and content.

Bootstrap Popover Documentation

from starlette_templates.components import Popover

popover = Popover(
    content="Click me",
    popover_title="Information",
    popover_content="Detailed information goes here",
    placement="right"
)

List Components

ListGroup

Flexible list component with links and badges.

Bootstrap List Group Documentation

from starlette_templates.components import ListGroup, ListGroupItem

list_group = ListGroup(
    items=[
        ListGroupItem(text="Item 1", active=True, badge_text="12"),
        ListGroupItem(text="Item 2", badge_text="5"),
        ListGroupItem(text="Item 3", disabled=True)
    ],
    flush=True
)

Tabbed Content

Tabs

Tabbed navigation component.

Bootstrap Tabs Documentation

from starlette_templates.components import Tabs, TabItem

tabs = Tabs(
    tabs=[
        TabItem(id="home", title="Home", content="<p>Home content</p>", active=True),
        TabItem(id="profile", title="Profile", content="<p>Profile content</p>"),
        TabItem(id="settings", title="Settings", content="<p>Settings content</p>")
    ],
    variant="tabs"
)

Accordion

Collapsible accordion component.

Bootstrap Accordion Documentation

from starlette_templates.components import Accordion, AccordionItem

accordion = Accordion(
    items=[
        AccordionItem(title="Section 1", content="<p>Content 1</p>", expanded=True),
        AccordionItem(title="Section 2", content="<p>Content 2</p>"),
        AccordionItem(title="Section 3", content="<p>Content 3</p>")
    ],
    always_open=False
)

Media Components

Image carousel/slideshow component.

Bootstrap Carousel Documentation

from starlette_templates.components import Carousel, CarouselItem

carousel = Carousel(
    id="my-carousel",
    items=[
        CarouselItem(
            image_url="/static/img1.jpg",
            caption_title="First slide",
            caption_text="Description",
            active=True
        ),
        CarouselItem(image_url="/static/img2.jpg"),
        CarouselItem(image_url="/static/img3.jpg")
    ],
    auto_play=True,
    interval=5000
)

Icon

Bootstrap Icons component.

Bootstrap Icons Documentation

from starlette_templates.components import Icon

icon = Icon(
    name="bi-heart-fill",
    size="2rem",
    color="red"
)

Avatar

User avatar component with image or initials.

from starlette_templates.components import Avatar

# With image
avatar = Avatar(
    image_url="/static/avatar.jpg",
    size="lg",
    rounded=True,
    status="online"
)

# With initials
avatar = Avatar(
    initials="JD",
    variant="primary",
    size="md"
)

Utility Components

Pagination

Page navigation component.

Bootstrap Pagination Documentation

from starlette_templates.components import Pagination

pagination = Pagination(
    current_page=3,
    total_pages=10,
    base_url="/products",
    param_name="page",
    max_links=5
)

FilterBar

Sticky horizontal filter bar for displaying active filters.

from starlette_templates.components import FilterBar, FilterItem

filter_bar = FilterBar(
    items=[
        FilterItem(label="Category", value="Electronics"),
        FilterItem(label="Price", value="$10-$50")
    ],
    sticky=True
)

Divider

Horizontal divider with optional text.

from starlette_templates.components import Divider

divider = Divider(text="OR", margin="my-4")

CopyButton

Button to copy text to clipboard.

from starlette_templates.components import CopyButton

copy_button = CopyButton(
    text_to_copy="npm install starlette-templates",
    button_text="Copy",
    success_text="Copied!",
    variant="outline-secondary"
)

Loading & Empty States

Skeleton

Loading skeleton placeholder.

from starlette_templates.components import Skeleton

skeleton = Skeleton(
    type="text",
    lines=3,
    animation="wave"
)

EmptyState

Empty state placeholder with icon and action button.

from starlette_templates.components import EmptyState

empty_state = EmptyState(
    title="No items found",
    description="Try adjusting your filters",
    icon="bi-inbox",
    action_text="Clear Filters",
    action_href="/clear"
)

Timeline & Activity

ActivityItem

Single activity feed item.

from starlette_templates.components import ActivityItem

activity = ActivityItem(
    title="User registered",
    description="New user signed up",
    timestamp="2 hours ago",
    icon="bi-person-plus",
    icon_variant="success"
)

Timeline

Timeline component for displaying events.

from starlette_templates.components import Timeline

timeline = Timeline(
    title="Project History",
    data=[
        {
            "title": "Project Started",
            "description": "Initial commit",
            "timestamp": "Jan 1, 2024",
            "icon": "bi-flag",
            "variant": "primary"
        },
        {
            "title": "First Release",
            "timestamp": "Feb 15, 2024",
            "icon": "bi-rocket",
            "variant": "success"
        }
    ]
)

API Reference

For complete API documentation of all Bootstrap components, see the Components API Reference.