BootstrapFX: Bootstrap for JavaFX

Related tags

GUI bootstrapfx
Overview

BootstrapFX

Build Status download bootstrapfx core


BootstrapFX is a partial port of Twitter Bootstrap for JavaFX. It mainly provides a CSS stylesheet that closely resembles the original while being custom tailored for JavaFX’s unique CSS flavor.

It’s worth mentioning that Twitter Bootstrap delivers more than just a standardized look for common widgets. It also provides new widgets, behavior and a grid system. Some of these features may be ported at a later stage to BootstrapFX.

Installing

You can get the latest version of BootstrapFX directly from Bintray’s JCenter repository or Maven Central.

gradle
repositories {
    jcenter()
}

dependencies {
    implementation 'org.kordamp.bootstrapfx:bootstrapfx-core:0.4.0'
}
maven
<dependencies>
    <dependency>
        <groupId>org.kordamp.bootstrapfx</groupId>
        <artifactId>bootstrapfx-core</artifactId>
        <version>0.4.0</version>
    </dependency>
</dependencies>

Once the bootstrapfx-core dependency is in your classpath you just need to apply the boostrapfx.css stylesheet to a scene, for example

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
import org.kordamp.bootstrapfx.BootstrapFX;
import org.kordamp.bootstrapfx.scene.layout.Panel;

public class Sampler extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {                   //(1)
        Panel panel = new Panel("This is the title");
        panel.getStyleClass().add("panel-primary");                            //(2)
        BorderPane content = new BorderPane();
        content.setPadding(new Insets(20));
        Button button = new Button("Hello BootstrapFX");
        button.getStyleClass().setAll("btn","btn-danger");                     //(2)
        content.setCenter(button);
        panel.setBody(content);

        Scene scene = new Scene(panel);
        scene.getStylesheets().add(BootstrapFX.bootstrapFXStylesheet());       //(3)

        primaryStage.setTitle("BootstrapFX");
        primaryStage.setScene(scene);
        primaryStage.sizeToScene();
        primaryStage.show();
    }
}
  1. Custom widget from BootstrapFX

  2. Apply CSS class to widgets

  3. Apply BootstrapFX stylesheet to scene

Building

You must meet the following requirements:

  • JDK11 as a minimum

  • Gradle 6.3

You may used the included gradle wrapper script if you don’t have gradle installed.

Installing Gradle

Manual
  1. Download Gradle from http://gradle.org/downloads

  2. Unzip the file into a directory without spaces (recommended).

  3. Create a GRADLE_HOME environment variable that points to this directory.

  4. Adjust your PATH environment variable to include $GRADLE_HOME/bin (%GRADLE_HOME%\bin on Windows).

  5. Test your setup by invoking gradle --version.

