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?

1
  • 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

There are other ways, but since you've asked for the easiest, that's how I'd do it...

Just add it to /templates/_layout.twig and extend it to other templates: like /templates/index.twig starts with {% extends "_layout" %}

<!doctype html>
<html>
<head>
    ...
    <link rel="stylesheet" href="/css/bootstrap.css">
    ...
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col">
            {% block content %}{% endblock %}
        </div>
    </div>
</div>
// don't forget jquery/popper here
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.js"></script>
</body>
</html>

PS. Make sure `bootstrap.css` and `bootstrap.js` are placed in `/web/css` and `/web/js`
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

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" %}

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.