"new4.1"
Bootstrap 4.1.1 Snippet by vijay18399

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <div id="navbar-wrapper"> <header> <nav class="navbar navbar-light bg-light fixed-top navbar-expand-md" role="navigation"> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> ☰</button> <a class="navbar-brand" href="#">Campus News</a> <div id="navbar-collapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav ml-auto"> <li class="dropdown nav-item"> </li> </ul> </div> </nav> </header> </div> <div id="wrapper"> <div id="sidebar-wrapper"> <aside id="sidebar"> <ul id="sidemenu" class="sidebar-nav"> <li> <a href="#"> <span class="sidebar-icon"><img src="https://findicons.com/files/icons/1261/sticker_system/128/home.png" width="25px"></span> <span class="sidebar-title">Home Page</span> </a> </li> <li> <a class="accordion-toggle collapsed toggle-switch" data-toggle="collapse" href="#submenu-2"> <span class="sidebar-icon"><img src="http://pragati.ac.in/wp-content/uploads/2014/10/icon-staff-512x410.png" width="25px"></span> <span class="sidebar-title">Drive Details</span> <b class="caret"></b> </a> <ul id="submenu-2" class="panel-collapse collapse panel-switch" role="menu"> <li><a href="#"><i class="fa fa-caret-right"></i>Placed Candidates</a> </li> <li><a href="#"><i class="fa fa-caret-right"></i>Campus Drive</a> </li> </ul> </li> <li> <a class="accordion-toggle collapsed toggle-switch" data-toggle="collapse" href="#submenu-3"> <span class="sidebar-icon"><img src="https://png2.kisspng.com/sh/260777402872b1f4de5ee31c9aa92fe4/L0KzQYm3U8IxN5t6fZH0aYP2gLBuTgBieJZ3ReZuc4Swdrr1gfwubalmhdt3YYTsf7A0gBxqeF5miuY2ZYjkfcS0gBxqeJJ3jOU2NXHlQbPohcA2O5U6S6Q3N0G3R4WBVsMyPWM2TasCMUW1Q4W6VL5xdpg=/kisspng-paper-test-final-examination-clip-art-exams-cliparts-5ab1bae053d532.7147486315215971523434.png" width="25px"></span> <span class="sidebar-title">Exam</span> <b class="caret"></b> </a> <ul id="submenu-3" class="panel-collapse collapse panel-switch" role="menu"> <li><a href="#"><i class="fa fa-caret-right"></i>Results</a> </li> <li><a href="#"><i class="fa fa-caret-right"></i>Schedule</a> </li> </ul> </li> <li> <a href="#"> <span class="sidebar-icon"><img src="https://menministry.org/wp-content/uploads/2016/01/seminar-icon-2.png" width="25px"></span> <span class="sidebar-title">Seminars</span> </a> </li> <li> <a href="#"> <span class="sidebar-icon"><img src="https://image.winudf.com/v2/image/Y29tLlJTU1RlY2gubXluZXdzX2ljb25fMF83ZWIxNjFmMQ/icon.png?w=170&fakeurl=1&type=.png" width="25px"></span> <span class="sidebar-title">Tech Bit</span> </a> </li> <li> <a href="#"> <span class="sidebar-icon"><img src="http://chittagongit.com//images/events-icon/events-icon-0.jpg" width="25px"></span> <span class="sidebar-title">Events</span> </a> </li> <li> <a href="#"> <span class="sidebar-icon"><img src="http://resultscoachingwithgina.com/wp-content/uploads/2016/05/workshop-icon-300x300.jpg" width="25px"></span> <span class="sidebar-title">Workshops</span> </a> </li> <li> <a href="#"> <span class="sidebar-icon"><img src="https://www.mcs4kids.com/img/IT/training-icon.png" width="25px"></span> <span class="sidebar-title">Trainings</span> </a> </li> <li> <a href="#"> <span class="sidebar-icon"><img src="https://steemitimages.com/DQmX3UYjuRAq9xGjeDd7uqijy6AqhTkYNSyLYXFF3kDbmst/Latest-News.jpg" width="25px"></span> <span class="sidebar-title">News Bit</span> </a> </li> <li> <a href="#"> <span class="sidebar-icon"><img src="https://steamuserimages-a.akamaihd.net/ugc/903402282898635356/5BE19E415A66E55CCE83F469521610528F122C4F/?interpolation=lanczos-none&output-format=jpeg&output-quality=95&fit=inside%7C128%3A128&composite-to=*,*%7C128%3A128&background-color=black" width="25px"></span> <span class="sidebar-title">Achievements</span> </a> </li> </ul> </aside>t</div> <main id="page-content-wrapper" role="main"><div id="demo" class="carousel slide" data-ride="carousel"> <center><h3>What's New</h3></center> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500"> </div> <div class="carousel-item"> <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500"> </div> <div class="carousel-item"> <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500"> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </main> </div> </body>
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'); body { background: lightgray; } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-default .navbar-nav #user-profile { height: 50px; padding-top: 15px; padding-left: 58px; } .navbar-default .navbar-nav #user-profile img { height: 45px; width: 45px; position: absolute; top: 2px; left: 8px; padding: 1px; } #wrapper { padding-top: 50px; padding-left: 0; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } @media (min-width: 992px) { #wrapper { padding-left: 225px; } } @media (min-width: 992px) { #wrapper #sidebar-wrapper { width: 225px; } } #sidebar-wrapper { border-right: 1px solid #e7e7e7; } #sidebar-wrapper { z-index: 1000; position: fixed; left: 225px; width: 0; height: 100%; margin-left: -225px; overflow-y: auto; background: #f8f8f8; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } #sidebar-wrapper .sidebar-nav { position: absolute; top: 0; width: 225px; font-size: 14px; margin: 0; padding: 0; list-style: none; } #sidebar-wrapper .sidebar-nav li { text-indent: 0; line-height: 45px; } #sidebar-wrapper .sidebar-nav li a { display: block; text-decoration: none; color: #428bca; } .sidebar-nav li:first-child a { background: #92bce0 !important; color: #fff !important; } #sidebar-wrapper .sidebar-nav li a .sidebar-icon { width: 45px; height: 45px; font-size: 14px; padding: 0 2px; display: inline-block; text-indent: 7px; margin-right: 10px; color: #fff; float: left; } #sidebar-wrapper .sidebar-nav li a .caret { position: absolute; right: 23px; top: auto; margin-top: 20px; } #sidebar-wrapper .sidebar-nav li ul.panel-collapse { list-style: none; -moz-padding-start: 0; -webkit-padding-start: 0; -khtml-padding-start: 0; -o-padding-start: 0; padding-start: 0; padding: 0; } #sidebar-wrapper .sidebar-nav li ul.panel-collapse li i { margin-right: 10px; } #sidebar-wrapper .sidebar-nav li ul.panel-collapse li { text-indent: 15px; } @media (max-width: 992px) { #wrapper #sidebar-wrapper { width: 45px; } #wrapper #sidebar-wrapper #sidebar #sidemenu li ul { position: fixed; left: 45px; margin-top: -45px; z-index: 1000; width: 200px; height: 0; } } .sidebar-nav li:first-child a { background: #92bce0 !important; color: #fff !important; } .sidebar-nav li:nth-child(2) a { background: #6aa3d5 !important; color: #fff !important; } .sidebar-nav li:nth-child(3) a { background: #428bca !important; color: #fff !important; } .sidebar-nav li:nth-child(4) a { background: #3071a9 !important; color: #fff !important; } .sidebar-nav li:nth-child(5) a { background: #245682 !important; color: #fff !important; } .sidebar-nav li:nth-child(6) a { background: #6aa3d5 !important; color: #fff !important; } .sidebar-nav li:nth-child(7) a { background: #428bca !important; color: #fff !important; } .sidebar-nav li:nth-child(8) a { background: #3071a9 !important; color: #fff !important; } .sidebar-nav li:nth-child(9) a { background: #245682 !important; color: #fff !important; } .sidebar-nav li:nth-child(10) a { background: #245682 !important; color: #fff !important; } /* Make the image fully responsive */ /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {.carousel-inner img { width:100%; height:200px; }} /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) { .carousel-inner img { width: 100%; height:180px; }} /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) { .carousel-inner img { width: 100%; height:20%; } } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) { .carousel-inner img { width: 100%; height:180px; }} /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) { .carousel-inner img { width: 100%; height:20%; }}

Related: See More

Material Dashboard React

Questions / Comments: