Layouts

Features 2024年1月08日

Layout Grid

The layout is based on a 12 column layout from Bootstrap 5. It includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. You can choose columns preset or set your grid. The grid system is responsive, and the columns will re-arrange depending on the screen size. Each Row can have its column structure and unique settings.

Layout grid

Sidebar Layouts

The two available sidebars, highlighted in grey, can be switched to the left or right side and their widths can easily be set in the template administration.

Sidebar layouts

Module Positions

Features 2024年1月08日

The following screenshot shows the detail view of template with list of the module positions used:

Module positions

Module Variations

Features 2024年1月08日

There are 7 stylistic module class suffixes which provide a unique style variation to the module: title1-4 and box1-3. There are also various additional structural suffixes, these affect the layout and metrics of the module.

Using a Suffix: Enter any available suffixes at Extensions → Modules → Module (you want to use) → Advanced tab → Module Class Suffix field. You can compound multiple suffixes together such as: box1 title2.

Typography

Features 2024年1月08日

Buttons

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Inline text elements

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Blockquotes

A well-known quote, contained in a blockquote element.

Background color

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

Badge Primary Secondary Success Danger Warning Info Light Dark

Text color

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

Breadcrumb Pagination Modal

Alerts

This is a primary alert with an example link.

This is a secondary alert with an example link.

This is a success alert with an example link.

This is a danger alert with an example link.

This is a warning alert with an example link.

This is a info alert with an example link.

This is a light alert with an example link.

This is a dark alert with an example link.

Progress

25%

50%

75%

100%

Navs and tabs

This is some placeholder content the Home tab's associated content.

This is some placeholder content the Profile tab's associated content.

This is some placeholder content the Contact tab's associated content.

This is some placeholder content the Home tab's associated content.

This is some placeholder content the Profile tab's associated content.

This is some placeholder content the Contact tab's associated content.

List group

The current link item A second link item A third link item A fourth link item A disabled link item

A list item 14
A second list item 2
A third list item 1

Dapibus ac facilisis in This is a primary list group item This is a secondary list group item This is a success list group item This is a danger list group item This is a warning list group item This is a info list group item This is a light list group item This is a dark list group item

Home Profile Messages Settings

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut.

Tables

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Class	Heading	Heading
Active	Cell	Cell
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

Features

Features 1980年1月01日

This template supports 4 colors, you can change the colors of your website by selecting your prefered color in the Styles select box. Use the customizer to create your own style, you can easily customize colors, fonts, margins and even more settings of the template.

Template colors