Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-19T07:23:30.390Z
Answers.Text: For what is the "block" property for ? Sorry for asking too much, i'm just starting learning craft cms
Answers.UserDisplayName: lance adrianne dela cruz
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-19T07:25:56.637Z
Answers.Text: It worked now. Thank you dude. I just want to know the purpose of the block property in craft?
Answers.UserDisplayName: lance adrianne dela cruz
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-19T07:31:18.217Z
Answers.Text: No problem, glad it's working.
Answers.UserDisplayName: Steve Holland
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-19T07:36:17.147Z
Answers.Text: Steve. what is the purpose of the "block" property? What is it for ?
Answers.UserDisplayName: lance adrianne dela cruz
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-19T07:42:26.707Z
Answers.Text: 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.
Answers.UserDisplayName: Steve Holland
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-19T07:43:52.677Z
Answers.Text: Ok . I got it. Thank tou Steve.
Answers.UserDisplayName: lance adrianne dela cruz
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-19T07:45:18.457Z
Answers.Text: 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.
Answers.UserDisplayName: Steve Holland
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-20T04:39:18.373Z
Answers.Text: Steven may i ask you another question ?
Answers.UserDisplayName: lance adrianne dela cruz
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-21T04:28:44.527Z
Answers.Text: @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!
Answers.UserDisplayName: Matt Stein
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-19T07:20:12.017Z
Answers.LastActivityDate: 2017-04-19T07:29:28.437Z
Answers.LastEditDate: 2017-04-19T07:29:28.437Z
Answers.UserDisplayName: Steve Holland
Body: <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>
  
Tags: <templating>
Title: Template error: A template that extends another one cannot have a body
ThreadText: # 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`
  
  ```
  <!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."
  
  **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:
  
  ```
  <!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](https://twig.sensiolabs.org/doc/2.x/tags/extends.html)
  
  > **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**: username_1. 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 username_1.  
  > **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**: @username_0, please consider accepting username_1'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!  
  
  ---
  
  