# Kickstarting Integration of Twitter Bootstrap for Ref App UI for 2.6 **URL:** \ **Category:** Reference App\ **Tags:** refapp-2․6, ui\ **Created:** [January 12, 2017, 5:29pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545 "2017-01-12T17:29:16Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![ssmusoke](https://talk.openmrs.org/user_avatar/talk.openmrs.org/ssmusoke/32/8020_2.png) [@ssmusoke](https://talk.openmrs.org/u/ssmusoke)\ **Post date:** [January 12, 2017, 5:29pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/1 "2017-01-12T17:29:17Z")
Continuing the discussion from [Ideas: Look and Feel Framework for Reference Application](https://talk.openmrs.org/t/ideas-look-and-feel-framework-for-reference-application/9084) and the Design Call Notes [https://wiki.openmrs.org/display/RES/2016-12-19+Design+Forum](https://wiki.openmrs.org/display/RES/2016-12-19+Design+Forum) My understanding is that there is no general objection to moving ahead 1. No version of Bootstrap was selected but the feedback is that [https://v4-alpha.getbootstrap.com/](https://v4-alpha.getbootstrap.com/) is stable and is generally ready to go 2. Pinging @raff and [@SolDevelo](https://talk.openmrs.org/groups/soldevelo) team just a check if you have done any work in this direction. How does this affect the OWAs 3. Need to determine if the Boostrap JS is needed - can the test be to include it then see any side effects 4. What ui modules need to be updated to include the changes for this? As this discussion progresses I would to follow it up with a Design Forum to help guide the process. Hoping to tag [@dev5](https://talk.openmrs.org/groups/dev5) [@dev4](https://talk.openmrs.org/groups/dev4) [@dev3](https://talk.openmrs.org/groups/dev3) [@dev2](https://talk.openmrs.org/groups/dev2) @dev1 to provide input. ---
**Author:** ![dkayiwa](https://talk.openmrs.org/user_avatar/talk.openmrs.org/dkayiwa/32/179_2.png) [@dkayiwa](https://talk.openmrs.org/u/dkayiwa)\ **Post date:** [January 12, 2017, 7:49pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/2 "2017-01-12T19:49:36Z")
Why only tag dev4 and dev5 for input? 😉 ---
**Author:** ![ssmusoke](https://talk.openmrs.org/user_avatar/talk.openmrs.org/ssmusoke/32/8020_2.png) [@ssmusoke](https://talk.openmrs.org/u/ssmusoke)\ **Post date:** [January 12, 2017, 7:52pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/3 "2017-01-12T19:52:01Z")
@dkayiwa oops corrected ---
**Author:** ![dkayiwa](https://talk.openmrs.org/user_avatar/talk.openmrs.org/dkayiwa/32/179_2.png) [@dkayiwa](https://talk.openmrs.org/u/dkayiwa)\ **Post date:** [January 12, 2017, 8:07pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/4 "2017-01-12T20:07:05Z")
Man, while reviewing GCI tasks, i have realised that there can be some very good dev1s. Be sure that there are some good things i have learnt from them. Though a few of them may feel shy or inferior to input, but there are those who may even know more Bootstrap than a dev5 like me. 😄 ---
**Author:** ![darius](https://talk.openmrs.org/user_avatar/talk.openmrs.org/darius/32/8082_2.png) [@darius](https://talk.openmrs.org/u/darius)\ **Post date:** [January 13, 2017, 12:54am UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/5 "2017-01-13T00:54:47Z")
@ssmusoke, I hope all those other devs have better ideas than me about this, because I don’t have a lot to say. I can only really give general advice about this: I would start by defining more concretely the things you’re trying to achieve, because it will be much easier to analyze specific changes. For example: - Make the refapp UI response to scaling, from a 10" tablet up to 1.5x the current fixed width of the refapp layout - Update things so we can use the latest version of Font Awesome - Introduce xyz reusable widgets into the refapp For example thinking about a responsive UI, I assume you’d only need to introduce Bootstrap CSS for this. However I have no idea how that will interact with the current refapp style guide in the UI Commons module. If it were me I would spike on one specific page (like the clinician-facing patient dashboard). ---
**Author:** ![bholagabbar](https://talk.openmrs.org/user_avatar/talk.openmrs.org/bholagabbar/32/6079_2.png) [@bholagabbar](https://talk.openmrs.org/u/bholagabbar)\ **Post date:** [January 13, 2017, 5:48pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/6 "2017-01-13T17:48:43Z")
I used Bootstrap 3 for the [Cohort Module](https://github.com/opensrp/openmrs-module-cohort) for GSoC 16. 1. Bootstrap v4 has been in the making for over a year and a half. I don’t know how stable it is but most Bootstrap 3 is the one that’s widely in use right now. 2. I believe the soldevo made the OWA in Angular which is completely REST based but not sure what ui framework they used. 3. Bootstrap JS has a bunch of useful feature like ScrollSpys, Transitions, Modals and stuff. 4. Most likely create a new module? Why would you want to cram boostrap into existing UI functionality? It would only get more buggy and complicated. Bootstrap’s main advantage is that you can get really good responsivity for webpages provided you use the grid judiciously and have a fair of idea of where and how you would like certain elements to looks in different sizes. @ssmusoke feel free to ask for more details, would like to take this forward 🙂 ---
**Author:** ![dkayiwa](https://talk.openmrs.org/user_avatar/talk.openmrs.org/dkayiwa/32/179_2.png) [@dkayiwa](https://talk.openmrs.org/u/dkayiwa)\ **Post date:** [January 14, 2017, 7:03pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/7 "2017-01-14T19:03:09Z")
I greatly love the fact that this advice is coming from a /dev/2 Thank you so much @bholagabbar for sharing you experience with Bootstrap. Please keep it up! 😄 ---
**Author:** ![bholagabbar](https://talk.openmrs.org/user_avatar/talk.openmrs.org/bholagabbar/32/6079_2.png) [@bholagabbar](https://talk.openmrs.org/u/bholagabbar)\ **Post date:** [January 14, 2017, 7:09pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/8 "2017-01-14T19:09:41Z")
Haha no sweat. Just like @ssmusoke told me, they are just but tags 🙂 Have we had the design forum for this year? I’d like to be present then cc @darius ---
**Author:** ![dkayiwa](https://talk.openmrs.org/user_avatar/talk.openmrs.org/dkayiwa/32/179_2.png) [@dkayiwa](https://talk.openmrs.org/u/dkayiwa)\ **Post date:** [January 14, 2017, 7:17pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/9 "2017-01-14T19:17:26Z")
@bholagabbar feel free to ping @jthomas to schedule you for one of the upcoming calls. I anxiously look forward to it. 🙂 ---
**Author:** ![bholagabbar](https://talk.openmrs.org/user_avatar/talk.openmrs.org/bholagabbar/32/6079_2.png) [@bholagabbar](https://talk.openmrs.org/u/bholagabbar)\ **Post date:** [January 14, 2017, 7:24pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/10 "2017-01-14T19:24:21Z")
Sounds good. We should set a date that is mutually acceptable for @ssmusoke, @darius and maybe @raff or someone from Soldevo as well. ---
**Author:** ![themoonraker13](https://talk.openmrs.org/user_avatar/talk.openmrs.org/themoonraker13/32/1607_2.png) [@themoonraker13](https://talk.openmrs.org/u/themoonraker13)\ **Post date:** [January 16, 2017, 10:40am UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/11 "2017-01-16T10:40:55Z")
Responsiveness is something that referenceapplication badly needs to have and Bootstrap will surely address this. > [@Reference Application 2.3 - Non-Responsive UI for small screen devices](https://talk.openmrs.org/t/reference-application-2-3-non-responsive-ui-for-small-screen-devices/3898): > > The current UI (non-legacy UI) of reference application 2.3 is web-responsive i.e. the elements on a page rearrange itself with change in window size. But, the same behavior isn’t found when operating from small screen devices like mobile, tablet, etc. On viewing a running instance from mobile browser the UI somehow fits inside the screen shrinking the original UI that is observed on web browser on desktop. The UI on mobile isn’t 100% responsive as the UI elements do not rearrange themselves to… ---
**Author:** ![jthomas](https://talk.openmrs.org/user_avatar/talk.openmrs.org/jthomas/32/21_2.png) [@jthomas](https://talk.openmrs.org/u/jthomas)\ **Post date:** [January 17, 2017, 1:10pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/12 "2017-01-17T13:10:35Z")
> [@bholagabbar](#): > > We should set a date that is mutually acceptable for @ssmusoke, @darius and maybe @raff or someone from Soldevo as well. @bholagabbar, @ssmusoke, @darius and @raff would Monday, January 23rd work for you all? ---
**Author:** ![raff](https://talk.openmrs.org/user_avatar/talk.openmrs.org/raff/32/11894_2.png) [@raff](https://talk.openmrs.org/u/raff)\ **Post date:** [January 17, 2017, 1:35pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/13 "2017-01-17T13:35:03Z")
@jthomas works for me. ---
**Author:** ![ssmusoke](https://talk.openmrs.org/user_avatar/talk.openmrs.org/ssmusoke/32/8020_2.png) [@ssmusoke](https://talk.openmrs.org/u/ssmusoke)\ **Post date:** [January 17, 2017, 1:47pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/14 "2017-01-17T13:47:43Z")
Works for me ---
**Author:** ![jthomas](https://talk.openmrs.org/user_avatar/talk.openmrs.org/jthomas/32/21_2.png) [@jthomas](https://talk.openmrs.org/u/jthomas)\ **Post date:** [January 17, 2017, 6:55pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/15 "2017-01-17T18:55:28Z")
I’ll put this on the calendar for Monday then. @bholagabbar if this does not work for you for some reason please let me now. ---
**Author:** ![bholagabbar](https://talk.openmrs.org/user_avatar/talk.openmrs.org/bholagabbar/32/6079_2.png) [@bholagabbar](https://talk.openmrs.org/u/bholagabbar)\ **Post date:** [January 17, 2017, 7:01pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/16 "2017-01-17T19:01:29Z")
Hey, this works. No issues! ---
**Author:** ![burke](https://talk.openmrs.org/user_avatar/talk.openmrs.org/burke/32/17_2.png) [@burke](https://talk.openmrs.org/u/burke)\ **Post date:** [January 23, 2017, 5:02pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/17 "2017-01-23T17:02:24Z")
We discussed on the [2017-Jan-23 Design Forum](https://notes.openmrs.org/2017-01-23-Design-Forum). @bholagabbar volunteered to spike on refactoring the clinician-facing patient dashboard using Bootstrap to help us understand the level of effort it might take to do the same for other parts of the Reference Application 2.6 UI. ---
**Author:** ![reubenv](https://talk.openmrs.org/user_avatar/talk.openmrs.org/reubenv/32/3818_2.png) [@reubenv](https://talk.openmrs.org/u/reubenv)\ **Post date:** [January 23, 2017, 5:25pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/18 "2017-01-23T17:25:40Z")
@ssmusoke Wouldn’t it be better if we wait for the release of Bootstrap 4?Especially considering the fact that they have major changes in line for the same :[Differences between Bootstrap 3 and 4](http://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm) Otherwise what will happen is that we might end up using something(Bootstrap 3) which might be abandoned in the near future with the onset of Bootstrap 4 ---
**Author:** ![ssmusoke](https://talk.openmrs.org/user_avatar/talk.openmrs.org/ssmusoke/32/8020_2.png) [@ssmusoke](https://talk.openmrs.org/u/ssmusoke)\ **Post date:** [January 23, 2017, 5:31pm UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/19 "2017-01-23T17:31:43Z")
Boostrap 4 is still at least 6 months away, and there will be a transition anyway. Once in place, its easier to migrate to v4 than to start from scratch as now ---
**Author:** ![bholagabbar](https://talk.openmrs.org/user_avatar/talk.openmrs.org/bholagabbar/32/6079_2.png) [@bholagabbar](https://talk.openmrs.org/u/bholagabbar)\ **Post date:** [January 29, 2017, 10:50am UTC](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545/20 "2017-01-29T10:50:34Z")
@burke @darius @ssmusoke Alright so I began working on integrating Bootstrap into the Clinician facing dashboard. Before starting off, I decided to check the level of responsiveness in the pages e.i how they change on window resizing. It seems that the clinician facing dashboard is perfectly responsive. I believe the premise we had arrived to for integrating Bootstrap during the meeting was _Reliance on a stable, well known framework for responsiveness, cross browser compatibilty, etc_ which pointed to Bootstrap. **Seems like all the CSS for responsivity already seems to have been written, presumably in the [appui](https://github.com/openmrs/openmrs-module-appui) module**. We’re using these fragments in the `patient.gsp` display page in the [coreapps](https://github.com/openmrs/openmrs-module-coreapps) module (see [file source](https://github.com/openmrs/openmrs-module-coreapps/blob/master/omod/src/main/webapp/pages/clinicianfacing/patient.gsp)) Here are a screenshot from the demo server on mobile. It’s the same when you resize your browser window on your system. ![](https://talk.openmrs.org/uploads/default/original/2X/5/539f81be22eabaeb2606687ae97d5f2327291e0a.jpeg) Assuming I were to use Bootstrap get the columns vertically lined up, it would kinda messy because on inspecting the code, we’re using something called `firstColumnFragments` `secondColumnFragments` which lines up Diagnoses, Vitals, Appointments in the first column and the rest in the others (I _think_ that’s what they do, lots of cross dependencies across appui etc) .There would be quite a bit of clashing CSS written for the same parts of a page. I hope I was able to convey my point across, I don’t think it makes sense to integrate bootstrap into the existing at all. Currently the views seem stable and responsive. Introducing Bootstrap for responsivity doesn’t make sense because it’s already (seemingly) there. Feel free to point out anything I’ve missed or any errors in my observation. [Next page](https://talk.openmrs.org/t/kickstarting-integration-of-twitter-bootstrap-for-ref-app-ui-for-2-6/9545.md?page=2)