Image Reference

Image element with Bootstrap styling options. Set Src and Alt; enable responsive (img-fluid) and optionally rounded/thumbnail.

Inspector Property Groups

Image Properties

Property	Type	Details
ID	text	Optional unique identifier for this element. Sets the element's id attribute. Keep IDs unique per page (useful for anchors, label for targets, and JavaScript hooks). Bootstrap docs: Introduction Attribute: id
Class	text	Adds raw class names to the element. Adds text directly to the class attribute. Use this for custom utility classes or project-specific overrides. Separate multiple classes with spaces. Bootstrap docs: Utilities API Attribute: class
Src	image	Image source URL. Sets the image src attribute. Use relative paths for local assets and absolute URLs for remote images. For responsive images, consider using srcset and sizes when available. Bootstrap docs: Images Attribute: src
Width	text	Sets image width attribute. Sets the HTML width attribute for the image. Prefer Bootstrap sizing utilities for responsive layouts. Use attributes mainly to help browsers reserve layout space. Bootstrap docs: Sizing Attribute: width
Height	text	Sets image height attribute. Sets the HTML height attribute for the image. Prefer Bootstrap sizing utilities for responsive layouts. Use attributes mainly to help browsers reserve layout space. Bootstrap docs: Sizing Attribute: height
Alt	text	Alternative text. Sets the alt attribute for accessibility. Provide a meaningful description when the image conveys information; use empty alt text for purely decorative images. Bootstrap docs: Images Attribute: alt

Display

Property	Type	Details
Responsive	boolean	Makes the image responsive. Makes the image responsive by applying img-fluid . This scales the image with its parent container, preventing overflow on smaller screens. Bootstrap docs: Responsive images
Thumbnail	boolean	Adds thumbnail styling. Adds thumbnail styling using img-thumbnail . This gives the image a border and padding for a framed, thumbnail-like appearance. Bootstrap docs: Image thumbnails
Rounding	droplist	Options: Default, All, Top, End, Bottom, Start

Appearance

Property	Type	Details
Back Color	color_group	Options: text-bg-primary, bg-primary, bg-primary-subtle, text-bg-secondary, bg-secondary, bg-secondary-subtle
Back Opacity	range	Controls background opacity. Controls background opacity when using background color utilities. Applies classes like bg-opacity-25 , bg-opacity-50 , etc. Bootstrap docs: Background utilities
Width	range	Sets a Bootstrap width utility class. Sets a Bootstrap width utility class. Applies utilities like w-25 , w-50 , w-75 , w-100 , or w-auto . Bootstrap docs: Sizing
Height	range	Sets a Bootstrap height utility class. Sets a Bootstrap height utility class. Applies utilities like h-25 , h-50 , h-75 , h-100 , or h-auto . Bootstrap docs: Sizing
Opacity	range	Sets the opacity utility class. Sets an opacity utility class. Applies utilities such as opacity-25 , opacity-50 , opacity-75 , or opacity-100 . Bootstrap docs: Opacity
Shadow	droplist	Applies a Bootstrap shadow utility. Applies a Bootstrap shadow utility. Uses classes like shadow , shadow-sm , shadow-lg , or removes shadow with shadow-none . Bootstrap docs: Shadows Options: Default, None, Small, Regular, Large

Spacing

Property	Type	Details
Margin<br>&<br>Padding	spacing
X Gutter	range	Horizontal gutter size. Sets the horizontal gutter (spacing between columns). Uses gx-* utilities to control the horizontal gutter size. Bootstrap docs: Gutters
Y Gutter	range	Vertical gutter size. Sets the vertical gutter (spacing between rows). Uses gy-* utilities to control the vertical gutter size. Bootstrap docs: Gutters

Display

Property	Type	Details
Hide on	button_group	Options: xs, sm, md, lg, xl, xxl
Print	button_group
Visually Hidden	boolean
Focusable	boolean

Flex Item

Property	Type	Details
Align Self	button_group	Options: , , , ,
Order	range
Grow	button_group	Options: flex-grow-1, flex-grow-0
Shrink	button_group	Options: flex-shrink-1, flex-shrink-0