How to use the downloaded bootstrap files

Question

I download the files from the bootstrap site. I then moved the files into my project css and js folders. I linked them and it doesn't work. I tried it with the cdn and it works fine with that.

Here is my code:

<link href="/css/bootstrap.min.css" media="all" rel="stylesheet">

Solution 1

I believe the problem lies in the fact that u use:

/css/bootstrap.min.css

The first / indicates the root folder of your current drive, which I believe does not contain the css directory.

More particularly:

• / means the root of the current drive;

• ./ means the current directory;

• ../ means the parent of the current directory.

You should link to the correct path (absolute or relatively) of your css file. It would be a lot more probable that you need to use ../css/bootstrap.min.css or css/bootstrap.min.css, depending on your directory structure.

Solution 2

You can use Twitter Bootstrap with the Asset-Pipeline. The steps are...

1. Create the directory grails-app/assets/bootstrap
2. Copy the Twitter Bootstrap css, fonts, and js directories into the directory created in step 1. You should have a path like this, for example: grails-app/assets/bootstrap/css/bootstrap.min.css

3. Create the file grails-app/assets/bootstrap/bootstrap.css with the contents:

   +/*

   +*= require css/bootstrap.min

   +*= require css/bootstrap-theme.min

   +*/

4. Create the file app/grails-app/assets/bootstrap/bootstrap.js with the contents:

   +//= require js/bootstrap.min

5. Add the follwing to app/grails-app/assets/javascripts/application.js

   //= require bootstrap

6. Add the following to app/grails-app/assets/stylesheets/application.css

   *= require bootstrap

7. Make sure your GSP or the layout it uses pulls in the assets using the asset:stylesheet and asset:javascript tags. (This step may already done):

Solution 3

try this one..

<link href="css/bootstrap.css" media="all" type="text/css" rel="stylesheet">

its worked for me

Comments

[DJanssens]

What does your directory structure look alike?

[Taylor Gagne]

I put a picture of it

[DJanssens]

And what file is currently open? UrlMappings.groovy contains the line <link href="/css/bootstrap.min.css" media="all" rel="stylesheet">? I'm not familiar to the groovy scene, but you will need to use a path like: ../../web-app/css/bootstap-min.css. Instead you could also use the absolute path to your bootstrap.min.css file.

[Ashok Dongare]

Which version of grails are you using? You could take an advantage of either resource plugin or assets-pipeline plugin based on your grails version

[Emmanuel Rosa]

I wanted to add that code but StackOverflow rejected it. If you go to bertramdev.github.io/asset-pipeline/guide/usage.html#linking under the Views section you'll see two tags from the Asset-Pipeline TagLibrary. Those two tags process the application.js and application.css files. You'll need those two tags added either to the layout used by you GSP or in the GSP itself.

[Taylor Gagne]

I followed your instructions and the bootstrap didn't load the page correctly

[Emmanuel Rosa]

I don't know what you mean by "bootstrap didn't load the page correctly". Take a look at this changeset: bitbucket.org/erosa/masteringgrails3/commits/… It adds Twitter Bootstrap to a Grails 3 project, a project which already had the Asset-Pipeline plugin.

[Taylor Gagne]

sorry I didn't word it correctly. When the page loads the bootstrap <navbar navbar-inverse> and stuff like that doesn't display

[Emmanuel Rosa]

The Bootstrap is not loading. Since you're using Grails 2.x, check grails-app/conf/BuildConfig.groovy and make sure you've got compile ":asset-pipeline:1.9.9" in your plugins section. Note your version may be slightly different. Also check your changes against the changeset I mentioned earlier.

[Taylor Gagne]

I'm seeing compile ":asset-pipeline:2.1.5"

[Emmanuel Rosa]

Let us continue this discussion in chat.