### Complete FastHTML Bootstrap Application

Source: https://context7.com/answerdotai/fh-bootstrap/llms.txt

A full application setup including a navigation bar, hero container with images, and a footer using Bootstrap components.

```python
from fasthtml.common import *
from fh_bootstrap import (
    bst_hdrs, Navbar, Container, ContainerT, Image,
    Icon, Toc, BstFooter, SizeT, PlacementT, placehold
)

app, rt = fast_app(hdrs=bst_hdrs)

@rt('/')
def get():
    navbar = Navbar(
        id="main-nav",
        selidx=0,
        items=[("Home", "/"), ("Docs", "/docs"), ("About", "/about")],
        text="My App",
        dark=True,
        placement=PlacementT.StickyTop
    )

    content = Container(
        H1("Welcome to My App"),
        Image(src=placehold(600, 400), caption="Hero image", sz=SizeT.Md),
        P("This is a FastHTML application using Bootstrap components."),
        Div(
            Icon("fa-brands fa-github", href="https://github.com", dark=True),
            Icon("fa-brands fa-twitter", href="https://twitter.com", dark=True),
            cls="d-flex gap-2 my-4"
        ),
        typ=ContainerT.Basic,
        cls="py-5"
    )

    footer = BstFooter(
        copy="© 2024 My App",
        img=Span("🚀"),
        img_href="/",
        cs=[A("Privacy", href="/privacy", cls="nav-link px-2 text-muted")]
    )

    return Title("My App"), navbar, content, footer, Script("initTOC();")

serve()
```

--------------------------------

### Configure Bootstrap Navbars

Source: https://context7.com/answerdotai/fh-bootstrap/llms.txt

Build responsive navigation bars with support for branding, active states, and right-aligned content.

```python
from fh_bootstrap import Navbar, NavText, SizeT, ContainerT, PlacementT

# Define navigation items as (text, href) tuples
nav_items = [
    ("Home", "/"),
    ("Products", "/products"),
    ("About", "/about"),
    ("Contact", "/contact")
]

# Create navbar with brand and active item
navbar = Navbar(
    id="main-nav",
    selidx=0,  # Home is active
    items=nav_items,
    text="My Brand",
    image="/static/logo.png",
    hdr_href="/",
    dark=True,
    expand=SizeT.Lg,
    toggle_text="Menu",
    container=ContainerT.Fluid,
    placement=PlacementT.StickyTop,
    ra_items=NavText("Welcome, User!")
)

# Navbar with custom FT elements and multiple right-aligned items
from fasthtml.common import *

custom_navbar = Navbar(
    id="custom-nav",
    selidx=1,
    items=[
        ("Dashboard", "/dashboard"),
        ("Settings", "/settings"),
        A("Custom Link", href="/custom", cls="nav-link text-warning")
    ],
    text="App Name",
    dark=False,
    ra_items=[
        NavText("Status: Online"),
        A("Logout", href="/logout", cls="btn btn-outline-danger btn-sm ms-2")
    ]
)
```

--------------------------------

### Initialize FastHTML with Bootstrap Headers

Source: https://context7.com/answerdotai/fh-bootstrap/llms.txt

Include the bst_hdrs tuple in your FastHTML application to load necessary CSS, JavaScript, and Font Awesome icons.

```python
from fasthtml.common import *
from fh_bootstrap import bst_hdrs

# Create FastHTML app with Bootstrap headers
app, rt = fast_app(hdrs=bst_hdrs)

@rt('/')
def get():
    return Titled("My Bootstrap App",
        P("Bootstrap is now enabled!")
    )

serve()
```

--------------------------------

### Create Font Awesome Icons with Bootstrap Styling

Source: https://context7.com/answerdotai/fh-bootstrap/llms.txt

Use the Icon component to create Font Awesome icons, optionally styled as Bootstrap buttons. Pass Font Awesome class names to the `ico` parameter. Set `button=False` to render just a link.

```python
from fh_bootstrap import Icon

# Icon button (default)
github_btn = Icon(
    ico="fa-brands fa-github",
    href="https://github.com/myrepo",
    dark=True,
    sz="lg"
)

# Icon without button styling (just a link)
external_icon = Icon(
    ico="fa-solid fa-external-link-alt",
    href="https://example.com",
    button=False,
    target="_blank"
)

# Social media icons row
social_icons = Div(
    Icon("fa-brands fa-twitter", href="https://twitter.com/user", dark=True),
    Icon("fa-brands fa-linkedin", href="https://linkedin.com/in/user", dark=True),
    Icon("fa-brands fa-youtube", href="https://youtube.com/channel", dark=True, sz="sm"),
    cls="d-flex gap-2"
)
```

--------------------------------

### Render Responsive Images

Source: https://context7.com/answerdotai/fh-bootstrap/llms.txt

Generate figure elements with captions, retina support, and responsive sizing.

```python
from fh_bootstrap import Image, SizeT

# Basic image with caption floated left
img_left = Image(
    src="/images/photo.jpg",
    alt="A beautiful photo",
    caption="Figure 1: Sample photograph",
    sz=SizeT.Md,
    left=True,
    pad=3
)

# Image floated right without retina support
img_right = Image(
    src="/images/diagram.png",
    alt="System diagram",
    caption="Architecture overview",
    sz=SizeT.Lg,
    left=False,
    retina=False,
    capcls="text-muted"
)

# Small image with custom styling
thumbnail = Image(
    src="/images/thumb.jpg",
    alt="Thumbnail",
    sz=SizeT.Sm,
    cls="rounded shadow"
)
```

--------------------------------

### Create Bootstrap Containers

Source: https://context7.com/answerdotai/fh-bootstrap/llms.txt

Use the Container component to define fixed-width, fluid, or responsive layouts using the ContainerT enum.

```python
from fh_bootstrap import Container, ContainerT

# Basic fixed-width container
basic = Container(
    H1("Welcome"),
    P("This is a basic container"),
    typ=ContainerT.Basic
)

# Fluid full-width container
fluid = Container(
    H1("Full Width"),
    P("This container spans the entire viewport"),
    typ=ContainerT.Fluid
)

# Responsive container that becomes full-width below 'lg' breakpoint
responsive = Container(
    H1("Responsive"),
    P("Full width on smaller screens"),
    typ=ContainerT.Lg,
    cls='my-4'
)
```

--------------------------------

### Define Individual Navbar Items

Source: https://context7.com/answerdotai/fh-bootstrap/llms.txt

Create specific navigation items with active, disabled, or custom attribute states.

```python
from fh_bootstrap import NavbarItem

# Active navigation item (current page)
home_item = NavbarItem(
    text="Home",
    href="/",
    current=True
)

# Disabled navigation item
disabled_item = NavbarItem(
    text="Coming Soon",
    href="#",
    disabled=True
)

# Item with custom attributes
custom_item = NavbarItem(
    text="External",
    href="https://example.com",
    target="_blank",
    rel="noopener"
)
```

--------------------------------

### Generate Placeholder Image URLs with placehold

Source: https://context7.com/answerdotai/fh-bootstrap/llms.txt

The `placehold` utility function generates placeholder image URLs from placehold.co. It's useful for prototyping. The `Image` component can directly use these URLs for creating placeholder images with captions.

```python
from fh_bootstrap import placehold, Image

# Generate placeholder URL
placeholder_url = placehold(800, 600)  # Returns: 'https://placehold.co/800x600'

# Use with Image component
demo_image = Image(
    src=placehold(400, 300),
    alt="Placeholder image",
    caption="400x300 placeholder"
)

# Multiple placeholder sizes for responsive testing
thumbnails = Div(
    Img(src=placehold(100, 100), cls="m-1"),
    Img(src=placehold(150, 150), cls="m-1"),
    Img(src=placehold(200, 200), cls="m-1"),
    cls="d-flex"
)
```

--------------------------------

### Create Bootstrap-Styled Footers with BstFooter

Source: https://context7.com/answerdotai/fh-bootstrap/llms.txt

