Create a Bootstrap 4 Page Layout for October CMS - Part 3

Adding content to OctoberCMS

Now that we have added our partials to the layout, we can now focus on the content.

To do this we now need to go to our "CMS > Page" and open the "Home Page" file.

Using some bootstrap examples, let's add a Jumbotron and a Services section.

Adding the Bootstrap Jumbotron

    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-4">Our Acme. Company</h1>
            <p class="lead">Some dummy content to show what we have...</p>
        </div>
    </div>

Adding a Services section to our layout

For the Services section was going to have 3 columns for each service and that will be like so

    <div class="container">
    <!-- row of columns -->
    <div class="row">
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
      </div>
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
      </div>
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
      </div>
    </div>

If you now go and check the page, you should have the same as below

Create a Bootstrap 4 Page Layout for October CMS - Part 3


Creating Content Blocks in OctoberCMS

Now that we have the pages and partials in place, we can now focus on the content. To add content we're going to extract it from the "Home Page" file and add it into separate files.

There are a few different ways you can do this with the content, but it does depend on you. I will do it the way I do it so that I can add a content editor later and can edit each section of text separately. This is my preference and your free to do it any way you like.

Let's start by creating a new content file, as before, you can split these files into folders, but for now, I'm just adding them into the content folder for ease.

Goto "CMS > Content" and create a new file. For the filename were going to go with jumbotron.htm and add the following

<h1 class="display-4">Our Acme. Company</h1>
<p class="lead">Some dummy content to show what we have...</p>

And save the file. If you view the page nothing will have changed yet as we have not added the content file to the page. To do this we add {% content 'jumbotron' %} to the "Home Page" file like so

    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            {% content 'jumbotron' %}
        </div>
    </div>

We have now created a content block... You can do this for the services and see how you get on.

Conclusion

I hope this has helped you a little to understand how the templating system works in OctoberCMS. If you have any questions, feel free to contact me or comment below.

Part 1 - Creating the Layout Part 2 - Adding Content Part 3 - Adding Content