<a href="#"> <img src="/ASSETS/logo.svg" alt="Kotlin-Bootstrap logo" width="200" height="165"> </a> <h3 align="center">Kotlin Bootstrap</h3> ⚡Highly experimental library built on top of the <a href="https://github.com/varabyte/kobweb" target="_blank" rel="noopener noreferrer">Kobweb</a> (Compose HTML framework). It allows you to use the official <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Bootstrap</a> UI components with Kotlin and Jetpack Compose, to build a frontend on the web. You are required to use the kobweb framework, otherwise it won't work. At the moment, components are not yet fully customizable, but I'll work on it. ⚽ The goal is to release all bootstrap components, and only then work on it's customization furthermore. Silk UI layer which is included with Kobweb is not required for this library to work.

Available Components

Button
IconButton
Input
Dropdown
TextArea
Checkbox
RadioButton
Switch
Alert
Toast
Modal
Select
Range
Progress
Spinner
Tooltip
Collapse
Carousel
Breadcrumb
Accordion
NavBar
Offcanvas
Badge
CloseButton
ColorPicker
FilePicker
Pagination

Bootstrap Icons usage

Icons

Install

Update a Project level build.gradle.kts file:

repositories {
    ..
    maven(url = "https://jitpack.io")
}

Update a site module build.gradle.kts file:

kotlin { 
    sourceSets {
        ..
        val jsMain by getting {
            dependencies {
                ..
                implementation("com.github.stevdza-san:KotlinBootstrap:0.1.6")
            }
        }
    }
}

Button

<img src="/ASSETS/buttons.png" alt="Buttons Preview" width="812"> <img src="/ASSETS/loadingButton.gif?raw=true" width="268"/> <img src="/ASSETS/loadingButtonText.gif?raw=true" width="268"/> <img src="/ASSETS/badgeButton.gif?raw=true" width="268"/> A simple button usage:

BSButton(
    text = "Sign in",
    onClick = {}
)

You can update your button state to loading, as well as specify the exact Loading Text (optional):

var buttonLoading by remember { mutableStateOf(false) }
BSButton(
    text = "Sign in",
    loading = buttonLoading,
    loadingText = "Please wait...",
    onClick = { buttonLoading = true }
)

Add a Badge to your button:

BSButton(
    text = "Shopping Cart",
    badge = ButtonBadge(
        text = "10"
    ),
    onClick = {}
)

Buttons with custom properties. <img src="/ASSETS/custombuttons.gif?raw=true" alt="CustomButtons Preview" width="812">

Column(modifier = Modifier.gap(20.px).fillMaxSize()) {
    Row(modifier = Modifier.gap(12.px)) {
        BSButton(
            text = "Apply Now",
            customization = ButtonCustomization(
                color = Colors.White,
                hoverColor = Colors.White,
                backgroundColor = Colors.Black,
                hoverBackgroundColor = rgba(0, 0, 0, 0.8),
                fontFamily = "Space Grotesk"
            ),
            onClick = {}
        )
        BSButton(
            text = "Get Started",
            customization = ButtonCustomization(
                color = Colors.White,
                hoverColor = Colors.White,
                activeColor = Colors.WhiteSmoke,
                borderColor = Colors.White,
                hoverBorderColor = Colors.White,
                activeBorderColor = rgb(168, 192, 255),
                gradient = linearGradient(
                    from = rgb(168, 192, 255),
                    to = rgb(63, 43, 150),
                    dir = LinearGradient.Direction.ToTopRight
                ),
                borderRadius = BSBorderRadius(all = 50.px),
                horizontalPadding = 1.25.cssRem
            ),
            onClick = {}
        )
    }
    Row(modifier = Modifier.gap(12.px)) {
        BSButton(
            text = "Submit",
            customization = ButtonCustomization(
                color = Colors.White,
                hoverColor = Colors.Wheat,
                activeColor = Colors.White,
                borderColor = Colors.White,
                hoverBorderColor = Colors.Wheat,
                activeBorderColor = Colors.White,
                gradient = linearGradient(
                    from = rgb(188, 78, 156),
                    to = rgb(248, 7, 89),
                    dir = LinearGradient.Direction.ToTopRight
                ),
                borderRadius = BSBorderRadius(topLeft = 20.px, bottomRight = 20.px),
                fontFamily = "Rubik"
            ),
            onClick = {}
        )
    }
}

IconButton

BSIconButton is a component used to display a Bootstrap Icon (BSIcons) inside a button. You can customize similar properties like with a regular BSButton as well. A basic usage:

