Just before we finished installing TYPO3 in part 1, the Installation Tool asked us if we wanted to create an empty starting page. By selecting this option, the Install Tool added a new Root page into the Page Tree.

What are Root pages? A single TYPO3 installation can support multiple websites, each with its own domain, templates and content. Every site you have will need its own Root page from which you will add your child pages and content inside it. Note that a Root Page will always have a globe icon next to it.

So in our example we've got a single website with a single Root page. However, if in the future we wanted to create a second website, we would just need to create a second Root page and attach a domain to it.

To create a new page in the Page Tree we drag the Page icon and place it inside our root page.

• We need to give it a name
• It will be disabled by default (red icon) and can be enabled by right-clicking and selecting Enable, once you're happy for the world to see it.
• If we have multiple pages in the tree, we can change their order and even nest them by dragging each page to its desired location.

In my example, I have three pages in total. My Root page, which I've called Home and then an About page and a Contact page.

You can find out more about working with pages by visiting the Pages section in the TYPO3 Editors Guide.

Once we’ve created and configured our sites pages, one of the first things we’ll want to do is add content to them.

Content comes in many different forms, be it paragraphs of text, images, a web form or a plugin from a third party extension.

Content elements are more than just content, they are objects that we can translate, set publish and expiry dates for and we can even reference them in multiple places on our TYPO3 site.

To add content to a page, first select the page in the page tree and then select create new content. We are then presented with a range of content elements that we can add to our page.

In my example, I'm going to select the Regular Text element and add a simple "Hello World!".

If we go ahead and view our page in the frontend (by right clicking on it in the page tree and selecting Show), I'm afraid we're going to be very disappointed.

And that's because we haven't installed any frontend templates, yet. And instead TYPO3 is displaying the default welcome to TYPO3 message with my Hello World content element underneath it.

We've installed the Bootstrap Package, but now we need to load it into our site.

From the left hand side, select:

TypoScript > Root Page > Edit TypoScript Record > Edit the whole TypoScript record

From the General Tab, remove all of the TypoScript in the Setup field, this is TypoScript that generates the "Welcome to TYPO3" message and we don't need it.

Then select the Advanced Options tab.

• Load Bootstrap Package Full
• Make sure both Fluid Content Elements and Fluid Content Elements CSS are NOT selected.

Head back to the Page module, select the About page and then select Edit Page Properties.

Select the Appearance tab, we now have quite a range of different backend layouts to choose from. You can find out more about backend layouts by visiting the site package guide,

But for now I'm going to select the Default backend layout and view my page in the frontend once more.

We now have a working frontend for our site and everything we see can be modified or even removed.

• The TYPO3 CMS Bootstrap Package logo can be replaced with your own logo or be removed
• Our two pages, About and Contact are visible (don't forget to add a shortcut "Home" link so users can return to your home page)
• My Hello World content is visible
• It says "English" in the footer, that's because the default language for my site is set to English and if I add more languages, I can switch between them using the language selector in the footer. I can also remove the switcher if I know I won't be adding any other languages.
• The footer message "Running with TYPO3 ..." can also be removed or modified.
• Finally, the font - this too can also be changed.

But how do we change these values?

Head back to the TypoScript module on the left hand side.

TypoScript > Root Page > Constant Editor

From here we can customise the Bootstrap Package and change a number of things, including the logo, colour scheme, font and much more.

Each setting has a respective category, for example if I want to change my site's colour scheme, I'll need to select "styling" from the drop-down.

Don't forget to select Save one you've made all of your changes.

We've installed the Bootstrap Package and now have a responsive frontend for our site.