---
title: "Old Templates Conversion"
slug: "old-templates-conversion"
updated: 2024-10-17T15:35:25Z
published: 2024-10-17T15:35:25Z
canonical: "learn.servitly.com/old-templates-conversion"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Old Templates Conversion

If you try to open an already defined template within the Design View, it is possible that you will see only Custom HTML blocks. This is because the old templates were using the *grid-system* layout instead of the new one (*d-flex*).

The Design View supports only the *d-flex* layout, you are free to keep using the *grid-system*, but in case you want to switch to *d-flex*, here is an example you can follow to convert templates.

#### OLD TEMPLATE

```xml
<div class="row">
 <div class="col-md-3 col-sm-3 col-xs-12">
 <thing-details-widget>...</thing-details-widget> 
 </div>
 <div class="col-md-3 col-sm-3 col-xs-12">
 <thing-details-widget>...</thing-details-widget> 
 </div>
 <div class="col-md-3 col-sm-3 col-xs-12">
 <gauge-widget>...</gauge-widget> 
 </div>
</div>
```

#### NEW TEMPLATE

```xml
<div class="d-flex flex-wrap components-row">
 <thing-details-widget>...</thing-details-widget> 
 <thing-details-widget>...</thing-details-widget> 
 <gauge-widget>...</gauge-widget> 
</div>
```

As you can see, it is enough to remove all the intermediate DIV elements representing columns and change the root DIV to use the new *d-flex* layout.