Guest
Title : HTML CODE
Guest on 4th September 2024 05:15:42 AM
Syntax: HTML5 | Views: 246 | Paste Size: 228.82 KB
  1.  
  2. <!doctype html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="description" content="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.">
  8. <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  9. <meta name="generator" content="Hugo 0.84.0">
  10.  
  11. <meta name="docsearch:language" content="en">
  12. <meta name="docsearch:version" content="5.0">
  13.  
  14. <title>Images · Bootstrap v5.0</title>
  15.  
  16. <link rel="canonical" href="https://getbootstrap.com/docs/5.0/content/images/">
  17.  
  18.  
  19.  
  20. <!-- Bootstrap core CSS -->
  21. <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  22.  
  23. <link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
  24.  
  25. <!-- Favicons -->
  26. <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
  27. <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
  28. <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
  29. <link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
  30. <link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
  31. <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
  32. <meta name="theme-color" content="#7952b3">
  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="Images">
  39. <meta name="twitter:description" content="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.">
  40. <meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
  41.  
  42. <!-- Facebook -->
  43. <meta property="og:url" content="https://getbootstrap.com/docs/5.0/content/images/">
  44. <meta property="og:title" content="Images">
  45. <meta property="og:description" content="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.">
  46. <meta property="og:type" content="article">
  47. <meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
  48. <meta property="og:image:type" content="image/png">
  49. <meta property="og:image:width" content="1000">
  50. <meta property="og:image:height" content="500">
  51.  
  52. <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
  53. <script>
  54.   window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  55.   ga('create', 'UA-146052-10', 'getbootstrap.com');
  56.   ga('set', 'anonymizeIp', true);
  57.   ga('send', 'pageview');
  58. </script>
  59. <script async src="https://www.google-analytics.com/analytics.js"></script>
  60.  
  61.  
  62.   </head>
  63.   <body>
  64.     <div class="skippy visually-hidden-focusable overflow-hidden">
  65.   <div class="container-xl">
  66.     <a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
  67.     <a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
  68.   </div>
  69. </div>
  70.  
  71.  
  72. <div class="d-block px-3 py-2 text-center text-bold skippy">
  73.   <a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
  74. </div>
  75.  
  76.     <header class="navbar navbar-expand-md navbar-dark bd-navbar">
  77.   <nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
  78.     <a class="navbar-brand p-0 me-2" href="/" aria-label="Bootstrap">
  79.       <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
  80.     </a>
  81.  
  82.     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
  83.       <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi" fill="currentColor" viewBox="0 0 16 16">
  84.   <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
  85. </svg>
  86.  
  87.     </button>
  88.  
  89.     <div class="collapse navbar-collapse" id="bdNavbar">
  90.       <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
  91.         <li class="nav-item col-6 col-md-auto">
  92.           <a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
  93.         </li>
  94.         <li class="nav-item col-6 col-md-auto">
  95.           <a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
  96.         </li>
  97.         <li class="nav-item col-6 col-md-auto">
  98.           <a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
  99.         </li>
  100.         <li class="nav-item col-6 col-md-auto">
  101.           <a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
  102.         </li>
  103.         <li class="nav-item col-6 col-md-auto">
  104.           <a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
  105.         </li>
  106.         <li class="nav-item col-6 col-md-auto">
  107.           <a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
  108.         </li>
  109.       </ul>
  110.  
  111.       <hr class="d-md-none text-white-50">
  112.  
  113.       <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
  114.         <li class="nav-item col-6 col-md-auto">
  115.           <a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
  116.             <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" 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"/></svg>
  117.             <small class="d-md-none ms-2">GitHub</small>
  118.           </a>
  119.         </li>
  120.         <li class="nav-item col-6 col-md-auto">
  121.           <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
  122.             <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" 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"/></svg>
  123.             <small class="d-md-none ms-2">Twitter</small>
  124.           </a>
  125.         </li>
  126.         <li class="nav-item col-6 col-md-auto">
  127.           <a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
  128.             <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
  129.             <small class="d-md-none ms-2">Open Collective</small>
  130.           </a>
  131.         </li>
  132.       </ul>
  133.  
  134.       <a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
  135.     </div>
  136.   </nav>
  137. </header>
  138.  
  139.  
  140.  
  141.   <nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
  142.   <div class="container-xxl d-flex align-items-md-center">
  143.     <form class="bd-search position-relative me-auto">
  144.       <input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
  145.     </form>
  146.  
  147.     <div class="dropdown ms-3">
  148.   <button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
  149.     <span class="d-none d-lg-inline">Bootstrap</span> v5.0
  150.   </button>
  151.   <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
  152.     <li><h6 class="dropdown-header">v5 releases</h6></li>
  153.     <li>
  154.       <a class="dropdown-item" href="https://getbootstrap.com/docs/5.2/content/images/">
  155.         Latest (5.2.x)
  156.       </a>
  157.     </li>
  158.     <li>
  159.         <a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/content/images/">v5.1.3</a>
  160.     </li>
  161.     <li>
  162.         <a class="dropdown-item current" aria-current="true" href="/docs/5.0/content/images/">v5.0.2</a>
  163.     </li>
  164.     <li><hr class="dropdown-divider"></li>
  165.     <li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
  166.     <li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
  167.     <li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
  168.     <li><hr class="dropdown-divider"></li>
  169.     <li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
  170.   </ul>
  171. </div>
  172.  
  173.  
  174.     <button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
  175.       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
  176.   <title>Expand</title>
  177.   <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
  178. </svg>
  179.  
  180.       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" fill="currentColor" viewBox="0 0 16 16">
  181.   <title>Collapse</title>
  182.   <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
  183. </svg>
  184.  
  185.     </button>
  186.   </div>
  187. </nav>
  188.  
  189.  
  190.   <div class="container-xxl my-md-4 bd-layout">
  191.     <aside class="bd-sidebar">
  192.       <nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
  193.       <li class="mb-1">
  194.         <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
  195.           Getting started
  196.         </button>
  197.  
  198.         <div class="collapse" id="getting-started-collapse">
  199.           <ul class="list-unstyled fw-normal pb-1 small">
  200.               <li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
  201.               <li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
  202.               <li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
  203.               <li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers &amp; devices</a></li>
  204.               <li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
  205.               <li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
  206.               <li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
  207.               <li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
  208.               <li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
  209.               <li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
  210.               <li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
  211.           </ul>
  212.         </div>
  213.       </li>
  214.       <li class="mb-1">
  215.         <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
  216.           Customize
  217.         </button>
  218.  
  219.         <div class="collapse" id="customize-collapse">
  220.           <ul class="list-unstyled fw-normal pb-1 small">
  221.               <li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
  222.               <li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
  223.               <li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
  224.               <li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
  225.               <li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
  226.               <li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
  227.               <li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
  228.           </ul>
  229.         </div>
  230.       </li>
  231.       <li class="mb-1">
  232.         <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
  233.           Layout
  234.         </button>
  235.  
  236.         <div class="collapse" id="layout-collapse">
  237.           <ul class="list-unstyled fw-normal pb-1 small">
  238.               <li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
  239.               <li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
  240.               <li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
  241.               <li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
  242.               <li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
  243.               <li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
  244.               <li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
  245.           </ul>
  246.         </div>
  247.       </li>
  248.       <li class="mb-1">
  249.         <button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="true" aria-current="true">
  250.           Content
  251.         </button>
  252.  
  253.         <div class="collapse show" id="content-collapse">
  254.           <ul class="list-unstyled fw-normal pb-1 small">
  255.               <li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
  256.               <li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
  257.               <li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded active" aria-current="page">Images</a></li>
  258.               <li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
  259.               <li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
  260.           </ul>
  261.         </div>
  262.       </li>
  263.       <li class="mb-1">
  264.         <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
  265.           Forms
  266.         </button>
  267.  
  268.         <div class="collapse" id="forms-collapse">
  269.           <ul class="list-unstyled fw-normal pb-1 small">
  270.               <li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
  271.               <li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
  272.               <li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
  273.               <li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks &amp; radios</a></li>
  274.               <li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
  275.               <li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
  276.               <li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
  277.               <li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
  278.               <li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
  279.           </ul>
  280.         </div>
  281.       </li>
  282.       <li class="mb-1">
  283.         <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="false">
  284.           Components
  285.         </button>
  286.  
  287.         <div class="collapse" id="components-collapse">
  288.           <ul class="list-unstyled fw-normal pb-1 small">
  289.               <li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
  290.               <li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
  291.               <li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
  292.               <li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
  293.               <li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
  294.               <li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
  295.               <li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
  296.               <li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
  297.               <li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
  298.               <li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
  299.               <li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
  300.               <li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
  301.               <li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
  302.               <li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs &amp; tabs</a></li>
  303.               <li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
  304.               <li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
  305.               <li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
  306.               <li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
  307.               <li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
  308.               <li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
  309.               <li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
  310.               <li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
  311.               <li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
  312.           </ul>
  313.         </div>
  314.       </li>
  315.       <li class="mb-1">
  316.         <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
  317.           Helpers
  318.         </button>
  319.  
  320.         <div class="collapse" id="helpers-collapse">
  321.           <ul class="list-unstyled fw-normal pb-1 small">
  322.               <li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
  323.               <li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
  324.               <li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
  325.               <li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
  326.               <li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
  327.               <li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
  328.               <li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
  329.           </ul>
  330.         </div>
  331.       </li>
  332.       <li class="mb-1">
  333.         <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
  334.           Utilities
  335.         </button>
  336.  
  337.         <div class="collapse" id="utilities-collapse">
  338.           <ul class="list-unstyled fw-normal pb-1 small">
  339.               <li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
  340.               <li><a href="/docs/5.0/utilities/background/" class="d-inline-flex align-items-center rounded">Background</a></li>
  341.               <li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
  342.               <li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
  343.               <li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
  344.               <li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
  345.               <li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
  346.               <li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
  347.               <li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
  348.               <li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
  349.               <li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
  350.               <li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
  351.               <li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
  352.               <li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
  353.               <li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
  354.               <li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
  355.           </ul>
  356.         </div>
  357.       </li>
  358.       <li class="mb-1">
  359.         <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
  360.           Extend
  361.         </button>
  362.  
  363.         <div class="collapse" id="extend-collapse">
  364.           <ul class="list-unstyled fw-normal pb-1 small">
  365.               <li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
  366.               <li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
  367.           </ul>
  368.         </div>
  369.       </li>
  370.       <li class="mb-1">
  371.         <button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
  372.           About
  373.         </button>
  374.  
  375.         <div class="collapse" id="about-collapse">
  376.           <ul class="list-unstyled fw-normal pb-1 small">
  377.               <li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
  378.               <li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
  379.               <li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
  380.               <li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
  381.               <li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
  382.           </ul>
  383.         </div>
  384.       </li>
  385.       <li class="my-3 mx-4 border-top"></li>
  386.       <li>
  387.         <a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
  388.           Migration
  389.         </a>
  390.       </li>
  391.   </ul>
  392. </nav>
  393.  
  394.     </aside>
  395.  
  396.     <main class="bd-main order-1">
  397.       <div class="bd-intro ps-lg-4">
  398.         <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
  399.           <a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/v5.0.2/site/content/docs/5.0/content/images.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
  400.           <h1 class="bd-title" id="content">Images</h1>
  401.         </div>
  402.         <p class="bd-lead">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.</p>
  403.         <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
  404.  
  405.       </div>
  406.  
  407.  
  408.         <div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
  409.           <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
  410.           <nav id="TableOfContents">
  411.   <ul>
  412.     <li><a href="#responsive-images">Responsive images</a></li>
  413.     <li><a href="#image-thumbnails">Image thumbnails</a></li>
  414.     <li><a href="#aligning-images">Aligning images</a></li>
  415.     <li><a href="#picture">Picture</a></li>
  416.     <li><a href="#sass">Sass</a>
  417.       <ul>
  418.         <li><a href="#variables">Variables</a></li>
  419.       </ul>
  420.     </li>
  421.   </ul>
  422. </nav>
  423.         </div>
  424.  
  425.  
  426.       <div class="bd-content ps-lg-4">
  427.  
  428.  
  429.         <h2 id="responsive-images">Responsive images</h2>
  430. <p>Images in Bootstrap are made responsive with <code>.img-fluid</code>. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales with the parent element.</p>
  431. <div class="bd-example">
  432. <svg class="bd-placeholder-img bd-placeholder-img-lg img-fluid" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Responsive image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Responsive image</text></svg>
  433.  
  434. </div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;img-fluid&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;...&#34;</span><span class="p">&gt;</span></code></pre></div>
  435. <h2 id="image-thumbnails">Image thumbnails</h2>
  436. <p>In addition to our <a href="/docs/5.0/utilities/borders/">border-radius utilities</a>, you can use <code>.img-thumbnail</code> to give an image a rounded 1px border appearance.</p>
  437. <div class="bd-example">
  438. <svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
  439.  
  440. </div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;img-thumbnail&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;...&#34;</span><span class="p">&gt;</span></code></pre></div>
  441. <h2 id="aligning-images">Aligning images</h2>
  442. <p>Align images with the <a href="/docs/5.0/utilities/float/">helper float classes</a> or <a href="/docs/5.0/utilities/text/#text-alignment">text alignment classes</a>. <code>block</code>-level images can be centered using <a href="/docs/5.0/utilities/spacing/#horizontal-centering">the <code>.mx-auto</code> margin utility class</a>.</p>
  443. <div class="bd-example">
  444. <svg class="bd-placeholder-img rounded float-start" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
  445.  
  446. <svg class="bd-placeholder-img rounded float-end" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
  447.  
  448. </div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;rounded float-start&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;...&#34;</span><span class="p">&gt;</span>
  449. <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;rounded float-end&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;...&#34;</span><span class="p">&gt;</span></code></pre></div>
  450. <div class="bd-example">
  451. <svg class="bd-placeholder-img rounded mx-auto d-block" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
  452.  
  453. </div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;rounded mx-auto d-block&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;...&#34;</span><span class="p">&gt;</span></code></pre></div>
  454. <div class="bd-example">
  455. <div class="text-center">
  456.   <svg class="bd-placeholder-img rounded" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">200x200</text></svg>
  457.  
  458. </div>
  459. </div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;text-center&#34;</span><span class="p">&gt;</span>
  460.   <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;rounded&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;...&#34;</span><span class="p">&gt;</span>
  461. <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></code></pre></div>
  462. <h2 id="picture">Picture</h2>
  463. <p>If you are using the <code>&lt;picture&gt;</code> element to specify multiple <code>&lt;source&gt;</code> elements for a specific <code>&lt;img&gt;</code>, make sure to add the <code>.img-*</code> classes to the <code>&lt;img&gt;</code> and not to the <code>&lt;picture&gt;</code> tag.</p>
  464. <div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">picture</span><span class="p">&gt;</span>
  465.   <span class="p">&lt;</span><span class="nt">source</span> <span class="na">srcset</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;image/svg+xml&#34;</span><span class="p">&gt;</span>
  466.   <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;...&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;img-fluid img-thumbnail&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;...&#34;</span><span class="p">&gt;</span>
  467. <span class="p">&lt;/</span><span class="nt">picture</span><span class="p">&gt;</span>
  468. </code></pre></div><h2 id="sass">Sass</h2>
  469. <h3 id="variables">Variables</h3>
  470. <p>Variables are available for image thumbnails.</p>
  471. <div class="highlight"><pre class="chroma"><code class="language-scss" data-lang="scss"><span class="nv">$thumbnail-padding</span><span class="o">:</span>                 <span class="mf">.25</span><span class="kt">rem</span><span class="p">;</span>
  472. <span class="nv">$thumbnail-bg</span><span class="o">:</span>                      <span class="nv">$body-bg</span><span class="p">;</span>
  473. <span class="nv">$thumbnail-border-width</span><span class="o">:</span>            <span class="nv">$border-width</span><span class="p">;</span>
  474. <span class="nv">$thumbnail-border-color</span><span class="o">:</span>            <span class="nv">$gray-300</span><span class="p">;</span>
  475. <span class="nv">$thumbnail-border-radius</span><span class="o">:</span>           <span class="nv">$border-radius</span><span class="p">;</span>
  476. <span class="nv">$thumbnail-box-shadow</span><span class="o">:</span>              <span class="nv">$box-shadow-sm</span><span class="p">;</span>
  477. </code></pre></div>
  478.  
  479.       </div>
  480.     </main>
  481.   </div>
  482.  
  483.  
  484.     <footer class="bd-footer py-5 mt-5 bg-light">
  485.   <div class="container py-5">
  486.     <div class="row">
  487.       <div class="col-lg-3 mb-3">
  488.         <a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
  489.           <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
  490.           <span class="fs-5">Bootstrap</span>
  491.         </a>
  492.         <ul class="list-unstyled small text-muted">
  493.           <li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
  494.           <li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
  495.           <li class="mb-2">Currently v5.0.2.</li>
  496.           <li class="mb-2">Analytics by <a href="https://usefathom.com/ref/ADZSBE" target="_blank" rel="noopener">Fathom</a>.</li>
  497.         </ul>
  498.       </div>
  499.       <div class="col-6 col-lg-2 offset-lg-1 mb-3">
  500.         <h5>Links</h5>
  501.         <ul class="list-unstyled">
  502.           <li class="mb-2"><a href="/">Home</a></li>
  503.           <li class="mb-2"><a href="/docs/5.0/">Docs</a></li>
  504.           <li class="mb-2"><a href="/docs/5.0/examples/">Examples</a></li>
  505.           <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
  506.           <li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
  507.           <li class="mb-2"><a href="https://cottonbureau.com/people/bootstrap">Swag Store</a></li>
  508.         </ul>
  509.       </div>
  510.       <div class="col-6 col-lg-2 mb-3">
  511.         <h5>Guides</h5>
  512.         <ul class="list-unstyled">
  513.           <li class="mb-2"><a href="/docs/5.0/getting-started/">Getting started</a></li>
  514.           <li class="mb-2"><a href="/docs/5.0/examples/starter-template/">Starter template</a></li>
  515.           <li class="mb-2"><a href="/docs/5.0/getting-started/webpack/">Webpack</a></li>
  516.           <li class="mb-2"><a href="/docs/5.0/getting-started/parcel/">Parcel</a></li>
  517.         </ul>
  518.       </div>
  519.       <div class="col-6 col-lg-2 mb-3">
  520.         <h5>Projects</h5>
  521.         <ul class="list-unstyled">
  522.           <li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
  523.           <li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
  524.           <li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
  525.           <li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
  526.           <li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
  527.         </ul>
  528.       </div>
  529.       <div class="col-6 col-lg-2 mb-3">
  530.         <h5>Community</h5>
  531.         <ul class="list-unstyled">
  532.           <li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
  533.           <li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
  534.           <li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
  535.           <li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
  536.           <li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
  537.         </ul>
  538.       </div>
  539.     </div>
  540.   </div>
  541. </footer>
  542.  
  543.     <script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  544.  
  545.  
  546. <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
  547.  
  548. <script src="/docs/5.0/assets/js/docs.min.js"></script>
  549.  
  550.  
  551.  
  552.  
  553.   </body>
  554. </html>
Raw Paste

What is JustPasteIT.ORG?

JustPasteIT.ORG is a secure and ad-free online platform for sharing code snippets, text, and notes. It allows users to create and share content anonymously by default, using a simple text editor with formatting features. The platform also offers short URLs for easy sharing and the option to save content as text files. It's designed for developers, students, and anyone who needs a quick and private way to share text online without distractions.

JustPasteIT.ORG is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Install JustPasteIT for a better experience!