SDKMAN
  1. Follow the instructions found at http://sdkman.io/ to install SDKMAN.

  2. You need a POSIX environment if running Windows. We recommend using Babun Shell (http://babun.github.io/)

  3. Once SDKMAN is installed invoke sdk install gradle 6.3.

  4. Test your setup by invoking gradle --version.

Gum

Gum is a wrapper script that facilitates invoking gradle tasks anywhere within a Gradle project. It’s smart enough to use the gradle wrapper if available or your global gradle command. This is an optional download.

  1. Follow the instructions found at https://github.com/kordamp/gm to install gum

Next Steps

Make a full build by invoking the following command

$ gm build

Run the sampler application by invoking the following command

$ gm :sampler:run

Supported CSS Classes

Text

  • b, strong

  • i, em, italic, dfn

  • small

  • code, kbd, pre, samp

  • h1, h2, h3, h4, h5, h6

  • lead

  • p

  • text-mute

  • text-primary, text-success, text-info, text-warning, text-danger

  • bg-primary, bg-success, bg-info, bg-warning, bg-danger

Buttons

  • btn

  • btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger

  • btn-lg, btn-sm, btn-xs

SplitMenu Buttons

  • split-menu-btn

  • split-menu-btn-default, split-menu-btn-primary, split-menu-btn-success, split-menu-btn-info, split-menu-btn-warning, split-menu-btn-danger

  • split-menu-btn-lg, split-menu-btn-sm, split-menu-btn-xs

Labels

  • lbl

  • lbl-default, lbl-primary, lbl-success, lbl-info, lbl-warning, lbl-danger

Panels

  • panel

  • panel-default, panel-primary, panel-success, panel-info, panel-warning, panel-danger

  • panel-heading

  • panel-title

  • panel-body

  • panel-footer

Alerts

  • alert

  • alert-success, alert-info, alert-warning, alert-danger

Groups

  • btn-group-horizontal

  • btn-group-vertical

NOTE: all elements inside the vertical button group must have the same width.

Progress Bars

  • progress-bar-primary

  • progress-bar-success

  • progress-bar-info

  • progress-bar-warning

  • progress-bar-danger

Tooltips

  • tooltip-primary

  • tooltip-success

  • tooltip-info

  • tooltip-warning

  • tooltip-danger

Miscellaneous

  • badge

Screenshots

buttons
labels
alerts
panels
splitmenu buttons

Changelog

0.4.0
  • Full modular build.

  • JDK 11 is now the minimum requirement.

0.3.0
  • The build was updated to use a different SASS plugin.

0.2.4
  • The bootstrapfx.css file has been moved to org/kordamp/bootstrapfx/bootstrapfx.css.

0.2.3
  • Added progress-bar variants

  • Added tooltip variants

  • Tweaked menu items and menus

0.2.2
  • Add Automatic-Module-Name to JAR manifest

0.2.1
  • POM updates

0.2.0
  • SplitMenu Button support

  • Button group support

  • lead on Text

0.1.0
  • First release

Comments
  • Our Changes to the Sampler for the JPro-Demo-Page

    Our Changes to the Sampler for the JPro-Demo-Page

    We've made some changes to the project to promote it on the JPro-Demo-Page. It's accessable from the following url: https://demos.jpro.one/bootstrapfx.html

    It contains the following changes:

    • Added a link to the online-demo at jpro.one.
    • Added an ambient background to the sampler.
    • The sampler now also works as a jar. Previously, it couldn't properly load the text of the fxml-files.
    opened by FlorianKirmaier 4
  • Build failed, any idea on how to fix?

    Build failed, any idea on how to fix?

    $ gradle build :assemble UP-TO-DATE :check UP-TO-DATE :build UP-TO-DATE :bootstrapfx-core:compassCompileuri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/core_ext/kernel_require.rb:1:in `require': It seems your ruby installation is missing psych (for YAML output). To eliminate this warning, please install libyaml and reinstall your ruby. LoadError: load error: psych -- java.lang.RuntimeException: BUG: we can not copy embedded jar to temp directory require at org/jruby/RubyKernel.java:937 require at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/core_ext/kernel_require.rb:54 at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/psych_jars.rb:2 require at org/jruby/RubyKernel.java:937 (root) at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/core_ext/kernel_require.rb:1 at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/core_ext/kernel_require.rb:54 require at org/jruby/RubyKernel.java:937 (root) at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/psych.rb:3 at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/core_ext/kernel_require.rb:1 require at org/jruby/RubyKernel.java:937 require at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/core_ext/kernel_require.rb:54 (root) at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/yaml.rb:5 (root) at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/core_ext/kernel_require.rb:1 require at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/core_ext/kernel_require.rb:54 load_yaml at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems.rb:624 load_file at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/config_file.rb:328 at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/config_file.rb:197 load at org/jruby/RubyKernel.java:955 at uri:classloader:/META-INF/jruby.home/bin/gem:4 FAILED

    FAILURE: Build failed with an exception.

    Also if possible can you release the compiled css file?

    opened by akkinenirajesh 2
  • unrecognized character

    unrecognized character

    Hello. I added bootstrapfx libraray to my program. Everything is ok but when I apply this styles my code does not render '\u20bc' symbol on the table column. How can I fix this problem? At now it shows little square

    opened by sakitA 1
  • Panel heading text missing panel-title style

    Panel heading text missing panel-title style

    Using Panel constructor with title produces label with "panel-title" style, however calling setText() the style is not applied. A workaround is to call setHeading() passing a Label with "panel-title" added manually so I was wondering if this was intentional?

    public Panel(String title) {
        this();
        Label label = new Label(title);
        label.getStyleClass().add("panel-title");
        setHeading(label);
    }
    public final void setHeading(Node content) {
        this.headingProperty().set(content);
    }
    
    /* Label missing style */
    public void setText(String text) {
        headingProperty().set(new Label(text));
    }
    
    bug 
    opened by shnplr 1
  • Checkbox does not render correctly

    Checkbox does not render correctly

    CheckBoxSkin uses css selectors "box" and "mark"

    public CheckBoxSkin(CheckBox checkbox) {
        super(checkbox, new ButtonBehavior<CheckBox>(checkbox));
    
        box.getStyleClass().setAll("box");
        innerbox = new StackPane();
        innerbox.getStyleClass().setAll("mark");
        ...
    }
    

    however mark is being redefined in bootstrap.css as:

    mark,
    .mark {
      -fx-background-color: #fcf8e3;
      -fx-padding: .2em;
    }
    

    this causes the checkbox to be small and the mark is not visible - a workaround is to redefine affected check-box style e.g. from modena in your css file (loaded after bootstrapfx.css)

    .check-box:selected > .box > .mark,
    .check-box:indeterminate  > .box > .mark {
        -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    }
    .check-box > .box > .mark {
        -fx-background-color: null;
        -fx-padding: 0.416667em 0.416667em 0.5em 0.5em; /* 5 5 6 6 */
    }
    .check-box:indeterminate  > .box > .mark {
        -fx-padding: 0.666667em; /* 16x16 = 8+8 */
    }
    
    opened by shnplr 1
  • size classes don't work on Label

    size classes don't work on Label

    First, Thank you for the fantastic implementation! I just started using it and I saw the label's supported classes don't work. Here's the code:

    Label lbl = new Label("some text"); lbl.getStyleClass().setAll("lbl", "h1", "lbl-primary");

    but works on the Text class. Thanks again

    opened by Moubassher 0
  • Added samples to jfx-ensemble.com

    Added samples to jfx-ensemble.com

    I've been working on my new jpro/javafx sample site www.jfx-ensemble.com and decided to add some bootstrapfx-samples as a starting point.

    You can check out the samples with the following link: https://www.jfx-ensemble.com/?page=results/search/bootstrapfx

    The PR contains a json-file that lists all samples and some preview images. I also slightly change the demo-project to be part of the release. With this PR I should be able to add future versions of bootstrapfx to https://www.jfx-ensemble.com just by changing the version-number in the ensemble project.

    opened by FlorianKirmaier 1
  • Accessing this library from Gluon's SceneBuilder?

    Accessing this library from Gluon's SceneBuilder?

    I'd like to use this bootstrap css framework, but accessed through the Gluon SceneBuilder. I see there is an "add css stylesheet" in the menu of the SceneBuilder but I am not sure how this can be combined with the add-on mentioned above? Also asked on SO: https://stackoverflow.com/questions/61170165/add-a-bootstrap-css-stylesheet-to-gluon-scenebuilder-for-javafx

    question 
    opened by seinecle 1
  • There is an official documentation?

    There is an official documentation?

    Although I know the basics of bootstrap for web development, is hard to know how to properly add classes to a jfx element. It would be a lot easier if there was a documentation page.

    question 
    opened by DevTony101 6
  • Outline Buttons

    Outline Buttons

    Hey. Are Outline Buttons planned?

    I miss them. Can you please add them?

    https://getbootstrap.com/docs/4.0/components/buttons/#outline-buttons

    Thanks a lot. This is even without it awesome!!

    enhancement 
    opened by Bixilon 3
Releases(v0.4.0)
  • v0.4.0(May 6, 2021)

    Changelog

    • 5be5458 Prepare for release
    • 3501bb9 Open modules
    • 1b1dd8f Update Github workflow
    • 53c17a7 Configure build to use modules

    Contributors

    Andres Almiray

    Source code(tar.gz)
    Source code(zip)
  • v0.3.0(May 6, 2021)

    Changelog

    • e25cb0d Prepare for release
    • 3b1d031 Prepare for release
    • dbe1913 Disable gradle daemon on CI
    • 9823461 Update build
    • 83dda76 Update readme
    • ba3ad4a Update readme
    • 717cf36 Update travis and gha settings
    • db59ba7 Update build settings
    • f44ce6d Update README.adoc
    • 3a67c8c Update README.adoc
    • 410c216 Update README.adoc
    • 4e7926e Update README.adoc
    • f575e8b Create FUNDING.yml
    • 2693a18 Update build settings
    • 759e67c Update build settings
    • 5c40d96 Mixed updates
    • baa73c9 Merge pull request #8 from FlorianKirmaier/master
    • d8ee0f5 Update travis settings
    • 606ddf4 Update project setup
    • a5b3abc Updated RichtextFX, especially for the reduced memory-usage for JPro.
    • c3879ee Merge pull request #7 from FlorianKirmaier/master
    • 87f83c3 Added myself as author
    • ea0e683 Fixed the instructions to run JPro
    • d606d8f fixed link in the Readme.
    • f757116 fixed Sampler
    • 6fd1dcf removed the duplicated image
    • 2518a7e Moved the JPro-App to an own subproject
    • 30c4547 fixing travis
    • 51ada12 fixed link
    • 9d4ba01 Added JPro to the sampler project. Added a link to the online-demo at jpro.one. Added an ambient background to the sampler. The sampler now also works as a jar. Previously, it couldn't properly load the text of the fxml-files.
    • e596325 Fix artifact metadata in JAR
    • d924408 Fix minpom generation

    Contributors

    Andres Almiray, GitHub, aalmiray, Florian Kirmaier, floriankirmaier

    Source code(tar.gz)
    Source code(zip)
  • v0.2.4(May 6, 2021)

    Changelog

    • 7844dfd Multiple updates: - Check Java11 compatibility - Add minimum POM to JAR file - Dependency updates
    • 1890ce2 Update project settings
    • f85b8e9 Update dependencies; upgrade to Gradle 4.10

    Contributors

    aalmiray

    Source code(tar.gz)
    Source code(zip)
  • v0.2.3(May 6, 2021)

    Changelog

    ✅ Issues

    • 2519489 Setting a new title on a Panel obliterates the predefined CSS style class. Fixes #3

    • 1f33e76 Fix readme
    • 2a1896d Added tooltip support
    • 3cbeb52 Add progress-bar support
    • eabe685 Update styles for menu items
    • 6b6135e Configure automatic sync to maven central
    • 44db168 Update dependencies
    • 53ee987 Update license headers
    • 00ca5c3 Update gradle wrapper
    • 10c3a43 Update changelog
    • 377ee3f Fix badge link in readme

    Contributors

    aalmiray

    Source code(tar.gz)
    Source code(zip)
  • v0.2.2(May 6, 2021)

    Changelog

    • 2cdc46c Add build badge to readme
    • a11fd15 Do not execute Travis with JDK9 due to a problem with JRuby (compass plugin)
    • 81f9516 Apply license headers to build files
    • 3e20ae4 Build updates - update dependencies - update gradle wrapper to 4.4 - add atomatic-module configuration - upgrade travis to oraclejdk9
    • 23f0509 Update build settings
    • 120fa0b Update patreon link [ci skip]
    • 9b5f337 Add Patreon badge to readme
    • 0c7f090 Update dependencies
    • 9f612e1 Update dependencies
    • 109de18 Update gradle wrapper to 3.4.1
    • 3c209b5 Update gradle wrapper to 3.3
    • a6d69ff Update license headers
    • 40fb866 Add link to maven central to README

    Contributors

    aalmiray

    Source code(tar.gz)
    Source code(zip)
  • v0.2.1(May 6, 2021)

    Changelog

    • 93021bd Version updates; prepare release to maven central
    • 5a33841 Set Panel.body as default FXML property
    • 570b7a3 Update dependencies
    • db81f08 Tweak JAR manifest options
    • b4373de Link images in README
    • a5ddc54 Add sampler screenshots

    Contributors

    aalmiray

    Source code(tar.gz)
    Source code(zip)
  • v0.2.0(May 6, 2021)

    Changelog

    ✅ Issues

    • 8cf4174 Remove definitions for style. Fixes #1
    • c2ed131 Simplify styles; remove form styles. Fixes #1

    • 82f72fc Getting ready for release
    • bb285eb Add btn-group styles
    • 5f2c64e Define selected state for toggle-button
    • 35b8eaa Update build dependencies
    • 63fe611 Update readme
    • c10966d Update dependencies
    • 1aaf1a1 Update license headers
    • 4d3ab8d Add missing paragraph.fxml file
    • d41efe8 Update gradle wrapper to 2.9
    • 5c11abf Update dependencies
    • 3d89ca5 Fix license headers; bump version to 0.2.0-SNAPSHOT

    Contributors

    aalmiray

    Source code(tar.gz)
    Source code(zip)
  • v0.1.0(May 6, 2021)

    Changelog

    • d78c8a2 Fix readme
    • 6144a28 Remove scenicView properties from index
    • 3b6a1ea Initial commit
    • 37b736f Init repository

    Contributors

    aalmiray

    Source code(tar.gz)
    Source code(zip)
Owner
Kordamp
Kordamp
Lib-Tile is a multi Maven project written in JavaFX and NetBeans IDE 8 and provides the functionalities to use and handle easily Tiles in your JavaFX application.

Lib-Tile Intention Lib-Tile is a multi Maven project written in JavaFX and NetBeans IDE and provides the functionalities to use and handle easily Tile

Peter Rogge 13 Apr 13, 2022
DataFX - is a JavaFX frameworks that provides additional features to create MVC based applications in JavaFX by providing routing and a context for CDI.

What you’ve stumbled upon here is a project that intends to make retrieving, massaging, populating, viewing, and editing data in JavaFX UI controls ea

Guigarage 110 Dec 29, 2022
Collection of Binding helpers for JavaFX(8)

Advanced-Bindings for JavaFX (8) advanced-bindings is a collection of useful helpers and custom binding implementations to simplify the development of

Manuel Mauky 63 Nov 19, 2022
Docking framework for JavaFX platform

Docking framework for JavaFX platform AnchorFX is a gratis and open source library for JavaFX to create graphical interfaces with docking features Anc

Alessio Vinerbi 197 Oct 15, 2022
A library of +70 ready-to-use animations for JavaFX

AnimateFX A library of ready-to-use animations for JavaFX Features: Custom animations Custom interpolators Play/Stop animation Play an animation after

Loïc Sculier 366 Jan 5, 2023
A Java framework for creating sophisticated calendar views (JavaFX 8, 9, 10, and 11)

CalendarFX A Java framework for creating sophisticated calendar views based on JavaFX. A detailed developer manual can be found online: CalendarFX 8 D

DLSC Software & Consulting GmbH 660 Jan 6, 2023
Allow runtime modification of JavaFX CSS

cssfx ⚠ WARNING ⚠ In version 11.3.0 we have relocated & refactored the project. maven groupId has been changed to fr.brouillard.oss java module name h

Matthieu Brouillard 134 Jan 2, 2023
A JavaFX UI framework to create fully customized undecorated windows

CustomStage A JavaFX undecorated stage which can fully be customized Donations If this project is helpful to you and love my work and feel like showin

Oshan Mendis 186 Jan 6, 2023
MDI components for JavaFX

DesktopPaneFX DesktopPaneFX is a JavaFX version of Swing’s JDesktopPane which can be used as a container for individual "child" similar to JInternalFr

Kordamp 58 Sep 23, 2022
Efficient VirtualFlow for JavaFX

Flowless Efficient VirtualFlow for JavaFX. VirtualFlow is a layout container that lays out cells in a vertical or horizontal flow. The main feature of

null 163 Nov 24, 2022
A framework for easily creating forms for a JavaFX UI.

FormsFX Forms for business application made easy. Creating forms in Java has never been this easy! Maven To use this framework as part of your Maven b

DLSC Software & Consulting GmbH 534 Dec 30, 2022
:icecream: iOS frosty/translucent effect to JavaFX

FroXty is JavaFX library which replicates the famous iOS translucent effect with ease. Set-up FroXty can be imported into your project either by downl

Giorgio Garofalo 33 Dec 11, 2022
💠 Undecorated JavaFX Scene with implemented move, resize, minimise, maximise, close and Windows Aero Snap controls.

Support me joining PI Network app with invitation code AlexKent FX-BorderlessScene ( Library ) ?? Undecorated JavaFX Scene with implemented move, resi

Alexander Kentros 125 Jan 4, 2023
Dynamic JavaFX form generation

FXForm 2 Stop coding forms: FXForm 2 can do it for you! About FXForm2 is a library providing automatic JavaFX form generation. How does it work? Write

dooApp 209 Jan 9, 2023
A JavaFX library that allows Java2D code (Graphics2D) to be used to draw to a Canvas node.

FXGraphics2D Version 2.1, 3 October 2020. Overview FXGraphics2D is a free implementation of Java's Graphics2D API that targets the JavaFX Canvas. It m

David Gilbert 184 Dec 31, 2022
Auto updating launcher for JavaFX Applications

FXLauncher Auto updating launcher for JavaFX Applications. Combined with JavaFX native packaging, you get a native installer with automatic app update

Edvin Syse 694 Dec 27, 2022
Controls for adding Parallax effects for Java (JavaFX)

FXParallax Parallax framework for Java (JavaFX). This framework adds controls to add Parallax effects to JavaFX application, this effect can add a sen

Pedro Duque Vieira 36 Sep 30, 2022
Ribbon control for Java, created in JavaFX

FXRibbon Ribbon control for Java, using JavaFX framework, based on Microsoft Ribbon. If you want to support the development of this library consider a

Pedro Duque Vieira 224 Dec 27, 2022
A library for JavaFX that gives you the ability to show progress on the Windows taskbar.

A clean and easy way to implement this amazing native Windows taskbar-progressbar functionality in javaFX Background Since Windows 7 there is a taskba

Daniel Gyoerffy 77 Nov 28, 2022