In this tutorial, you will learn about some important considerations when using Bootstrap with Episerver CMS. Understanding how your HTML will integrate into Episerver is an important step when building a website. Creating websites with static HTML layouts is a well-solved problem. When you deliver systems that allow content editors to define the page layouts, you add in an extra level of HTML grid complexity that you need to understand in order to get beautiful and well-crafted HTML. I tend to favour using Bootstrap as the grid layout when I build websites. In this tutorial, I'm assuming you've come to the same conclusion. In Bootstrap each row in the grid should be made up of 12 columns, simple 😎

If you enable Episerver display options feature (allow content editors to re-size blocks), you run the risk of content editors not adhering to this principle. With BootStrap and display options, you may have to deal with the challenge of the columns within the rows not adding up to 12 😱😱😱

As a general rule of thumb with any CMS system... the more control you give to the content editors, the fewer guarantees you will have over what the final page mark-up will be when it is rendered. In today's tutorial, I'm going to ask the question... does that really matter? How important is that?

Bootstrap Classes Explained

Ok, so having a good understanding of the Bootstrap grid is probably a good place to start. When you build your web pages with Bootstrap, the main content section on a page will usually be built with a single parent container, consisting of multiple rows, each consisting of 12 columns.

The container class as the name implies, defines the parent container for the section. The row classes within that container, represent rows. A row works the same way a table does, each row class marks the start of a new row in the grid. In order for components to display nicely within a row, the row is split into columns. When added onto some HTML, the column class specifies how wide the component should stretch in that row. Should it stretch for half a grid, the full grid etc... The bootstrap framework was written to a 12 column grid layout, so rows should contain no more than 12 columns. In Bootstrap, columns are represented with the col class.

Episerver Mark-Up Explained

When we work with Episerver, our web pages are normally made up of one or more content areas each containing, one or more blocks. As you know the bootstrap HTML will be built using classes called container, row and col, so where do you add these classes in relation to your Episerver pages templates and blocks?

You won't find my first answer very useful... where you should add these things will vary based on how you built your website. Episerver is really flexible and depending on your business requirements, the control you want to give your content editors, and the amount of development time you want to invest in customizing a solution bespoke to your needs will determine how you configure Episerver.

I understand that if you don't understand the different ways of structuring Episerver, like adding validation into the editor, or, creating custom HTML renderers to ensure your bootstrap classes are injected how you want them to.... telling you that the solution is up to you, isn't helpful!

When I first start working with companies new to Episerver, and I start explaining this paradox between blocks and complexity it is not uncommon for people to get it at first. Talking about Episerver solution architecture is a big topic and outside this tutorial, however, from my experience, the best way for you to learn is to roll your sleeves up and start integrating your HTML using the different approaches.

In this tutorial, I'm going to assume that you're using the row class wrapped around your content area and within each block, you set the column class. This creates a dilemma. Episerver will allow content editors to add as many blocks into a content area as they want. If you specify the column width inside your blocks HTML the content editor can keep adding blocks until the row width exceeds 12 columns... so is this a big deal?

Do We Care That Columns Don't Add Up To 12?

From my experience, this is one of the first considerations designers will need to ask themselves when integrating Bootstrap into Episerver. Unless you want to write some custom code and validation, rows will exceed 12 columns. THe below quote is taken from the bootstrap website about rows that exceed 12 columns:

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"

In most situations, your blocks will wrap onto the next line and the end-user won't notice a thing, so why use the row class at all? The row class is used to make sure that all of the divs inside of it appear on their own line. Technically, it's OK to have more than 12 columns in a single row using bootstrap, however, if you adopt this approach all over your website, it is very likely that you will notice height and strange layout issues. If a row contains more than 12 columns, the components might not get the correct spacing between rows and your pages might look funny.

Without the row class column height will affect how things wrap. This is because Bootstrap uses CSS floats. So by default, if you allow content editors to drop as many blocks as they want into a content area, you will very likely have height misalignment issues all over your website.

As you're leaving a lot of the layout to the content editor, my recommendation is to get a developer to configure Episerver in such a way that content editors are forced to work with blocks that ensure the end markup is valid. Bootstrap has been designed to work with 12 columns, and if you don't stick to that principle your HTML may act in unexpected ways. In 90% of the time it might look OK, but, for a little extra consideration and effort, you can turn your website into a masterpiece.

I think we can all agree that if we went to a car dealership and the salesman said, sure the car works most of the time but sometimes it can behave 'unexpectedly' on occasion... none of us would buy that car and would consider it a bit janky and shoddy. A website isn't as life-critical as us crashing a car on the motorway, however, if you take payments on your website, do you want to risk losing a sale due to bad page design, when with a little bit of extra effort you can ensure everything works as it should?

So to answer the original post's question, when you use Episerver you need to take into consideration the end HTML Episerver produces. In Episerver content editors can drag as many blocks as they want to within a content area. This flexibility means they may exceed Bootstraps 12 columns per row. Exceeding the limit will probably work in 90% of the cases, however, the column height will probably be a little off and misaligned.

You can fairly easily configure Episerver to produce the HTML that you want. You can prevent content editors exceeding 12 columns using a custom validation attribute for example. If like me, you really care about quality and delivering a good customer experience and you want to make your website look and work in a consistent manner that reflects your designs, then you will need to go a little bit further down the rabbit hole and customise Episerver a little to allow that. The other option instead of going custom is to use the excellent BootStrap aware plugin written by Valdis Iljuconoks, EPiBootstrapArea. Instead of worrying about it, use a plug-in instead! This is my recommended approach and I think you should check it out. Best of all its free 💵💵💵

Happy Coding 🤘