2

How is the easiest way to include bootstrap to Craft? I've seen there's already a bootstrap.php in the "app" folder... what can I do with this guy?

  • I assume you're referring to this Bootstrap. Craft's craft/app/bootstrap.php file (while sharing the same name) has nothing to do with it. – Brad Bell Jun 11 '17 at 21:44
7

That's how I do it, not sure if there's an easiest way...

Just call header and footer via include > /craft/templates/index.html

{% include '_header' %}
...your content goes in between...
{% include '_footer' %}

Then load bootstrap CSS on craft/templates/_header.html

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

Same with craft/templates/_footer.html

<script src="/js/bootstrap.js"></script>

PS. CSS/JS folders gotta be /public/css and /public/js

|improve this answer|||||
1

Leowebguy pretty much nailed it. I made a scaffold for setting up craft with Foundation 6 if you want to peek through it. Its the same idea, but I've done all the set up for your gulpfile and such if you want to use SASS or any preprocessing. It's a bit different that Bootstrap, as they use grunt by default if I'm not mistaken, but figured I would throw in my two cents.

https://github.com/prkirby/craft-foundation-scaffold

|improve this answer|||||
1

I do things mostly the same way leowebguy does. I'd just add a comment on his, but I don't have enough points yet.

I've got a _layout/base.html file which has some basic structure, and it calls header & footer files.

But intead of calling my scripts this way:

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

I do it with the twig include function, like so:

{% includeCssFile "/css/bootstrap.min.css" %}

{% includeJsFile "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" %}
{% includeJsFile "/js/bootstrap.min.js" %}
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.