How to use Bootstrap with QuickBase?

  • 1
  • 2
  • Question
  • Updated 5 years ago
  • Answered

Twitter has developed a very popular layout and user interface library that allows you to create custom pages and forms.

Twitter Bootstrap
http://getbootstrap.com/

Have a look through the CSS and Componetns tabs and you will get a good impression of Bootstrap's capabilities.

While Bootstrap is widely used for responsive mobile applications, it is great for rapidly developing custom layouts and forms for desktop applications. Luckily you can use Bootstrap with QuickBase. Here is an application that places a gallery of Bootstrap user interface components on a QuickBase table dashboard:

Bootstrap On Table Dashboard
https://haversineconsulting.quickbase.com/db/bjdd5k6ee?a=td

The above Bootstrap markup was randomly selected from this Bootply (a web service like jsfiddle but for playing with Bootstrap):

http://www.bootply.com/iCouKp774i#

and placed in this user defined page unchanged:

MyDashboard.html User Defined Page
https://haversineconsulting.quickbase.com/db/bjdd5k6dk?a=dbpage&pagename=MyDashboard.html

To inject the Bootstrap markup into the table dashboard this generic module.js code was used in conjunction with the IRYDASMO (I Reject Your Dashboard And Substitute My Own) technique:

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=345

To avoid CSS conflicts with QuickBase's CSS a special version of Bootstrap was compiled using sassmeister.com and following the instructions in this stackoverflow.com answer:

Applying CSS styles only to certain elements
http://stackoverflow.com/questions/11831346/applying-css-styles-only-to-certain-elements/11841935#11...

The custom CSS file was generated from Bootstrap v3.2.0 and can be found here if you do not want to compile it yourself:

https://haversineconsulting.quickbase.com/db/bjdd5k6dk?a=dbpage&pagename=bootstrap-custom.css

While the Bootstrap code I placed on the table dashboard is not functional it is simple to create your own working layouts and forms by just placing your Bootstrap markup in the file MyDashboard.html - all the other setups and configurations will be handled by the generic module.js code.

Have fun using Bootstrap with QuickBase!

Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,184 Points 20k badge 2x thumb

Posted 5 years ago

  • 1
  • 2
Photo of B

B

  • 20 Points
Dan, You are the KING of Quickbase! Kudos
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,184 Points 20k badge 2x thumb
Oh that Bootstrap stuff is so yesterday - I have moved on to using Zurb Foundation with QuickBase: http://foundation.zurb.com/