Column(modifier = Modifier.gap(20.px).fillMaxSize()) {
    Row(modifier = Modifier.gap(12.px)) {
        BSIconButton(
            icon = BSIcons.UPLOAD,
            onClick = {}
        )
        BSIconButton(
            icon = BSIcons.UPLOAD,
            variant = ButtonVariant.PrimaryOutline,
            onClick = {}
        )
    }
    Row(modifier = Modifier.gap(12.px)) {
        BSIconButton(
            icon = BSIcons.ANDROID,
            variant = ButtonVariant.Success,
            onClick = {}
        )
        BSIconButton(
            icon = BSIcons.ANDROID,
            variant = ButtonVariant.SuccessOutline,
            onClick = {}
        )
    }
}

Input

<img src="/ASSETS/inputs.gif?raw=true" alt="Inputs Preview" width="360"> A simple usage with a placeholder:

var inputValue by remember { mutableStateOf("") }
BSInput(
    value = inputValue,
    placeholder = "Type here",
    onValueChange = {
        inputValue = it
    }
)

Floating style input field, where a label is animated:

BSInput(
    value = inputValue,
    label = "Email Address",
    floating = true,
    onValueChange = {}
)

Positive validation style input field:

BSInput(
    value = inputValue,
    label = "Email Address",
    placeholder = "Type here",
    validation = InputValidation(
      isValid = true
    ),
    onValueChange = {}
)

Negative validation style input field:

BSInput(
    value = inputValue,
    label = "Email Address",
    placeholder = "Type here",
    validation = InputValidation(
      isInvalid = true
    ),
    onValueChange = {}
)

Disabled input field:

BSInput(
    value = inputValue,
    label = "Email Address",
    placeholder = "Type here",
    disabled = true,
    onValueChange = {}
)

Plain text input field:

BSInput(
    value = inputValue,
    label = "Email Address",
    placeholder = "Type here",
    plainText = true,
    onValueChange = {}
)

Dropdown

<img src="/ASSETS/dropdowns.png" alt="Dropdown Preview" width="812"> <img src="/ASSETS/placeholderDropdown.gif?raw=true" width="268"/> <img src="/ASSETS/darkBackgroundDropdown.gif?raw=true" width="268"/> <img src="/ASSETS/disabledDropdown.gif?raw=true" width="268"/> Dropdown with a placeholder:

BSDropdown(
    placeholder = "Select a Platform",
    items = listOf("Android", "iOS", "Web"),
    onItemSelect = { index, value -> }
)

Dropdown with a dark background:

BSDropdown(
    items = listOf("Android", "iOS", "Web"),
    darkBackground = true,
    onItemSelect = { index, value -> }
)

Disabled Dropdown item:

BSDropdown(
    items = listOf("Android", "iOS", "Web"),
    disabledItems = listOf("iOS"),
    onItemSelect = { index, value -> }
)

TextArea

<img src="/ASSETS/textarea.gif?raw=true" alt="TextArea Preview" width="460"> Basic TextArea example with a label:

var value by remember { mutableStateOf("") }
BSTextArea(
    value = value,
    label = "Email Address",
    placeholder = "Type here...",
    onValueChange = { value = it }
)

Floating TextArea:

var value by remember { mutableStateOf("") }
BSTextArea(
    value = value,
    label = "Email Address",
    floating = true,
    onValueChange = { value = it }
)

Checkbox

<img src="/ASSETS/checkboxes.gif?raw=true" alt="Checkboxes Preview" width="280"> Basic Checkbox usage:

BSCheckbox(
    label = "Kotlin",
    onClick = {}
)

Reversed order checkbox:

BSCheckbox(
    label = "C++",
    reverse = true,
    onClick = {}
)

Toggle button style checkbox:

BSCheckbox(
    label = "Python",
    toggleButton = true,
    onClick = {}
)

RadioButton

<img src="/ASSETS/radiobuttons.gif?raw=true" alt="RadioButtons Preview"> Basic RadioButtonGroup usage:

BSRadioButtonGroup {
    BSRadioButton(label = "Android", onClick = {})
    BSRadioButton(label = "iOS", onClick = {})
    BSRadioButton(label = "Web", onClick = {})
}

RadioButtonGroup in a horizontal orientation:

BSRadioButtonGroup(inline = true) {
    BSRadioButton(label = "Android", onClick = {})
    BSRadioButton(label = "iOS", onClick = {})
    BSRadioButton(label = "Web", onClick = {})
}

ToggleButton style of a RadioButtonGroup:

BSRadioButtonGroup(toggleButton = true) {
    BSRadioButton(label = "Android", onCl

KotlinBootstrap

Install / Use

README