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

It's time to add dynamic content to our OctoberCMS layout

Ok so let's create a simple site. On this site, we are going to need a Navigation, Content and a Footer.

Instead of adding it all in one file, let's make things easier for us later down the line and create partials for the Navigation and Footer.

To do this we need to create a new file in "CMS > Partials" and "+ Add". It's up to you if you want to add this file into a folder i.e. template/navigation.htm but for now let's just add it to the partials directory.

Adding a navigation partial to October CMS

Ok so let's grab the "Navbar" example from bootstrap and paste it into a file called navigation.htm in "CMS > Partials"

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">OctoberCMS</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
            </ul>
        </div>
    </nav>

Adding a footer to OctoberCMS

Next, we do the same for the footer as we did for the navigation and create a file called footer.htm under "CMS > Partials"

  <footer class="container">
    <p class="float-right"><a href="#">Back to top</a></p>
    <p>© 2017-2019 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
  </footer>

Time to setup the OctoberCMS Layout with the Partials

Ok, so we have our Navigation and footer partials ready, but we don't quite have the page content ready yet, but don't worry, this will next.

If we now open the layout.htm file under "CMS > Layouts" and we now need to remove the "Hello World!" content.

Let's add the following code to the template and save your work.

{% partial 'navigation' %}

{% partial 'footer' %}

Your layout.htm file should look like so

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>

    {% partial 'navigation' %}

    {% partial 'footer' %}

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

When you go to view the page, you should have something similar to below.

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


Adding a page to OctoberCMS

In the last section, we added the partials, but now we need to add the content from a page.

To do this all we need to do is add {% page %} to the template between the "Navigation" and "Footer" partials

    {% partial 'navigation' %}
    {% page %}
    {% partial 'footer' %}

If you go back to view your site, you will notice that not much has changed! Well, this is due to the fact we've not added any content to the page yet.

In the next part, I will be running through how to set up the page and add content blocks so that you can later set up page editors and other fun stuff.

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