templates/ui-images.html.twig line 1

Open in your IDE?
  1. {{ include('partials/main.html.twig') }}
  3.     <head>
  5.         {{ include('partials/title-meta.html.twig', {title: 'Images'}) }}
  7.         {{ include('partials/head-css.html.twig') }}
  9.     </head>
  11.     {{ include('partials/body.html.twig') }}
  13.         <!-- Begin page -->
  14.         <div id="layout-wrapper">
  16.             {{ include('partials/menu.html.twig') }}
  18.             <!-- ============================================================== -->
  19.             <!-- Start right Content here -->
  20.             <!-- ============================================================== -->
  21.             <div class="main-content">
  23.                 <div class="page-content">
  24.                     <div class="container-fluid">
  26.                         {{ include('partials/page-title.html.twig', {pagetitle: 'Components', title: 'Images'}) }}
  28.                         <div class="row">
  29.                             <div class="col-xl-6">
  30.                                 <div class="card">
  31.                                     <div class="card-header">
  32.                                         <h4 class="card-title">Image Rounded & Circle</h4>
  33.                                         <p class="card-title-desc">Use classes
  34.                                             <code>.rounded</code> and <code>.rounded-circle</code>.
  35.                                         </p>
  36.                                     </div><!-- end card header -->
  38.                                     <div class="card-body">
  39.                                         <div class="row">
  40.                                             <div class="col-md-6">
  41.                                                 <img class="rounded me-2" alt="200x200" width="200" src="/images/small/img-4.jpg" data-holder-rendered="true">
  42.                                             </div><!-- end col -->
  43.                                             <div class="col-md-6">
  44.                                                 <div class="mt-4 mt-md-0">
  45.                                                     <img class="rounded-circle avatar-xl" alt="200x200" src="/images/users/avatar-4.jpg" data-holder-rendered="true">
  46.                                                 </div>
  47.                                             </div><!-- end col -->
  48.                                         </div><!-- end row -->
  49.                                     </div><!-- end card-body -->
  50.                                 </div><!-- end card -->
  52.                                 <div class="card">
  53.                                     <div class="card-header">
  54.                                         <h4 class="card-title">Image Thumbnails</h4>
  55.                                         <p class="card-title-desc">In addition to our border-radius utilities, you can use
  56.                                             <code class="highlighter-rouge">.img-thumbnail</code> to give an image a
  57.                                             rounded 1px border appearance.</p>
  58.                                     </div><!-- end card header -->
  60.                                     <div class="card-body">
  61.                                         <div class="row">
  62.                                             <div class="col-md-6">
  63.                                                 <img class="img-thumbnail" alt="200x200" width="200" src="/images/small/img-3.jpg" data-holder-rendered="true">
  64.                                             </div><!-- end col -->
  65.                                             <div class="col-md-6">
  66.                                                 <div class="mt-4 mt-md-0">
  67.                                                     <img class="img-thumbnail rounded-circle avatar-xl" alt="200x200" src="/images/users/avatar-3.jpg" data-holder-rendered="true">
  68.                                                 </div>
  69.                                             </div><!-- end col -->
  70.                                         </div><!-- end row -->
  71.                                     </div><!-- end card-body -->
  72.                                 </div><!-- end card -->
  73.                             </div><!-- end col -->
  75.                             <div class="col-xl-6">
  76.                                 <div class="card">
  77.                                     <div class="card-header">
  78.                                         <h4 class="card-title">Responsive Images</h4>
  79.                                         <p class="card-title-desc">Images in Bootstrap are made responsive
  80.                                             with <code class="highlighter-rouge">.img-fluid</code>. <code
  81.                                                     class="highlighter-rouge">max-width: 100%;</code> and <code
  82.                                                     class="highlighter-rouge">height: auto;</code> are applied to
  83.                                             the image so that it scales with the parent element.</p>
  84.                                     </div><!-- end card header -->
  85.                                     
  86.                                     <div class="card-body">
  87.                                         <div>
  88.                                             <img src="/images/small/img-2.jpg" class="img-fluid" alt="Responsive image">
  89.                                         </div>
  90.                                     </div><!-- end card-body -->
  91.                                 </div><!-- end card -->
  92.                             </div><!-- end col -->
  93.                         </div><!-- end row -->
  95.                         <div class="row">
  96.                             <div class="col-lg-12">
  97.                                 <div class="card">
  98.                                     <div class="card-header">
  99.                                         <h4 class="card-title">Image Sizes</h4>
  100.                                         <p class="card-title-desc">Avatar Different sizes: xs, sm, md, lg, xl</p>
  101.                                     </div><!-- end card header -->
  103.                                     <div class="card-body">
  104.                                         <div class="row">
  105.                                             <div class="col-md-6">
  106.                                                 <div class="row">
  107.                                                     <div class="col-lg-4">
  108.                                                         <div>
  109.                                                             <img src="/images/users/avatar-3.jpg" alt="" class="rounded avatar-sm">
  110.                                                             <p class="mt-2 mb-lg-0"><code>.avatar-sm</code></p>
  111.                                                         </div>
  112.                                                     </div><!-- end col -->
  113.                                                     <div class="col-lg-4">
  114.                                                         <div>
  115.                                                             <img src="/images/users/avatar-4.jpg" alt="" class="rounded avatar-md">
  116.                                                             <p class="mt-2  mb-lg-0"><code>.avatar-md</code></p>
  117.                                                         </div>
  118.                                                     </div><!-- end col -->
  119.                                                     <div class="col-lg-4">
  120.                                                         <div>
  121.                                                             <img src="/images/users/avatar-5.jpg" alt="" class="rounded avatar-lg">
  122.                                                             <p class="mt-2 mb-lg-0"><code>.avatar-lg</code></p>
  123.                                                         </div>
  124.                                                     </div><!-- end col -->
  125.                                                 </div><!-- end row -->
  126.                                             </div><!-- end col -->
  128.                                             <div class="col-md-6">
  129.                                                 <div class="row">
  130.                                                     <div class="col-lg-4">
  131.                                                         <div>
  132.                                                             <img src="/images/users/avatar-3.jpg" alt="" class="rounded-circle avatar-sm">
  133.                                                             <p class="mt-2 mb-lg-0"><code>.avatar-sm</code></p>
  134.                                                         </div>
  135.                                                     </div><!-- end col -->
  136.                                                     <div class="col-lg-4">
  137.                                                         <div>
  138.                                                             <img src="/images/users/avatar-4.jpg" alt="" class="rounded-circle avatar-md">
  139.                                                             <p class="mt-2  mb-lg-0"><code>.avatar-md</code></p>
  140.                                                         </div>
  141.                                                     </div><!-- end col -->
  142.                                                     <div class="col-lg-4">
  143.                                                         <div>
  144.                                                             <img src="/images/users/avatar-5.jpg" alt="" class="rounded-circle avatar-lg">
  145.                                                             <p class="mt-2 mb-lg-0"><code>.avatar-lg</code></p>
  146.                                                         </div>
  147.                                                     </div><!-- end col -->
  148.                                                 </div><!-- end row -->
  149.                                             </div>
  150.                                         </div>
  151.                                     </div><!-- end card-body -->
  152.                                 </div><!-- end card -->
  153.                             </div><!-- end col -->
  154.                         </div><!-- end row -->
  156.                         <div class="row">
  157.                             <div class="col-12">
  158.                                 <div class="card">
  159.                                     <div class="card-header">
  160.                                         <h4 class="card-title">Media Object</h4>
  161.                                         <p class="card-title-desc">The images or other media can be
  162.                                             aligned top, middle, or bottom. The default is top aligned.
  163.                                         </p>
  164.                                     </div><!-- end card header -->
  166.                                     <div class="card-body">
  167.                                         <div class="d-flex">
  168.                                             <div class="flex-shrink-0 me-3">
  169.                                                 <img class="rounded avatar-md" src="/images/users/avatar-3.jpg" alt="Generic placeholder image">
  170.                                             </div>
  171.                                             <div class="flex-grow-1">
  172.                                                 <h5>Top-aligned media</h5>
  173.                                                 <p class="mb-0">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>
  174.                                             </div>
  175.                                         </div>
  176.                                         
  177.                                         <hr>
  179.                                         <div class="d-flex align-items-center">
  180.                                             <div class="flex-shrink-0 me-3">
  181.                                                 <img class="rounded avatar-md" src="/images/users/avatar-5.jpg" alt="Generic placeholder image">
  182.                                             </div>
  183.                                             <div class="flex-grow-1">
  184.                                                 <h5>Center-aligned media</h5>
  185.                                                 <p class="mb-0">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>
  186.                                             </div>
  187.                                         </div>
  189.                                         <hr>
  191.                                         <div class="d-flex align-items-end">
  192.                                             <div class="flex-shrink-0 me-3">
  193.                                                 <img class="rounded avatar-md" src="/images/users/avatar-1.jpg" alt="Generic placeholder image">
  194.                                             </div>
  195.                                             <div class="flex-grow-1">
  196.                                                 <h5>Bottom-aligned media</h5>
  197.                                                 <p class="mb-0">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>
  198.                                             </div>
  199.                                         </div>
  200.                                     </div><!-- end card-body -->
  201.                                 </div><!-- end card -->
  202.                             </div><!-- end col -->
  203.                         </div><!-- end row -->
  204.                         
  205.                     </div><!-- container-fluid -->
  206.                 </div><!-- End Page-content -->
  208.                 
  209.                 {{ include('partials/footer.html.twig') }}
  210.             </div>
  211.             <!-- end main content-->
  213.         </div>
  214.         <!-- END layout-wrapper -->
  216.         {{ include('partials/right-sidebar.html.twig') }}
  218.         {{ include('partials/vendor-scripts.html.twig') }}
  220.         <script src="/js/app.js"></script>
  222.     </body>
  223. </html>