github.com/MontFerret/ferret@v0.18.0/e2e/pages/static/media.html (about) 1 <!DOCTYPE html> 2 <!-- saved from url=(0053)http://getbootstrap.com/docs/4.1/layout/media-object/ --> 3 <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <meta name="description" content="Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like."> 7 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> 8 <meta name="generator" content="Jekyll v3.8.3"> 9 10 <title>Media object · Bootstrap</title> 11 12 <!-- Bootstrap core CSS --> 13 14 <style class="anchorjs"></style><link href="./assets/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 15 16 17 <!-- Documentation extras --> 18 19 <link href="./assets/docsearch.min.css" rel="stylesheet"> 20 21 <link href="./assets/docs.min.css" rel="stylesheet"> 22 23 <!-- Favicons --> 24 <link rel="apple-touch-icon" href="http://getbootstrap.com/docs/4.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> 25 <link rel="icon" href="http://getbootstrap.com/docs/4.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> 26 <link rel="icon" href="http://getbootstrap.com/docs/4.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> 27 <link rel="manifest" href="http://getbootstrap.com/docs/4.1/assets/img/favicons/manifest.json"> 28 <link rel="mask-icon" href="http://getbootstrap.com/docs/4.1/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c"> 29 <link rel="icon" href="http://getbootstrap.com/favicon.ico"> 30 <meta name="msapplication-config" content="/docs/4.1/assets/img/favicons/browserconfig.xml"> 31 <meta name="theme-color" content="#563d7c"> 32 33 34 <!-- Twitter --> 35 <meta name="twitter:card" content="summary"> 36 <meta name="twitter:site" content="@getbootstrap"> 37 <meta name="twitter:creator" content="@getbootstrap"> 38 <meta name="twitter:title" content="Media object"> 39 <meta name="twitter:description" content="Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like."> 40 <meta name="twitter:image" content="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-social-logo.png"> 41 42 <!-- Facebook --> 43 <meta property="og:url" content="https://getbootstrap.com/docs/4.1/layout/media-object/"> 44 <meta property="og:title" content="Media object"> 45 <meta property="og:description" content="Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like."> 46 <meta property="og:type" content="website"> 47 <meta property="og:image" content="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-social.png"> 48 <meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-social.png"> 49 <meta property="og:image:type" content="image/png"> 50 <meta property="og:image:width" content="1200"> 51 <meta property="og:image:height" content="630"> 52 53 54 <script> 55 window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; 56 ga('create', 'UA-146052-10', 'getbootstrap.com'); 57 ga('send', 'pageview'); 58 </script> 59 <script async="" src="./assets/analytics.js"></script> 60 61 </head> 62 <body> 63 <a id="skippy" class="sr-only sr-only-focusable" href="http://getbootstrap.com/docs/4.1/layout/media-object/#content"> 64 <div class="container"> 65 <span class="skiplink-text">Skip to main content</span> 66 </div> 67 </a> 68 69 70 <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> 71 <a class="navbar-brand mr-0 mr-md-2" href="http://getbootstrap.com/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewBox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"></path><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"></path></svg> 72 </a> 73 74 <div class="navbar-nav-scroll"> 75 <ul class="navbar-nav bd-navbar-nav flex-row"> 76 <li class="nav-item"> 77 <a class="nav-link " href="http://getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a> 78 </li> 79 <li class="nav-item"> 80 <a class="nav-link active" href="http://getbootstrap.com/docs/4.1/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a> 81 </li> 82 <li class="nav-item"> 83 <a class="nav-link " href="http://getbootstrap.com/docs/4.1/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> 84 </li> 85 <li class="nav-item"> 86 <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a> 87 </li> 88 <li class="nav-item"> 89 <a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a> 90 </li> 91 <li class="nav-item"> 92 <a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a> 93 </li> 94 </ul> 95 </div> 96 97 <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex"> 98 <li class="nav-item dropdown"> 99 <a class="nav-item nav-link dropdown-toggle mr-md-2" href="http://getbootstrap.com/docs/4.1/layout/media-object/#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 100 v4.1 101 </a> 102 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 103 <a class="dropdown-item active" href="http://getbootstrap.com/docs/4.1/">Latest (4.1.x)</a> 104 <a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a> 105 <div class="dropdown-divider"></div> 106 <a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a> 107 <a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a> 108 <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a> 109 </div> 110 </li> 111 112 <li class="nav-item"> 113 <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"></path></svg> 114 </a> 115 </li> 116 <li class="nav-item"> 117 <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"></path></svg> 118 </a> 119 </li> 120 <li class="nav-item"> 121 <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"></path><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"></path></svg> 122 </a> 123 </li> 124 </ul> 125 126 <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="http://getbootstrap.com/docs/4.1/getting-started/download/">Download</a> 127 </header> 128 129 130 <div class="container-fluid"> 131 <div class="row flex-xl-nowrap"> 132 <div class="col-12 col-md-3 col-xl-2 bd-sidebar"> 133 <form class="bd-search d-flex align-items-center"> 134 <span class="algolia-autocomplete" style="position: relative; display: inline-block; direction: ltr;"><input type="search" class="form-control ds-input" id="search-input" placeholder="Search..." autocomplete="off" data-siteurl="https://getbootstrap.com" data-docs-version="4.1" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style="position: relative; vertical-align: top;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre><span class="ds-dropdown-menu" role="listbox" id="algolia-autocomplete-listbox-0" style="position: absolute; top: 100%; z-index: 100; display: none; left: 0px; right: auto;"><div class="ds-dataset-1"></div></span></span> 135 <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"></path></svg> 136 </button> 137 </form> 138 139 <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> 140 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/getting-started/introduction/"> 141 Getting started 142 </a> 143 144 <ul class="nav bd-sidenav"><li> 145 <a href="http://getbootstrap.com/docs/4.1/getting-started/introduction/"> 146 Introduction 147 </a></li><li> 148 <a href="http://getbootstrap.com/docs/4.1/getting-started/download/"> 149 Download 150 </a></li><li> 151 <a href="http://getbootstrap.com/docs/4.1/getting-started/contents/"> 152 Contents 153 </a></li><li> 154 <a href="http://getbootstrap.com/docs/4.1/getting-started/browsers-devices/"> 155 Browsers & devices 156 </a></li><li> 157 <a href="http://getbootstrap.com/docs/4.1/getting-started/javascript/"> 158 JavaScript 159 </a></li><li> 160 <a href="http://getbootstrap.com/docs/4.1/getting-started/theming/"> 161 Theming 162 </a></li><li> 163 <a href="http://getbootstrap.com/docs/4.1/getting-started/build-tools/"> 164 Build tools 165 </a></li><li> 166 <a href="http://getbootstrap.com/docs/4.1/getting-started/webpack/"> 167 Webpack 168 </a></li><li> 169 <a href="http://getbootstrap.com/docs/4.1/getting-started/accessibility/"> 170 Accessibility 171 </a></li></ul> 172 </div><div class="bd-toc-item active"> 173 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/layout/overview/"> 174 Layout 175 </a> 176 177 178 <ul class="nav bd-sidenav"><li class="active bd-sidenav-active"> 179 <a href="overview.html"> 180 Overview 181 </a></li><li> 182 <a href="grid.html"> 183 Grid 184 </a></li><li> 185 <a href="media.html"> 186 Media object 187 </a></li><li> 188 <a href="utilities.html"> 189 Utilities for layout 190 </a></li></ul> 191 </div><div class="bd-toc-item"> 192 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/content/reboot/"> 193 Content 194 </a> 195 196 <ul class="nav bd-sidenav"><li> 197 <a href="http://getbootstrap.com/docs/4.1/content/reboot/"> 198 Reboot 199 </a></li><li> 200 <a href="http://getbootstrap.com/docs/4.1/content/typography/"> 201 Typography 202 </a></li><li> 203 <a href="http://getbootstrap.com/docs/4.1/content/code/"> 204 Code 205 </a></li><li> 206 <a href="http://getbootstrap.com/docs/4.1/content/images/"> 207 Images 208 </a></li><li> 209 <a href="http://getbootstrap.com/docs/4.1/content/tables/"> 210 Tables 211 </a></li><li> 212 <a href="http://getbootstrap.com/docs/4.1/content/figures/"> 213 Figures 214 </a></li></ul> 215 </div><div class="bd-toc-item"> 216 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/components/alerts/"> 217 Components 218 </a> 219 220 <ul class="nav bd-sidenav"><li> 221 <a href="http://getbootstrap.com/docs/4.1/components/alerts/"> 222 Alerts 223 </a></li><li> 224 <a href="http://getbootstrap.com/docs/4.1/components/badge/"> 225 Badge 226 </a></li><li> 227 <a href="http://getbootstrap.com/docs/4.1/components/breadcrumb/"> 228 Breadcrumb 229 </a></li><li> 230 <a href="http://getbootstrap.com/docs/4.1/components/buttons/"> 231 Buttons 232 </a></li><li> 233 <a href="http://getbootstrap.com/docs/4.1/components/button-group/"> 234 Button group 235 </a></li><li> 236 <a href="http://getbootstrap.com/docs/4.1/components/card/"> 237 Card 238 </a></li><li> 239 <a href="http://getbootstrap.com/docs/4.1/components/carousel/"> 240 Carousel 241 </a></li><li> 242 <a href="http://getbootstrap.com/docs/4.1/components/collapse/"> 243 Collapse 244 </a></li><li> 245 <a href="http://getbootstrap.com/docs/4.1/components/dropdowns/"> 246 Dropdowns 247 </a></li><li> 248 <a href="http://getbootstrap.com/docs/4.1/components/forms/"> 249 Forms 250 </a></li><li> 251 <a href="http://getbootstrap.com/docs/4.1/components/input-group/"> 252 Input group 253 </a></li><li> 254 <a href="http://getbootstrap.com/docs/4.1/components/jumbotron/"> 255 Jumbotron 256 </a></li><li> 257 <a href="http://getbootstrap.com/docs/4.1/components/list-group/"> 258 List group 259 </a></li><li> 260 <a href="http://getbootstrap.com/docs/4.1/components/modal/"> 261 Modal 262 </a></li><li> 263 <a href="http://getbootstrap.com/docs/4.1/components/navs/"> 264 Navs 265 </a></li><li> 266 <a href="http://getbootstrap.com/docs/4.1/components/navbar/"> 267 Navbar 268 </a></li><li> 269 <a href="http://getbootstrap.com/docs/4.1/components/pagination/"> 270 Pagination 271 </a></li><li> 272 <a href="http://getbootstrap.com/docs/4.1/components/popovers/"> 273 Popovers 274 </a></li><li> 275 <a href="http://getbootstrap.com/docs/4.1/components/progress/"> 276 Progress 277 </a></li><li> 278 <a href="http://getbootstrap.com/docs/4.1/components/scrollspy/"> 279 Scrollspy 280 </a></li><li> 281 <a href="http://getbootstrap.com/docs/4.1/components/tooltips/"> 282 Tooltips 283 </a></li></ul> 284 </div><div class="bd-toc-item"> 285 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/utilities/borders/"> 286 Utilities 287 </a> 288 289 <ul class="nav bd-sidenav"><li> 290 <a href="http://getbootstrap.com/docs/4.1/utilities/borders/"> 291 Borders 292 </a></li><li> 293 <a href="http://getbootstrap.com/docs/4.1/utilities/clearfix/"> 294 Clearfix 295 </a></li><li> 296 <a href="http://getbootstrap.com/docs/4.1/utilities/close-icon/"> 297 Close icon 298 </a></li><li> 299 <a href="http://getbootstrap.com/docs/4.1/utilities/colors/"> 300 Colors 301 </a></li><li> 302 <a href="http://getbootstrap.com/docs/4.1/utilities/display/"> 303 Display 304 </a></li><li> 305 <a href="http://getbootstrap.com/docs/4.1/utilities/embed/"> 306 Embed 307 </a></li><li> 308 <a href="http://getbootstrap.com/docs/4.1/utilities/flex/"> 309 Flex 310 </a></li><li> 311 <a href="http://getbootstrap.com/docs/4.1/utilities/float/"> 312 Float 313 </a></li><li> 314 <a href="http://getbootstrap.com/docs/4.1/utilities/image-replacement/"> 315 Image replacement 316 </a></li><li> 317 <a href="http://getbootstrap.com/docs/4.1/utilities/position/"> 318 Position 319 </a></li><li> 320 <a href="http://getbootstrap.com/docs/4.1/utilities/screenreaders/"> 321 Screenreaders 322 </a></li><li> 323 <a href="http://getbootstrap.com/docs/4.1/utilities/shadows/"> 324 Shadows 325 </a></li><li> 326 <a href="http://getbootstrap.com/docs/4.1/utilities/sizing/"> 327 Sizing 328 </a></li><li> 329 <a href="http://getbootstrap.com/docs/4.1/utilities/spacing/"> 330 Spacing 331 </a></li><li> 332 <a href="http://getbootstrap.com/docs/4.1/utilities/text/"> 333 Text 334 </a></li><li> 335 <a href="http://getbootstrap.com/docs/4.1/utilities/vertical-align/"> 336 Vertical align 337 </a></li><li> 338 <a href="http://getbootstrap.com/docs/4.1/utilities/visibility/"> 339 Visibility 340 </a></li></ul> 341 </div><div class="bd-toc-item"> 342 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/extend/approach/"> 343 Extend 344 </a> 345 346 <ul class="nav bd-sidenav"><li> 347 <a href="http://getbootstrap.com/docs/4.1/extend/approach/"> 348 Approach 349 </a></li><li> 350 <a href="http://getbootstrap.com/docs/4.1/extend/icons/"> 351 Icons 352 </a></li></ul> 353 </div><div class="bd-toc-item"> 354 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/migration/"> 355 Migration 356 </a> 357 358 <ul class="nav bd-sidenav"></ul> 359 </div><div class="bd-toc-item"> 360 <a class="bd-toc-link" href="http://getbootstrap.com/docs/4.1/about/overview/"> 361 About 362 </a> 363 364 <ul class="nav bd-sidenav"><li> 365 <a href="http://getbootstrap.com/docs/4.1/about/overview/"> 366 Overview 367 </a></li><li> 368 <a href="http://getbootstrap.com/docs/4.1/about/brand/"> 369 Brand 370 </a></li><li> 371 <a href="http://getbootstrap.com/docs/4.1/about/license/"> 372 License 373 </a></li><li> 374 <a href="http://getbootstrap.com/docs/4.1/about/translations/"> 375 Translations 376 </a></li></ul> 377 </div></nav> 378 379 </div> 380 381 382 <div class="d-none d-xl-block col-xl-2 bd-toc"> 383 <ul class="section-nav"> 384 <li class="toc-entry toc-h2"><a href="http://getbootstrap.com/docs/4.1/layout/media-object/#example">Example</a></li> 385 <li class="toc-entry toc-h2"><a href="http://getbootstrap.com/docs/4.1/layout/media-object/#nesting">Nesting</a></li> 386 <li class="toc-entry toc-h2"><a href="http://getbootstrap.com/docs/4.1/layout/media-object/#alignment">Alignment</a></li> 387 <li class="toc-entry toc-h2"><a href="http://getbootstrap.com/docs/4.1/layout/media-object/#order">Order</a></li> 388 <li class="toc-entry toc-h2"><a href="http://getbootstrap.com/docs/4.1/layout/media-object/#media-list">Media list</a></li> 389 </ul> 390 </div> 391 392 393 <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> 394 <h1 class="bd-title" id="content">Media object</h1> 395 <p class="bd-lead">Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.</p> 396 <script async="" src="./assets/carbon.js" id="_carbonads_js"></script> 397 398 <h2 id="example"><div>Example<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/media-object/#example" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h2> 399 400 <p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">media object</a> helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media. Plus, it does this with only two required classes thanks to flexbox.</p> 401 402 <p>Below is an example of a single media object. Only two classes are required—the wrapping <code class="highlighter-rouge">.media</code> and the <code class="highlighter-rouge">.media-body</code> around your content. Optional padding and margin can be controlled through <a href="http://getbootstrap.com/docs/4.1/utilities/spacing/">spacing utilities</a>.</p> 403 404 <div class="bd-example"> 405 <div class="media"> 406 <img class="mr-3" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16673d2790d%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16673d2790d%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true"> 407 <div class="media-body"> 408 <h5 class="mt-0">Media heading</h5> 409 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 410 </div> 411 </div> 412 </div> 413 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span> 414 <span class="nt"><img</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">src=</span><span class="s">".../64x64"</span> <span class="na">alt=</span><span class="s">"Generic placeholder image"</span><span class="nt">></span> 415 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span> 416 <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Media heading<span class="nt"></h5></span> 417 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 418 <span class="nt"></div></span> 419 <span class="nt"></div></span></code></pre></figure> 420 421 <div class="bd-callout bd-callout-warning"> 422 <h5 id="flexbug-12-inline-elements-arent-treated-as-flex-items">Flexbug #12: Inline elements aren’t treated as flex items</h5> 423 424 <p>Internet Explorer 10-11 do not render inline elements like links or images (or <code class="highlighter-rouge">::before</code> and <code class="highlighter-rouge">::after</code> pseudo-elements) as flex items. The only workaround is to set a non-inline <code class="highlighter-rouge">display</code> value (e.g., <code class="highlighter-rouge">block</code>, <code class="highlighter-rouge">inline-block</code>, or <code class="highlighter-rouge">flex</code>). We suggest using <code class="highlighter-rouge">.d-flex</code>, one of our <a href="http://getbootstrap.com/docs/4.1/utilities/display/">display utilities</a>, as an easy fix.</p> 425 426 <p><strong>Source:</strong> <a href="https://github.com/philipwalton/flexbugs#flexbug-12">Flexbugs on GitHub</a></p> 427 </div> 428 429 <h2 id="nesting"><div>Nesting<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/media-object/#nesting" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h2> 430 431 <p>Media objects can be infinitely nested, though we suggest you stop at some point. Place nested <code class="highlighter-rouge">.media</code> within the <code class="highlighter-rouge">.media-body</code> of a parent media object.</p> 432 433 <div class="bd-example"> 434 <div class="media"> 435 <img class="mr-3" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16673d27911%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16673d27911%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 64px; height: 64px;"> 436 <div class="media-body"> 437 <h5 class="mt-0">Media heading</h5> 438 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 439 440 <div class="media mt-3"> 441 <a class="pr-3" href="http://getbootstrap.com/docs/4.1/layout/media-object/#"> 442 <img data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16673d27911%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16673d27911%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 64px; height: 64px;"> 443 </a> 444 <div class="media-body"> 445 <h5 class="mt-0">Media heading</h5> 446 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 447 </div> 448 </div> 449 </div> 450 </div> 451 </div> 452 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span> 453 <span class="nt"><img</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">src=</span><span class="s">".../64x64"</span> <span class="na">alt=</span><span class="s">"Generic placeholder image"</span><span class="nt">></span> 454 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span> 455 <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Media heading<span class="nt"></h5></span> 456 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 457 458 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"media mt-3"</span><span class="nt">></span> 459 <span class="nt"><a</span> <span class="na">class=</span><span class="s">"pr-3"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span> 460 <span class="nt"><img</span> <span class="na">src=</span><span class="s">".../64x64"</span> <span class="na">alt=</span><span class="s">"Generic placeholder image"</span><span class="nt">></span> 461 <span class="nt"></a></span> 462 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span> 463 <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Media heading<span class="nt"></h5></span> 464 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 465 <span class="nt"></div></span> 466 <span class="nt"></div></span> 467 <span class="nt"></div></span> 468 <span class="nt"></div></span></code></pre></figure> 469 470 <h2 id="alignment"><div>Alignment<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/media-object/#alignment" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h2> 471 472 <p>Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your <code class="highlighter-rouge">.media-body</code> content.</p> 473 474 <div class="bd-example"> 475 <div class="media"> 476 <img class="align-self-start mr-3" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16673d27912%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16673d27912%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 64px; height: 64px;"> 477 <div class="media-body"> 478 <h5 class="mt-0">Top-aligned media</h5> 479 <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> 480 <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 481 </div> 482 </div> 483 </div> 484 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span> 485 <span class="nt"><img</span> <span class="na">class=</span><span class="s">"align-self-start mr-3"</span> <span class="na">src=</span><span class="s">".../64x64"</span> <span class="na">alt=</span><span class="s">"Generic placeholder image"</span><span class="nt">></span> 486 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span> 487 <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Top-aligned media<span class="nt"></h5></span> 488 <span class="nt"><p></span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<span class="nt"></p></span> 489 <span class="nt"><p></span>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<span class="nt"></p></span> 490 <span class="nt"></div></span> 491 <span class="nt"></div></span></code></pre></figure> 492 493 <div class="bd-example"> 494 <div class="media"> 495 <img class="align-self-center mr-3" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16673d27914%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16673d27914%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 64px; height: 64px;"> 496 <div class="media-body"> 497 <h5 class="mt-0">Center-aligned media</h5> 498 <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> 499 <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 500 </div> 501 </div> 502 </div> 503 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span> 504 <span class="nt"><img</span> <span class="na">class=</span><span class="s">"align-self-center mr-3"</span> <span class="na">src=</span><span class="s">".../64x64"</span> <span class="na">alt=</span><span class="s">"Generic placeholder image"</span><span class="nt">></span> 505 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span> 506 <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Center-aligned media<span class="nt"></h5></span> 507 <span class="nt"><p></span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<span class="nt"></p></span> 508 <span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<span class="nt"></p></span> 509 <span class="nt"></div></span> 510 <span class="nt"></div></span></code></pre></figure> 511 512 <div class="bd-example"> 513 <div class="media"> 514 <img class="align-self-end mr-3" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16673d27915%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16673d27915%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 64px; height: 64px;"> 515 <div class="media-body"> 516 <h5 class="mt-0">Bottom-aligned media</h5> 517 <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> 518 <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 519 </div> 520 </div> 521 </div> 522 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span> 523 <span class="nt"><img</span> <span class="na">class=</span><span class="s">"align-self-end mr-3"</span> <span class="na">src=</span><span class="s">".../64x64"</span> <span class="na">alt=</span><span class="s">"Generic placeholder image"</span><span class="nt">></span> 524 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span> 525 <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Bottom-aligned media<span class="nt"></h5></span> 526 <span class="nt"><p></span>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.<span class="nt"></p></span> 527 <span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<span class="nt"></p></span> 528 <span class="nt"></div></span> 529 <span class="nt"></div></span></code></pre></figure> 530 531 <h2 id="order"><div>Order<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/media-object/#order" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h2> 532 533 <p>Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the <code class="highlighter-rouge">order</code> property (to an integer of your choosing).</p> 534 535 <div class="bd-example"> 536 <div class="media"> 537 <div class="media-body"> 538 <h5 class="mt-0 mb-1">Media object</h5> 539 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 540 </div> 541 <img class="ml-3" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16673d27917%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16673d27917%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 64px; height: 64px;"> 542 </div> 543 </div> 544 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span> 545 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span> 546 <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0 mb-1"</span><span class="nt">></span>Media object<span class="nt"></h5></span> 547 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 548 <span class="nt"></div></span> 549 <span class="nt"><img</span> <span class="na">class=</span><span class="s">"ml-3"</span> <span class="na">src=</span><span class="s">".../64x64"</span> <span class="na">alt=</span><span class="s">"Generic placeholder image"</span><span class="nt">></span> 550 <span class="nt"></div></span></code></pre></figure> 551 552 <h2 id="media-list"><div>Media list<a class="anchorjs-link " href="http://getbootstrap.com/docs/4.1/layout/media-object/#media-list" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h2> 553 554 <p>Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your <code class="highlighter-rouge"><ul></code> or <code class="highlighter-rouge"><ol></code>, add the <code class="highlighter-rouge">.list-unstyled</code> to remove any browser default list styles, and then apply <code class="highlighter-rouge">.media</code> to your <code class="highlighter-rouge"><li></code>s. As always, use spacing utilities wherever needed to fine tune.</p> 555 556 <div class="bd-example"> 557 <ul class="list-unstyled"> 558 <li class="media"> 559 <img class="mr-3" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16673d27918%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16673d27918%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 64px; height: 64px;"> 560 <div class="media-body"> 561 <h5 class="mt-0 mb-1">List-based media object</h5> 562 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 563 </div> 564 </li> 565 <li class="media my-4"> 566 <img class="mr-3" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16673d27918%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16673d27918%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 64px; height: 64px;"> 567 <div class="media-body"> 568 <h5 class="mt-0 mb-1">List-based media object</h5> 569 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 570 </div> 571 </li> 572 <li class="media"> 573 <img class="mr-3" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16673d27919%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16673d27919%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 64px; height: 64px;"> 574 <div class="media-body"> 575 <h5 class="mt-0 mb-1">List-based media object</h5> 576 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 577 </div> 578 </li> 579 </ul> 580 </div> 581 <div class="bd-clipboard"><button class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div><figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-unstyled"</span><span class="nt">></span> 582 <span class="nt"><li</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span> 583 <span class="nt"><img</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">src=</span><span class="s">".../64x64"</span> <span class="na">alt=</span><span class="s">"Generic placeholder image"</span><span class="nt">></span> 584 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span> 585 <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0 mb-1"</span><span class="nt">></span>List-based media object<span class="nt"></h5></span> 586 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 587 <span class="nt"></div></span> 588 <span class="nt"></li></span> 589 <span class="nt"><li</span> <span class="na">class=</span><span class="s">"media my-4"</span><span class="nt">></span> 590 <span class="nt"><img</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">src=</span><span class="s">".../64x64"</span> <span class="na">alt=</span><span class="s">"Generic placeholder image"</span><span class="nt">></span> 591 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span> 592 <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0 mb-1"</span><span class="nt">></span>List-based media object<span class="nt"></h5></span> 593 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 594 <span class="nt"></div></span> 595 <span class="nt"></li></span> 596 <span class="nt"><li</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span> 597 <span class="nt"><img</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">src=</span><span class="s">".../64x64"</span> <span class="na">alt=</span><span class="s">"Generic placeholder image"</span><span class="nt">></span> 598 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span> 599 <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0 mb-1"</span><span class="nt">></span>List-based media object<span class="nt"></h5></span> 600 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 601 <span class="nt"></div></span> 602 <span class="nt"></li></span> 603 <span class="nt"></ul></span></code></pre></figure> 604 605 606 </main> 607 </div> 608 </div> 609 610 <script src="./assets/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 611 <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> 612 613 <script src="./assets/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="./assets/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script><script src="./assets/docsearch.min.js"></script><script src="./assets/docs.min.js"></script> 614 615 616 <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" preserveAspectRatio="none" style="display: none; visibility: hidden; position: absolute; top: -100%; left: -100%;"><defs><style type="text/css"></style></defs><text x="0" y="10" style="font-weight:normal;font-size:10pt;font-family:Helvetica">64x64</text></svg></body></html>