Expand description
§dioxus-bootstrap-css
Type-safe Bootstrap 5.3 components for Dioxus.
This crate provides a 1-to-1 mapping of every Bootstrap 5.3 component as Dioxus RSX components. All interactive behaviors (modals, dropdowns, accordions, carousels, etc.) are driven by Dioxus signals — zero JavaScript required.
§Quick Start
use dioxus::prelude::*;
use dioxus_bootstrap_css::prelude::*;
fn app() -> Element {
let theme = use_signal(|| Theme::Dark);
rsx! {
ThemeProvider { theme }
BootstrapHead {}
Container {
h1 { "Hello Bootstrap!" }
Button { color: Color::Primary, "Click me" }
}
}
}§Bootstrap HTML → Dioxus RSX
| Bootstrap HTML | Dioxus RSX |
|---|---|
<div class="container"> | Container { } |
<div class="row"><div class="col-md-6"> | Row { Col { md: ColumnSize::Span(6) } } |
<button class="btn btn-primary"> | Button { color: Color::Primary } |
<a class="btn btn-primary" href="/page"> | Button { color: Color::Primary, href: "/page" } |
<div class="card"><div class="card-body"> | Card { body: rsx! { } } |
<div class="alert alert-danger"> | Alert { color: Color::Danger } |
<span class="badge text-bg-success"> | Badge { color: Color::Success } |
<i class="bi bi-search"> | Icon { name: "search" } |
<div class="modal"> + JS | Modal { show: signal, title: "..." } |
<div class="dropdown"> + JS | Dropdown { open: signal, toggle: rsx! { }, menu: rsx! { } } |
<div class="carousel"> + JS | Carousel { active: signal, slides: vec![...] } |
<div class="accordion"> + JS | Accordion { open: signal } |
<div class="toast"> + JS | Toast { show: signal, title: "..." } |
<div class="offcanvas"> + JS | Offcanvas { show: signal, title: "..." } |
<div class="tooltip"> + JS | Tooltip { text: "...", children } |
<div class="popover"> + JS | Popover { title: "...", body: rsx! { }, children } |
<html data-bs-theme="dark"> | ThemeProvider { theme: signal } |
<nav><ol class="breadcrumb"> | Breadcrumb { BreadcrumbItem { } } |
<ul class="list-group"> | ListGroup { ListGroupItem { } } |
<div class="input-group"> | InputGroup { InputGroupText { }, Input { } } |
<div class="progress"> | Progress { ProgressBar { value: 50.0 } } |
<div class="spinner-border"> | Spinner { } |
data-bs-spy="scroll" | Scrollspy { target: "body", active: signal } |
§Modules
Every Bootstrap component has its own module. Import everything via the prelude.