File manager - Edit - /home/cipherteam/htdocs/cipherteam.in/yogi/documentation/docs-ui-listmedia.html
Back
<!DOCTYPE html> <html dir="ltr" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Tell the browser to be responsive to screen width --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <!-- Favicon icon --> <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png"> <title>Elite admin Template - The Ultimate Multipurpose admin template</title> <!-- This page css --> <!-- Custom CSS --> <!-- Custom CSS --> <link href="../inverse/dist/css/style.css" rel="stylesheet"> <!-- Custom CSS --> <link rel="stylesheet" type="text/css" href="highlights/highlight.min.css"> <!-- Custom CSS --> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <!-- Custom CSS --> <style> .font-18 { font-size: 18px !important; } </style> </head> <body class="skin-default fixed-layout"> <!-- ============================================================== --> <!-- Preloader - style you can find in spinners.css --> <!-- ============================================================== --> <div class="preloader"> <div class="loader"> <div class="loader__figure"></div> <p class="loader__label">Elite Admin</p> </div> </div> <!-- ============================================================== --> <!-- Main wrapper - style you can find in pages.scss --> <!-- ============================================================== --> <div id="main-wrapper"> <!-- ============================================================== --> <!-- Topbar header - style you can find in pages.scss --> <!-- ============================================================== --> <header class="topbar"> <nav class="navbar top-navbar navbar-expand-md navbar-dark"> <!-- ============================================================== --> <!-- Logo --> <!-- ============================================================== --> <div class="navbar-header"> <a class="navbar-brand" href="index.html"> <!-- Logo icon --><b> <!--You can put here icon as well // <i class="wi wi-sunset"></i> //--> <!-- Dark Logo icon --> <img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" /> <!-- Light Logo icon --> <img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo" /> </b> <!--End Logo icon --> <!-- Logo text --><span> <!-- dark Logo text --> <img src="../assets/images/logo-text.png" alt="homepage" class="dark-logo" /> <!-- Light Logo text --> <img src="../assets/images/logo-light-text.png" class="light-logo" alt="homepage" /></span> </a> </div> <!-- ============================================================== --> <!-- End Logo --> <!-- ============================================================== --> <div class="navbar-collapse"> <!-- ============================================================== --> <!-- toggle and nav items --> <!-- ============================================================== --> <ul class="navbar-nav mr-auto"> <!-- This is --> <li class="nav-item"> <a class="nav-link nav-toggler d-block d-md-none waves-effect waves-dark" href="javascript:void(0)"> <i class="ti-menu"></i> </a> </li> <li class="nav-item"> <a class="nav-link sidebartoggler d-none d-lg-none d-md-block waves-effect waves-dark" href="javascript:void(0)"> <i class="icon-menu"></i> </a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light" href="documentation.html">Documentation</a></li> </ul> </div> </nav> </header> <!-- ============================================================== --> <!-- End Topbar header --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- Left Sidebar - style you can find in sidebar.scss --> <!-- ============================================================== --> <aside class="left-sidebar"> <!-- Sidebar scroll--> <div class="scroll-sidebar"> <!-- Sidebar navigation--> <nav class="sidebar-nav"> <ul id="sidebarnav"> <li class="nav-small-cap pt-2 mt-0">-- Getting Started with Bootstrap</li> <li> <a class="waves-effect waves-dark" href="documentation.html" aria-expanded="false"><i class="icon-chart font-18"></i> <span class="hide-menu">Introduction</span></a> </li> <li> <a class="waves-effect waves-dark" href="docs-start.html" aria-expanded="false"><i class="ti-notepad font-18"></i> <span class="hide-menu">Gettings Started</span></a> </li> <li class="nav-small-cap border-top pt-3 border-muted">-- Getting Started with Angular</li> <li> <a class="waves-effect waves-dark" href="docs-install-angular.html" aria-expanded="false"><i class="mdi mdi-angular font-18"></i> <span class="hide-menu">Installation</span></a> </li> <li class="nav-small-cap border-top pt-3 border-muted">-- Getting Started with React</li> <li> <a class="waves-effect waves-dark" href="docs-install-react.html" aria-expanded="false"><i class="mdi mdi-react font-18"></i> <span class="hide-menu">Installation</span></a> </li> <li class="nav-small-cap border-top pt-3 border-muted">-- Getting Started with VueJs</li> <li> <a class="waves-effect waves-dark" href="docs-install-vuejs.html" aria-expanded="false"><i class=" font-18">V</i> <span class="hide-menu">Installation</span></a> </li> <li class="nav-small-cap border-top pt-3 border-muted">-- Customization</li> <li> <a class="waves-effect waves-dark" href="docs-theme-options.html" aria-expanded="false"><i class="icon-drawar font-18"></i> <span class="hide-menu">Theme Options</span></a> </li> <li class="nav-small-cap border-top pt-3 border-muted">-- UI Components</li> <li> <a class="waves-effect waves-dark has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="icon-grid font-18"></i><span class="hide-menu">Bootstrap </span></a> <ul aria-expanded="false" class="collapse first-level"> <li><a href="docs-ui-buttons.html"><span class="hide-menu"> Buttons </span></a></li> <li><a href="docs-ui-modals.html"><span class="hide-menu"> Modals </span></a></li> <li><a href="docs-ui-tabs.html"><span class="hide-menu"> Tabs </span></a></li> <li><a href="docs-ui-tooltip-popover.html"><span class="hide-menu"> Tooltip & Popover </span></a></li> <li><a href="docs-ui-notification.html"><span class="hide-menu"> Notification </span></a></li> <li><a href="docs-ui-progressbar.html"><span class="hide-menu"> Progressbar </span></a></li> <li><a href="docs-ui-typography.html"><span class="hide-menu"> Typography </span></a></li> <li><a href="docs-ui-bootstrapui.html"><span class="hide-menu"> Bootstrap UI </span></a></li> <li><a href="docs-ui-breadcrumb.html"><span class="hide-menu"> Breadcrumb </span></a></li> <li><a href="docs-ui-listmedia.html"><span class="hide-menu"> List Media </span></a></li> <li><a href="docs-ui-grid.html"><span class="hide-menu"> Grid </span></a></li> <li><a href="docs-ui-carousel.html"><span class="hide-menu"> Carousel </span></a></li> <li><a href="docs-ui-scrollspy.html"><span class="hide-menu"> Scrollspy </span></a></li> <li><a href="docs-ui-toasts.html"><span class="hide-menu"> Toasts </span></a></li> <li><a href="docs-ui-spinner.html"><span class="hide-menu"> Spinner </span></a></li> </ul> </li> <li> <a class="waves-effect waves-dark has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false"><i class="icon-note font-18"></i><span class="hide-menu">Customized</span></a> <ul aria-expanded="false" class="collapse first-level"> <li><a href="docs-custom-datatables.html"><span class="hide-menu"> Datatables</span></a></li> <li><a href="docs-custom-table-footable.html"><span class="hide-menu"> Footable Table</span></a></li> <li><a href="docs-custom-table-bootstrap.html"><span class="hide-menu"> Bootstrap Table</span></a></li> <li><a href="docs-custom-cards.html"><span class="hide-menu"> Cards</span></a></li> <li><a href="docs-custom-widgets.html"><span class="hide-menu"> Widgets</span></a></li> <li><a href="docs-custom-chart-chartjs.html"><span class="hide-menu"> ChartJs</span></a></li> <li><a href="docs-custom-chart-chartist.html"><span class="hide-menu"> Chartist</span></a></li> <li><a href="docs-custom-chart-echart.html"><span class="hide-menu"> Echart</span></a></li> <li><a href="docs-custom-colorpicker.html"><span class="hide-menu"> Colorpicker</span></a></li> <li><a href="docs-custom-material-datepicker.html"><span class="hide-menu"> Material Datepicker</span></a></li> <li><a href="docs-custom-touchspin.html"><span class="hide-menu"> Touchspin</span></a></li> <li><a href="docs-custom-multiselect.html"><span class="hide-menu"> Multiselect</span></a></li> </ul> </li> </ul> </nav> <!-- End Sidebar navigation --> </div> <!-- End Sidebar scroll--> </aside> <!-- ============================================================== --> <!-- End Left Sidebar - style you can find in sidebar.scss --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- Page wrapper --> <!-- ============================================================== --> <div class="page-wrapper"> <!-- ============================================================== --> <!-- Container fluid --> <!-- ============================================================== --> <div class="page-content container-fluid"> <!-- ============================================================== --> <!-- Bread crumb and right sidebar toggle --> <!-- ============================================================== --> <div class="row page-titles"> <div class="col-md-5 align-self-center"> <h4 class="text-themecolor">List Media</h4> </div> <div class="col-md-7 align-self-center"> <ol class="breadcrumb float-right"> <li class="breadcrumb-item"><a href="javascript:void(0)">Elite</a></li> <li class="breadcrumb-item text-primary font-medium">List Media</li> </ol> </div> </div> <!-- ============================================================== --> <!-- End Bread crumb and right sidebar toggle --> <!-- ============================================================== --> <div class="row"> <div class="col-md-12"> <div class="card overflow-hidden"> <div class="card-body border-bottom"> <h4 class="card-title mb-0">Bootstrap List Media</h4> </div> <div class="row justify-content-center bg-light p-5"> <div class="col-md-7"> <div class="card shadow-sm"> <div class="p-4 text-center"> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here:</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 200px;"> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </code> </pre> </div> <div class="px-4"> <h4 class="card-title">Linked Items</h4> </div> <div class="row justify-content-center bg-light p-5 mt-4"> <div class="col-md-9"> <div class="card shadow-sm"> <div class="p-4 text-center"> <div class="list-group"> <a href="javascript:void(0)" class="list-group-item active">Cras justo odio</a> <a href="javascript:void(0)" class="list-group-item">Dapibus ac facilisis in</a> <a href="javascript:void(0)" class="list-group-item">Morbi leo risus</a> <a href="javascript:void(0)" class="list-group-item">Porta ac consectetur ac</a> <a href="javascript:void(0)" class="list-group-item">Vestibulum at eros</a> </div> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 250px;"> <div class="list-group"> <a href="javascript:void(0)" class="list-group-item active">Cras justo odio</a> <a href="javascript:void(0)" class="list-group-item">Dapibus ac facilisis in</a> <a href="javascript:void(0)" class="list-group-item">Morbi leo risus</a> <a href="javascript:void(0)" class="list-group-item">Porta ac consectetur ac</a> <a href="javascript:void(0)" class="list-group-item">Vestibulum at eros</a> </div> </code> </pre> </div> <div class="px-4"> <h4 class="card-title">With Badges</h4> </div> <div class="row justify-content-center bg-light p-5 mt-4"> <div class="col-md-9"> <div class="card shadow-sm"> <div class="p-4 text-center"> <ul class="list-group list-group-full"> <li class="list-group-item"> Cras justo odio <span class="badge badge-info ml-auto">6</span></li> <li class="list-group-item"> Dapibus ac facilisis in </li> <li class="list-group-item"> Morbi leo risus <span class="badge badge-danger ml-auto">3</span></li> <li class="list-group-item active"> Porta ac consectetur ac <span class="badge badge-success ml-auto">10</span></li> <li class="list-group-item"> Vestibulum at eros </li> </ul> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 250px;"> <ul class="list-group list-group-full"> <li class="list-group-item"> Cras justo odio <span class="badge badge-info ml-auto">6</span></li> <li class="list-group-item"> Dapibus ac facilisis in </li> <li class="list-group-item"> Morbi leo risus <span class="badge badge-danger ml-auto">3</span></li> <li class="list-group-item active"> Porta ac consectetur ac <span class="badge badge-success ml-auto">10</span></li> <li class="list-group-item"> Vestibulum at eros </li> </ul> </code> </pre> </div> <div class="px-4"> <h4 class="card-title">Media object</h4> </div> <div class="row justify-content-center bg-light p-5 mt-4"> <div class="col-md-9"> <div class="card shadow-sm"> <div class="p-4"> <ul class="list-unstyled"> <li class="media"> <img class="d-flex mr-3" src="../assets/images/users/1.jpg" width="60" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> 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. </div> </li> <li class="media my-4"> <img class="d-flex mr-3" src="../assets/images/users/2.jpg" width="60" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> 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. </div> </li> <li class="media"> <img class="d-flex mr-3" src="../assets/images/users/3.jpg" width="60" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> 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. <div class="media mt-3"> <a class="d-flex pr-3" href="javascript:void(0)"> <img src="../assets/images/users/4.jpg" width="60" height="60" alt="Generic placeholder image"> </a> <div class="media-body"> <h5 class="mt-0">Media heading</h5> 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. </div> </div> </div> </li> </ul> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 300px;"> <ul class="list-unstyled"> <li class="media"> <img class="d-flex mr-3" src="../assets/images/users/1.jpg" width="60" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> 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. </div> </li> <li class="media my-4"> <img class="d-flex mr-3" src="../assets/images/users/2.jpg" width="60" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> 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. </div> </li> <li class="media"> <img class="d-flex mr-3" src="../assets/images/users/3.jpg" width="60" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> 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. <div class="media mt-3"> <a class="d-flex pr-3" href="javascript:void(0)"> <img src="../assets/images/users/4.jpg" width="60" height="60" alt="Generic placeholder image"> </a> <div class="media-body"> <h5 class="mt-0">Media heading</h5> 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. </div> </div> </div> </li> </ul> </code> </pre> </div> <div class="px-4"> <h4 class="card-title">Tabs JavaScript behavior</h4> </div> <div class="row justify-content-center bg-light p-5 mt-4"> <div class="col-md-9"> <div class="card shadow-sm"> <div class="p-4"> <div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a> <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a> <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a> </div> </div> <div class="col-8"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active text-justify" id="list-home" role="tabpanel" aria-labelledby="list-home-list"> Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. </div> <div class="tab-pane fade text-justify" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list"> Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. </div> <div class="tab-pane fade text-justify" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list"> Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. </div> </div> </div> </div> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 300px;"> <div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a> <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a> <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a> </div> </div> <div class="col-8"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list"> Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. </div> <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list"> Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. </div> <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list"> Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. </div> </div> </div> </div> </code> </pre> </div> <div class="px-4"> <h4 class="card-title">Nesting Media</h4> </div> <div class="row justify-content-center bg-light p-5 mt-4"> <div class="col-md-9"> <div class="card shadow-sm"> <div class="p-4"> <div class="media"> <img class="mr-3 w-25" src="../assets/images/big/img1.jpg" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 text-dark">Media heading</h5> 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. <div class="media mt-3"> <a class="pr-3 w-25" href="#"> <img src="../assets/images/big/img1.jpg" class="w-100" alt="Generic placeholder image"> </a> <div class="media-body"> <h5 class="mt-0 text-dark">Media heading</h5> 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. </div> </div> </div> </div> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 300px;"> <div class="media"> <img class="mr-3 w-25" src="../assets/images/big/img1.jpg" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 text-dark">Media heading</h5> 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. <div class="media mt-3"> <a class="pr-3 w-25" href="#"> <img src="../assets/images/big/img1.jpg" class="w-100" alt="Generic placeholder image"> </a> <div class="media-body"> <h5 class="mt-0 text-dark">Media heading</h5> 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. </div> </div> </div> </div> </code> </pre> </div> <div class="px-4"> <h4 class="card-title">Alignment Media</h4> </div> <div class="row justify-content-center bg-light p-5 mt-4"> <div class="col-md-9"> <div class="card shadow-sm"> <div class="p-4"> <h4 class="card-title">Top Alignment</h4> <div class="media"> <img class="align-self-start w-25 mr-3" src="../assets/images/big/img1.jpg" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0">Top-aligned media</h5> <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> <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> </div> </div> <hr> <h4 class="card-title">Center Alignment</h4> <div class="media"> <img class="align-self-center w-25 mr-3" src="../assets/images/big/img1.jpg" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0">Center-aligned media</h5> <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> <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> </div> </div> <hr> <h4 class="card-title">Bottom Alignment</h4> <div class="media"> <img class="align-self-end mr-3 w-25" src="../assets/images/big/img1.jpg" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0">Bottom-aligned media</h5> <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> <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> </div> </div> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 300px;"> <h4 class="card-title">Top Alignment</h4> <div class="media"> <img class="align-self-start w-25 mr-3" src="../assets/images/big/img1.jpg" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0">Top-aligned media</h5> <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> <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> </div> </div> <hr> <h4 class="card-title">Center Alignment</h4> <div class="media"> <img class="align-self-center w-25 mr-3" src="../assets/images/big/img1.jpg" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0">Center-aligned media</h5> <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> <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> </div> </div> <hr> <h4 class="card-title">Bottom Alignment</h4> <div class="media"> <img class="align-self-end mr-3 w-25" src="../assets/images/big/img1.jpg" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0">Bottom-aligned media</h5> <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> <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> </div> </div> </code> </pre> </div> <div class="px-4"> <h4 class="card-title">Media list</h4> </div> <div class="row justify-content-center bg-light p-5 mt-4"> <div class="col-md-9"> <div class="card shadow-sm"> <div class="p-4"> <ul class="list-unstyled"> <li class="media"> <img class="mr-3 w-25" src="../assets/images/big/img1.jpg" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> 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. </div> </li> <li class="media my-4"> <img class="mr-3 w-25" src="../assets/images/big/img1.jpg" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> 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. </div> </li> <li class="media"> <img class="mr-3 w-25" src="../assets/images/big/img1.jpg" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> 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. </div> </li> </ul> </div> </div> </div> </div> <div class="px-4"> <h4 class="card-title mt-4">Code Here</h4> <hr> <pre class="highlight html shadow-none"> <code class="shadow-sm px-4" style="height: 300px;"> <ul class="list-unstyled"> <li class="media"> <img class="mr-3 w-25" src="../assets/images/big/img1.jpg" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> 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. </div> </li> <li class="media my-4"> <img class="mr-3 w-25" src="../assets/images/big/img1.jpg" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> 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. </div> </li> <li class="media"> <img class="mr-3 w-25" src="../assets/images/big/img1.jpg" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">List-based media object</h5> 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. </div> </li> </ul> </code> </pre> </div> </div> </div> </div> </div> <!-- ============================================================== --> <!-- End Container fluid --> <!-- ============================================================== --> </div> <!-- ============================================================== --> <!-- End Page wrapper --> <!-- ============================================================== --> </div> <!-- ============================================================== --> <!-- footer --> <!-- ============================================================== --> <footer class="footer text-center"> All Rights Reserved by Elite. Designed and Developed by <a href="https://wrappixel.com">WrapPixel</a>. </footer> <!-- ============================================================== --> <!-- End footer --> <!-- ============================================================== --> <!-- ============================================================== --> <!-- End Wrapper --> <!-- ============================================================== --> <!-- End Page --> <!-- ============================================================== --> <!-- All Jquery --> <!-- ============================================================== --> <script src="../assets/node_modules/jquery/jquery-3.2.1.min.js"></script> <script src="../assets/node_modules/popper/popper.min.js"></script> <script src="../assets/node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <!-- apps --> <script src="../inverse/dist/js/perfect-scrollbar.jquery.min.js"></script> <script src="../inverse/dist/js/waves.js"></script> <!--Menu sidebar --> <script src="../inverse/dist/js/sidebarmenu.js"></script> <script src="../inverse/dist/js/perfect-scrollbar.jquery.min.js"></script> <!--Custom JavaScript --> <!--Custom JavaScript --> <script src="../inverse/dist/js/custom.js"></script> <script src="highlights/highlight.min.js"></script> <script> hljs.initHighlightingOnLoad(); </script> <!-- End JS --> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 8.2.9 | Generation time: 0.02 |
proxy
|
phpinfo
|
Settings