<StyleSheet StyleSheet="Framework.bootstrap.bootstrap.css" /> <StyleSheet ShowModes="rdBrowser" StyleSheet="Framework.bootstrap.Overrides.css" /> <StyleSheet ShowModes="rdBrowser" StyleSheet="Fonts.combined.css" /> <StyleSheet ShowModes="rdBrowser" StyleSheet="Framework.css.Layout.css" /> <IncludeScriptFile ID="jquery" IncludedScriptFile="Framework.bootstrap.jquery.min.js" /> <IncludeScriptFile ID="bootstrap" IncludedScriptFile="Framework.bootstrap.bootstrap.js"> <Note Note="Includes Bootstrap.min.js, Popper.js or tether.js" /> </IncludeScriptFile>
Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
<img class="img-thumbnail" src="{...}.png" />
<Image Caption="{...}.png" Class="img-thumbnail" />
Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
.img-fluid
max-width: 100%;
height: auto;
Documentation and examples for displaying related images and text with the figure component in Bootstrap.
Use the included .figure , .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 figure and figcaption elements. Images in figures have no explicit size, so be sure to add the .img-fluid class to your img to make it responsive.
.figure
.figure-img
.figure-caption
figure
figcaption
img
A caption for the above image.