<p>In your <code>base.html</code> you need to include a <code>block</code> section, so something like this:</p>

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

<p>Then in your <code>contact.html</code> you need to wrap your main markup in the same <code>block</code>, like this:</p>

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

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

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

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

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

&lt;input type="submit" class = "btn btn-submit" value="Send"&gt;
&lt;/form&gt;
{% endblock %}
</code></pre>

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

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

<p>More information can be found in the <a href="https://twig.sensiolabs.org/doc/2.x/tags/extends.html" rel="nofollow noreferrer">Twig documentation</a></p>

CC BY-SA 3.0
2017-04-19T07:23:30.390Z
For what is the "block" property for ? Sorry for asking too much, i'm just starting learning craft cms
lance adrianne dela cruz
CC BY-SA 3.0
2017-04-19T07:25:56.637Z
It worked now. Thank you dude. I just want to know the purpose of the block property in craft?
lance adrianne dela cruz
CC BY-SA 3.0
2017-04-19T07:31:18.217Z
No problem, glad it's working.
Steve Holland
CC BY-SA 3.0
2017-04-19T07:36:17.147Z
Steve. what is the purpose of the "block" property? What is it for ?
lance adrianne dela cruz
CC BY-SA 3.0
2017-04-19T07:42:26.707Z
They just act as placeholders so you can inject markup into the right place in your template. In the parent template (your `base.html`) you tell it where you want to inject the markup and in your child template `contact.html` you tell it what you want to inject.
Steve Holland
CC BY-SA 3.0
2017-04-19T07:43:52.677Z
Ok . I got it. Thank tou Steve.
lance adrianne dela cruz
CC BY-SA 3.0
2017-04-19T07:45:18.457Z
No worries. It's worth having a read through the Twig docs (I've put a link in the answer). They're fairly short, but pretty well written.
Steve Holland
CC BY-SA 3.0
2017-04-20T04:39:18.373Z
Steven may i ask you another question ?
lance adrianne dela cruz
CC BY-SA 3.0
2017-04-21T04:28:44.527Z
@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](https://straightupcraft.com/articles/getting-started-with-craft-cms) if you're just getting started with Craft!
Matt Stein
CC BY-SA 3.0
2017-04-19T07:20:12.017Z
2017-04-19T07:29:28.437Z
2017-04-19T07:29:28.437Z
Steve Holland
<p>How am I able to use bootstrap in Craft? I created a folder in a templates directory named <code>_layouts</code> and inside of that I have <code>base.html</code></p>

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

&lt;/html&gt;
</code></pre>

<p>and this is where i want to include the bootstrap (contact.html)</p>

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


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

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

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

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

&lt;input type="submit" class = "btn btn-submit" value="Send"&gt;
&lt;/form&gt;
</code></pre>

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

<templating>
Template error: A template that extends another one cannot have a body
# Template error: A template that extends another one cannot have a body

(Asked by: username_0 on 2017-04-19)

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









and this is where i want to include the bootstrap (contact.html)
{% extends "_layouts/base" %}
{% macro errorList(errors) %}
{% if errors %}

{% for error in errors %}
            {{ error }}
        {% endfor %}
    
{% endif %}
{% endmacro %}
{% from _self import errorList %}



{{ getCsrfInput() }}



Your Name

{{ message is defined and message ? errorList(message.getErrors('fromName')) }}

Your Email

{{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}

Message
{% if message is defined %}{{ message.message }}{% endif %}
{{ message is defined and message ? errorList(message.getErrors('message')) }}




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

**Tags:** templating

---

## 1 answers

### Answer by username_1 on 2017-04-19. Score: 2 | Accepted answer

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







{% block content %}{% endblock %}



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

{% for error in errors %}
            {{ error }}
        {% endfor %}
    
{% endif %}
{% endmacro %}
{% from _self import errorList %}

{% block content %}

{{ getCsrfInput() }}



Your Name

{{ message is defined and message ? errorList(message.getErrors('fromName')) }}

Your Email

{{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}

Message
{% if message is defined %}{{ message.message }}{% endif %}
{{ message is defined and message ? errorList(message.getErrors('message')) }}



{% 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

> **Comments:**
> **username_0**: For what is the "block" property for ? Sorry for asking too much, i'm just starting learning craft cms  
> **username_0**: It worked now. Thank you dude. I just want to know the purpose of the block property in craft?  
> **username_1**: No problem, glad it's working.  
> **username_0**: Steve. what is the purpose of the "block" property? What is it for ?  
> **username_1**: They just act as placeholders so you can inject markup into the right place in your template. In the parent template (your `base.html`) you tell it where you want to inject the markup and in your child template `contact.html` you tell it what you want to inject.  
> **username_0**: Ok . I got it. Thank tou Steve.  
> **username_1**: No worries. It's worth having a read through the Twig docs (I've put a link in the answer). They're fairly short, but pretty well written.  
> **username_0**: Steven may i ask you another question ?  
> **username_2**: @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](https://straightupcraft.com/articles/getting-started-with-craft-cms) if you're just getting started with Craft!  

---

