How to create a Bootstrap 4 Page Layout for October CMS
Using October CMS theme creator form the backend
- First, create a new Template in OctoberCMS by visiting
- Choose "Create a new blank theme" and fill out your theme details and save.
- 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
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.
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...