1

How am I able to use bootstrap in Craft? I created a folder in a templates directory named _layouts and inside of that I have base.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

</html>

and this is where i want to include the bootstrap (contact.html)

{% extends "_layouts/base" %}
{% macro errorList(errors) %}
{% if errors %}
<ul class="errors">
{% for error in errors %}
            <li>{{ error }}</li>
        {% endfor %}
    </ul>
{% endif %}
{% endmacro %}
{% from _self import errorList %}


<form method="post" action="" accept-charset="UTF-8">
{{ getCsrfInput() }}
<input type="hidden" name="action" value="contactForm/sendMessage">
<input type="hidden" name="redirect" value="../public/index.php/contact.html">

<h3><label for="fromName">Your Name</label></h3>
<input id="fromName" type="text" name="fromName" value="{% if message is defined %}{{ message.fromName }}{% endif %}">
{{ message is defined and message ? errorList(message.getErrors('fromName')) }}

<h3><label for="fromEmail">Your Email</label></h3>
<input id="fromEmail" type="email" name="fromEmail" value="{% if message is defined %}{{ message.fromEmail }}{% endif %}">
{{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}

<h3><label for="message">Message</label></h3>
<textarea rows="10" cols="40" id="message" name="message">{% if message is defined %}{{ message.message }}{% endif %}</textarea>
{{ message is defined and message ? errorList(message.getErrors('message')) }}

<input type="submit" class = "btn btn-submit" value="Send">
</form>

I'm having an error => "A template that extends another one cannot have a body."

2

In your base.html you need to include a block section, so something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>

Then in your contact.html you need to wrap your main markup in the same block, like this:

{% extends "_layouts/base" %}
{% macro errorList(errors) %}
{% if errors %}
<ul class="errors">
{% for error in errors %}
            <li>{{ error }}</li>
        {% endfor %}
    </ul>
{% endif %}
{% endmacro %}
{% from _self import errorList %}

{% block content %}
<form method="post" action="" accept-charset="UTF-8">
{{ getCsrfInput() }}
<input type="hidden" name="action" value="contactForm/sendMessage">
<input type="hidden" name="redirect" value="../public/index.php/contact.html">

<h3><label for="fromName">Your Name</label></h3>
<input id="fromName" type="text" name="fromName" value="{% if message is defined %}{{ message.fromName }}{% endif %}">
{{ message is defined and message ? errorList(message.getErrors('fromName')) }}

<h3><label for="fromEmail">Your Email</label></h3>
<input id="fromEmail" type="email" name="fromEmail" value="{% if message is defined %}{{ message.fromEmail }}{% endif %}">
{{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}

<h3><label for="message">Message</label></h3>
<textarea rows="10" cols="40" id="message" name="message">{% if message is defined %}{{ message.message }}{% endif %}</textarea>
{{ message is defined and message ? errorList(message.getErrors('message')) }}

<input type="submit" class = "btn btn-submit" value="Send">
</form>
{% endblock %}

So you are basically saying create an area called content in your base.html and you want to fill this area with the markup wrapped in the content block inside your contact.html. You can call the block whatever you want, so here we've called it content, it doesn't have to be that, but it seems a fairly logical name for it.

You can have more than one block in your base.html, if you want. For instance you could have a header, content and footer blocks. All you need to remember is to use the same names inside the template file you are extending the base.html from.

More information can be found in the Twig documentation

  • For what is the "block" property for ? Sorry for asking too much, i'm just starting learning craft cms – lance adrianne dela cruz Apr 19 '17 at 7:23
  • It worked now. Thank you dude. I just want to know the purpose of the block property in craft? – lance adrianne dela cruz Apr 19 '17 at 7:25
  • No problem, glad it's working. – Steve Holland Apr 19 '17 at 7:31
  • Steve. what is the purpose of the "block" property? What is it for ? – lance adrianne dela cruz Apr 19 '17 at 7:36
  • 1
    @lanceadriannedelacruz, please consider accepting Steve's answer if it solved your problem. These comments on Stack Exchange aren't intended for chat, please use the Craft Slack group if you want to ask questions and chat more broadly. There are also a lot of great resources if you're just getting started with Craft! – Matt Stein Apr 21 '17 at 4:28

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.