Responsive Images

Images in Bootstrap can be made responsive using the img-fluid class.

img-fluid sets the maximum width to 100% of the parent container width and the height to scale automatically.

Further information on bootstrap’s responsive images can be found here.

Steps

Create a Form with a Bootstrap4 Presentation Template.

Create an image control using this image.

Create a second image control removing the class img-fluid.

Run the form and reduce the size of the browsers to observe the behaviour at different screen sizes.

Bootstrap Utilities

Responsive Display Properties

Responsive Text Alignment

Responsive Spacing

Responsive Sizing

Responsive Images

Responsive Embedding of Videos

Responsive Font Sizes

Bootstrap Breakpoints

Bootstrap Column Vertical Alignment

Bootstrap Variables File

Bootstrap Responsive Column Ordering

Responsive Sizing