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

How to create a Bootstrap 4 Page Layout for October CMS

Using October CMS theme creator form the backend

  1. First, create a new Template in OctoberCMS by visiting backend/cms/themes.
  2. Choose "Create a new blank theme" and fill out your theme details and save.
  3. Once saved you can now activate that theme.

Once we have activated the theme from the backend, we can now go to the "CMS > Layouts" Section.

In layouts click the "+ Add" button and create a file called app.htm and save.

We now have a layout file that we can start building the layout with.

Now we need to add the Bootstrap code to the layout.htm file. For this, I will use the example page from the Bootstrap 4 Docs

<!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>
    <h1>Hello, world!</h1>

    <!-- 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>

Once you have this saved in your layout file, you probably want to see the result on the page.

First, we need to create a "Page", so if you now click on "CMS > Pages" and "+ Add"

Then for the title we will add "Home Page", for the "URL" this needs to be /, and lastly, we need to assign the "Layout" to the "Page", so select the "Layout" dropdown and select app and then save.

Now if you goto your homepage you will see the Hello World! page.

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


Were done

Well, we're not quite there yet! In this tutorial, we created a new Theme, added a page and added a layout. In the next part, we will be adding partials to our layout so that we can keep our code clean and tidy, and more importantly, easy to read...

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