The BstFooter component generates a Bootstrap-styled footer. It supports copyright text, a centered logo/image link, and right-aligned navigation items. Custom styling can be applied using the `cls` and `style` parameters.

```python
from fh_bootstrap import BstFooter
from fasthtml.common import *

# Create footer with copyright, logo, and nav links
footer = BstFooter(
    copy="© 2024 My Company, Inc",
    img=Img(src="/logo.svg", width=40, height=40),
    img_href="/",
    cs=[
        A("Home", href="/", cls="nav-link px-2 text-muted"),
        A("Features", href="/features", cls="nav-link px-2 text-muted"),
        A("Pricing", href="/pricing", cls="nav-link px-2 text-muted"),
        A("FAQs", href="/faq", cls="nav-link px-2 text-muted"),
        A("About", href="/about", cls="nav-link px-2 text-muted")
    ]
)

# Footer with custom styling
styled_footer = BstFooter(
    copy="© 2024 Tech Corp",
    img=Span("🚀", style="font-size: 2rem"),
    img_href="/",
    cs=[
        A("Privacy", href="/privacy", cls="nav-link px-2 text-muted"),
        A("Terms", href="/terms", cls="nav-link px-2 text-muted")
    ],
    cls="bg-light"
)
```

--------------------------------

### Generate Table of Contents with Toc Component

Source: https://context7.com/answerdotai/fh-bootstrap/llms.txt

The Toc component creates a two-column layout with a sticky table of contents. It automatically extracts headings from content and generates navigation links. Requires `initTOC()` JavaScript to be called. Adjust `width` to control TOC column span.

```python
from fh_bootstrap import Toc
from fasthtml.common import *

# Page with table of contents (default 2-column width for TOC)
page_with_toc = Toc(
    H2("Introduction"),
    P("Welcome to the documentation..."),

    H2("Getting Started"),
    P("First, install the package..."),

    H3("Installation"),
    P("Run pip install..."),

    H2("API Reference"),
    P("The following functions are available..."),

    width=2  # TOC takes 2 columns, content takes 10
)

# Wider TOC sidebar
docs_page = Toc(
    H2("Overview"),
    P("This guide covers..."),
    H2("Configuration"),
    P("Set the following options..."),
    width=3  # TOC takes 3 columns, content takes 9
)

# Don't forget to initialize TOC in your page script
Script("initTOC();")
```

--------------------------------

### Bootstrap Type Enums Reference

Source: https://context7.com/answerdotai/fh-bootstrap/llms.txt

The library provides type enums for Bootstrap class generation: `ContainerT` for container types, `SizeT` for responsive breakpoints, `PlacementT` for navbar positioning, and `PositionT` for CSS positioning.

```python
from fh_bootstrap import ContainerT, SizeT, PlacementT, PositionT

# ContainerT enum values
ContainerT.Basic    # 'container'
ContainerT.Fluid    # 'container-fluid'
ContainerT.Sm       # 'container-sm'
ContainerT.Md       # 'container-md'
ContainerT.Lg       # 'container-lg'
ContainerT.Xl       # 'container-xl'
ContainerT.Xxl      # 'container-xxl'

# SizeT enum values (for responsive breakpoints)
SizeT.Default       # ''
SizeT.Sm            # 'sm'
SizeT.Md            # 'md'
SizeT.Lg            # 'lg'
SizeT.Xl            # 'xl'
SizeT.Xxl           # 'xxl'

# PlacementT enum values (for navbar positioning)
PlacementT.Default       # ''
PlacementT.FixedTop      # 'fixed-top'
PlacementT.FixedBottom   # 'fixed-bottom'
PlacementT.StickyTop     # 'sticky-top'
PlacementT.StickyBottom  # 'sticky-bottom'

# PositionT enum values
PositionT.Static    # 'position-static'
PositionT.Relative  # 'position-relative'
PositionT.Absolute  # 'position-absolute'
PositionT.Fixed     # 'position-fixed'
PositionT.Sticky    # 'position-sticky'
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.