Craft CMS Asked on August 16, 2021
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?
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`
Answered by Leoncio on August 16, 2021
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.
Answered by Paul Kirby on August 16, 2021
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" %}
Answered by SamC on August 16, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP