Image Styles

The Template Package 4.x framework uses CSS classes to manage a variety of style and placement options for images displayed with normal page content and outside of Containers. These include classes for setting the Margin, Borders, and Positioning relative to text and other UI elements on the page.

Image Margins

There are three Margin width options that can be applied to all images outside of Containers. They can be applied to all sides of an image or each side independently as needed. They can be combined with any Image Border, Rounded, and Shadow options.

Image Margin Specifications

Option Classes Value
Extra Small m-1 (margin on all sides)
mt-1
mr-1
mb-1
ml-1
~4px
Small m-2 (margin on all sides)
mt-2
mr-2
mb-2
ml-2
~9px
Standard (default) m-3 (margin on all sides)
mt-3
mr-3
mb-3
ml-3
16px
Medium m-4 (margin on all sides)
mt-4
mr-4
mb-4
ml-4
~26px
Large m-5 (margin on all sides)
mt-5
mr-5
mb-5
ml-5
51px

Image Borders

There are a variety of Border options that can be applied to images outside of Containers. The Border options can be combined with any Image Margin, Rounded, and Shadow options. Image Margin sets the space outside of the Image Border. Each Border option sets additional margin to control the space between the image and the Border.

Image Border Specifications

Option Classes
None b-0
Basic no padding
b-1
gray-medium
Extra Small p-1 (~4px)
b-1
gray-medium
Small p-2 (~9px)
b-1
gray-medium
Standard (default) p-3 (17px)
b-1
gray-medium
Medium p-4 (~26px)
b-1
gray-medium
Large p-5 (51px)
b-1
gray-medium

Image Rounded

An Image rounded style can be applied to images outside of Containers. The Rounded style can be combined with any Image Margin, Border, and Shadow options.

Image Rounded Specifications

Option Class
Rounded rounded-circle

Image Shadow

An Image Shadow style can be applied to images outside of Containers. The Shadow style can be combined with any Image Margin, Border, and Rounded options. If an Image Border is applied, the Shadow displayed outside of the Border.

Image Shadow Specifications

Option Class
Shadow ds-5

Float

See details about Float options in Utilities

Position

See details about Position options in Utilities

View Page In: PDF [150k] DOC [150k]
Page last reviewed: