Bootstrap CSS with IBM BPM Coaches
Many of us are aware of what bootstrap is and how that can
help in creating a responsive UI that will adjust the UI layout based on the
device in which the screen is opened. In this post let us look at how to build
a near responsive UI with stock coach components using bootstrap. The idea is
to exploit the bootstrap’s concept of dividing the screen in to twelve columns
to adjust the layout automatically based on the screen resolution.
Before going further, the first thing that needs to be done
is download the bootstrap CSS and import that as a managed web file in to your
toolkit / process app.
Now we will have to create several containers such as rows
/columns that uses the bootstrap CSS as shown below. These columns are key to
the responsiveness of the UI when the screen/browser resolution is changed.
Now let us see how to create these containers. Below is how the Btstrp Container Fluid is created.
Add the bootstrap related items to the included scripts of
the Coach view as shown in the below figure.
![]() |
Bootstrap container fluid CV behavior tab |
Go to layout and add the custom html with elements and
container as shown in below image.
Let us see one more example (Btstrp 10 column)
Now place these container in the coach / coach view to align
the UI components (coach views), in the pattern as shown below.
Bootstrap Container Fluid --> Bootstrap
Row -->
Bootstrap column(s) -->
CV component(s) in each column. Below image shows the arrangement in coach.
When we run the human screen, below are the screen layout
when browser is maximized and browser with lesser size.
To achieve absolute responsiveness, we may have to create
more containers which can be used based on the device sizes, with the containers
that were shown above we can achieve desired responsiveness of the screen.
Thanks for Stopping by!! Hope this is useful.
No comments:
Post a Comment