In order to start with using custom HTML blocks, it's always good to have a starting block. The benefits of the v1 editor is that it creates pages using the very popular Bootstrap framework. However, this is only version 3.4.1 of Bootstrap.

It still makes it super quick to create a very basic section to build on.

Sadly, there are always caveats to making something and with v1 Teachable.

This block would work great but because of the way that Teachable alternates between white and light grey backgrounds, the 'container' part along with the 'block' part will mean you may end up with a white box centred inside a grey box. Not very pretty.

There are a few tweaks we can make to this block that will make things look better.

The height of the block will grow as we add more text or images to the section. For now, let's try to sort out the unsightly grey stripes. For the result below, I've added a thin grey line to show you where the container-fluid ends.

If you give this simply example a go, what happens if you remove the 'block' class from the first 'div'?

Bootstrap works with a group of twelve (12) columns. You may notice the classes col-md-12. The 12 represents 12 units or columns wide. In the next lecture you'll see different combinations of the columns that all add up to a total width twelve units.