Colors
Modify colors in the variables snippet in the Template Builder and customize or add any colors as you see fit.
.text-{color}
, modifies thetext-color
of an element.bg-{color}
, modifies thebackground-color
of an element.border-{color}
, modifies theborder-color
of an element
.bg-primary
.text-primary
.border-primary
.bg-secondary
.text-secondary
.border-secondary
.bg-success
.text-success
.border-success
.bg-info
.text-info
.border-info
.bg-warning
.text-warning
.border-warning
.bg-danger
.text-danger
.border-danger
.bg-light
.text-light
.border-light
.bg-dark
.text-dark
.border-dark
.bg-white
.text-white
.border-white
.bg-transparent
<span class="bg-primary text-white border border-secondary p-3 d-inline-block">Color test</span>
Typography
Headings and texts
asdAll HTML headings, <h1>
through <h6>
, are available, and <p>
or <small>
for other texts.
Also you can use the classes .h1
through .h6
and the variants -sm -md -lg -xl
on all headings.
Heading | Classes | Example |
---|---|---|
|
|
h1. Heading |
|
|
h2. Heading |
|
|
h3. Heading |
|
|
h4. Heading |
|
|
h5. Heading |
|
|
h6. Heading |
|
|
p. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus orci eu turpis ultricies, quis pharetra ipsum posuere. Donec sapien tellus, tempor vel tempus non, aliquet sit amet mi. |
|
|
small. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus orci eu turpis ultricies, quis pharetra ipsum posuere. Donec sapien tellus, tempor vel tempus non, aliquet sit amet mi. |
<h1 class="h1 h2-sm h3-md h4-lg h5-xl">Heading example</h1>
Display headings
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
Display 1
Display 2
Display 3
Display 4
<span class="display-1">Display example</span>
Shadows
Add the .shadow
class to use the shadow defined in the template, you can also use .shadow-sm
and .shadow-lg
for diferents variants.
.shadow-sm
.shadow
.shadow-lg
<figure class="shadow-sm"></figure>
<figure class="shadow"></figure>
<figure class="shadow-lg"></figure>
Border
Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
Additive
.border
.border-top
.border-right
.border-bottom
.border-left
Subtractive
.border-0
.border-top-0
.border-righ-0t
.border-bottom-0
.border-left-0
<figure class="border border-dark"></figure>
<figure class="border-top border-dark"></figure>
<figure class="border border-top-0 border-dark"></figure>
Border radius
Modify the border-radius of an element or part of it with these classes.
.rounded
.rounded-top
.rounded-right
.rounded-bottom
.rounded-left
.rounded-circle
.rounded-0
.rounded-pill
Sizes
You can also use the size variants defined in the variables.
.rounded-sm
.rounded
.rounded-lg
<figure class="rounded"></figure>
Forms and inputs
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Basic form example
Sizing
Set heights using classes like .form-control-lg
and .form-control-sm
.
Checkboxes and radios
Validations
You can use the classes .is-validg
or .is-invalid
depending on the validation.
Icon
In the minimal template we are using the Bootstrap icon library, using the icons through svg, you can continue using this library or load a new one in themple builder.
Icons examples
-
alarm-fill
-
arrow-clockwise
-
asterisk
-
bag-check
-
bug
-
calendar
Bootstrap grid examples
Basic grid layouts to get you familiar with building within the Bootstrap grid system.
In these examples the .themed-grid-col
class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.
Five grid tiers
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.
Three equal columns
Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.
Three unequal columns
Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.
Two columns
Get two columns starting at desktops and scaling to large desktops.
Two columns with two nested columns
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
At mobile device sizes, tablets and down, these columns and their nested columns will stack.
Mixed: mobile and desktop
The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.
Mixed: mobile, tablet, and desktop
Container
Containers are the most basic design element in Bootstrap and are required when using our default grid system. Containers are used to contain, fill, and (sometimes) center content within them. While containers can be nested, most designs do not require a nested container.
.container
, which sets amax-width
at each responsive breakpoint.container-fluid
, which iswidth: 100%
at all breakpoints.container-{breakpoint}
, which iswidth: 100%
until the specified breakpoint
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
Connect your site with content
Modyo Content has a complete API to quickly and efficiently access content entries within the spaces in your account.
Liquid SDK
The Liquid SDK allows you to natively consume content from Modyo Channels in any of the sections of the platform that use the Liquid markup language, like Widgets and Templates in your sites.
Access entries in a space
To access the list of entries of a type with the uid type_uid
and of a space with the uid space_uid
we use:
{% assign entries = spaces['space_uid'].types['type_uid'].entries %}
{% for entry in entries %}
entry: {{ entry.meta.uuid }} - {{ entry.meta.title }} <br/>
{% endfor %}
Visit Modyo docs for all de documentations about SDK