yew-bootstrap

yew-bootstrap is a collection of frontend components made to simplify the usage of Bootstrap 5 within the Yew framework.

Usage

This project assumes that you have an existing web application that uses the Yew framework. If you do not, refer to Yew Getting Started to get started.

Add the dependency next to the regular yew dependency:

[dependencies]
yew = "0.20"
yew-bootstrap = "0.5.0"

Then in the beginning of your application, include the include_cdn() or include_inline() function to load the required CSS and JS, either from JSDeliver CDN or to inline the CSS:

    fn view(&self, _ctx: &Context<Self>) -> Html {
        html! {
            <>
                {include_cdn()}
                <Button style={Color::Primary}>{"Primary"}</Button>
            </>
        }
    }

Coverage

Core Content

• Container (<Container>)
• Grid (<Row>, <Column>)
• Display headings
• Lead
• Blockquote
• Image/Figure
• Table
• Forms

Components

• Accordion
• Alert (<Alert>)
• Badge
• Breadcrumb
• Button (<Button>)
• Button group (<ButtonGroup>)
• Card
• Carousel
• Close button
• Collapse
• Dropdown
• List group
• Modal
• Navbar (<NavBar>, <NavItem>, <NavDropdown>, <NavDropdownItem>)
• Navs & tabs
• Offcanvas
• Pagination
• Placeholders
• Popovers
• Progress
• Scrollspy
• Spinner
• Toast
• Tooltips

Helpers

• Clearfix
• Colored links (<Link>)
• Stacks
• Stretched (<Link stretched={true}>)
• Text truncation
• Vertical/Horizontal rule/line (<Line>)