---
title: "Portal Editing - Basic HTML"
canonical: "https://support.soutron.net/space/KNOW/201326607/Portal%20Editing%20-%20Basic%20HTML"
format: markdown
---
A quick reference for editing Soutron portal page templates using basic HTML, font styling, and Bootstrap 5.3 components.

**Quick answer**

Portal pages in Soutron support standard HTML plus Bootstrap 5.3 components, so headings, font styling, links, images, and pre-built Bootstrap alerts, accordions, cards, lists, buttons, tooltips, and pagination can all be added directly in the portal template editor.

 

## Expected result

The portal page renders with the applied HTML formatting as soon as the template is saved: headings display at the size given by the CSS already applied to the site, styled text and links render as configured, and any Bootstrap component added displays and behaves according to that component's default Bootstrap 5.3 styling.

 

## Explanation

> ✅ Before editing any portal page ensure you have a copy of your template HTML, save it to a text editor file such as notepad.

### **Headings**

Different sized headings can be applied using heading tags, the larger the number the smaller the font. The actual size of the font for each heading might vary depending on CSS already applied to your site so be prepared to try different options if adding a heading.

**Heading types: **

# <h1>Large heading</h1>

## <h2>Large heading</h2>

### <h3>Large heading</h3>

#### <h4>Large heading</h4>

### **Font styles**

There are many ways to style font, some of the main styling options are shown below.

**Bold: **<strong>**Bold**</strong>

**Underlined:** <u><u>Underlined</u></u>

**Colour: **<p style=”color:#f9021f”><span style="color: #bf2600">Red</span></p>

**Size: **<p style=”font-size:13px”>small font</p>

### Text blocks

Text is usually wrapped in **<p>The library is now open.</p>** tags.

### Links

Hyperlinks can be added to and text

<p>Click **<a href=”https://google.com”>here</a>** to view.</p>

Use ***target=”_*****blank”** to open a link in a new window.

<p>Click **<a href=”https://google.com” target=”_blank”>here</a>** to open in new window.</p>

### Images

Images can be inserted directly into the template, this will upload the image to the database and include a reference in the template such as:

**<img src=”/downloadurl/123.jpg”/>**

Or you can link to an image hosted elsewhere such as:

**<img src=”https://www.soutron.com/wp-content/uploads/2023/04/soutron-knowledge-image.jpg.webp” />**

### Bootstrap

The portal utilizes bootstrap to allow styling to be simplified. This means you can use pre-defined HTML to add components to your portal.

A few useful bootstrap functions are:

**Alerts:** [https://getbootstrap.com/docs/5.3/components/alerts/](https://getbootstrap.com/docs/5.3/components/alerts/) 

Alerts are used to provide a small but useful feedback or message to the end user regarding the action they are trying to perform or performing. You can have alerts of different types.

![image](media://0ec72d2f-ba26-452a-9f72-e72bda31ff94)

**Accordion:** [https://getbootstrap.com/docs/5.3/components/accordion/](https://getbootstrap.com/docs/5.3/components/accordion/) 

Accordions are used to display relevant or related information in collapsible style. The header provides an overview, where the body has the details. Only one of items can be open at a time.

![image](media://d4a06afc-e631-4fac-a4c8-07f5877d6031)

**Cards: **[https://getbootstrap.com/docs/5.3/components/card/](https://getbootstrap.com/docs/5.3/components/card/) 

A card is a flexible and extensible content container with lots of modification available. Using card you can showcase a content in a visually attractive way.

![image](media://86b2272d-3465-4e8c-9f94-ba9830456f27)

**Lists:** [https://getbootstrap.com/docs/5.3/components/list-group/](https://getbootstrap.com/docs/5.3/components/list-group/) 

As it's name suggest, you can use list group to show series of information about any content. It is an organized way of displaying related and important information.

![image](media://3389d66b-44ff-401f-bf89-66cd0ff75f01)

**Buttons:** [https://getbootstrap.com/docs/5.3/components/buttons/](https://getbootstrap.com/docs/5.3/components/buttons/) 

Buttons are one of the most used components. It has many variants for different use case. These are also modifiable as per your need.

![image](media://38e1a6e7-4314-4db1-a4cb-492740fbb49d)

**Tooltips: **[https://getbootstrap.com/docs/5.3/components/tooltips/](https://getbootstrap.com/docs/5.3/components/tooltips/) 

Tooltips are used in detailed documentation about anything to provide a short but useful information. These can also be linked to other parts if needed.

![image](media://171a81b2-c0a9-421d-8ad9-021cd997b351)

**Pagination:  **[https://getbootstrap.com/docs/5.3/components/pagination/](https://getbootstrap.com/docs/5.3/components/pagination/)  

A beautiful way of navigation between different pages or parts. It helps to jump to any pages directly or go through one by one using the previous or next option.

![image](media://eebd5544-a45f-44b0-9eaf-304fca05fee4)

 

## Escalation

|  |  |
| --- | --- |
| **Escalate when** | A template edit breaks portal rendering, a Bootstrap component does not display or behave as expected after following this guide, or CSS already applied to the site conflicts with the heading or font styling described above and cannot be resolved by adjusting the style attributes shown. |
| **Contact** | Raise a support ticket via the support portal |
| **Include** | The portal site URL, a copy of the original template HTML saved before editing, the edited template HTML, and a screenshot of the rendering issue. |