Twitter Bootstrap Question posted in

GRAILS – How to start using Twitter Bootstrap in Grails 3.2.9 and what's the best way to do it?

What’s the way to use Bootstrap in Grails 3.2.9? How to start? Should I use any plugins?

Tags:

2

Answers


  1. 0

    To follow best practices use the Grails Asset Pipeline. It may take a bit of practice to understand how the pipeline works but the general ideas are highlighted well in this SO Answer. The pipeline will create folders for your assets, (css, javascript, images for example) and you need to place your bootstrap files in the proper locations. Make sure you remember that Bootstrap requires jQuery.

    Please note that all JavaScript plugins require jQuery…

    So be sure to include jQuery in your javascript folder. The other concept to grasp is creating the manifest file. For javascript assets it might look similar to:

    Example file path: 

    grails-app/assets/javascripts/application.js

    Example file contents:

    //This is a JavaScript file with its top level require directives
//= require jquery
//= require app/models.js
//= require_tree views
//= require_self
console.log("This is my javascript manifest");

    Then in the view you would like to uses the assets in, include the bootstrap assets by declaring:

    <head>
    <asset:stylesheet href="application.css"/> //This assumes the standard pipeline path
    <asset:javascript src="application.js"/>
    <asset:link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>

    Hopefully that helps you get started with loading Bootstrap via the asset pipeline.

    Login or Signup to reply.
  2. 0

    You can use webjars

    build.grade

    dependencies {
    ...
    compile "org.webjars:bootstrap:3.3.5"
}

    grails-appstylesheetsapplication.css

    *= require /webjars/bootstrap/3.3.5/css/bootstrap

    grails-appjavascriptsapplication.js

    //= require /webjars/bootstrap/3.3.5/js/bootstrap.min
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search