Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"you tube clone "
Bootstrap 3.3.0 Snippet by
gulzaibzahid
3.3.0
Preview
HTML
CSS
JS
View Full Screen
Fork
Fork this
1.7K
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <nav class="navbar navbar-default form-inline " > <!-- Brand and toggle get grouped for better mobile display --> <!--<div class="navbar-header">--> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!--</div>--> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse " id="navbar-collapse-1"> <ul class="nav navbar-nav list-group-horizontal navbar-right"> <li><a class="nav-item nav-link"href="#">Home</a></li> <li><a class="nav-item nav-link list-inline-item" href="#">About Us</a></li> <li><a class="nav-item nav-link list-inline-item" href="#">Features</a></li> <li><a class="nav-item nav-link list-inline-item" href="#">My Reflektion</a></li> <li><a class="nav-item nav-link list-inline-item" href="#">Contacts</a></li> <li><a class="nav-item nav-link list-inline-item" href="#">SignUp</a></li> <li><a class="nav-item nav-link list-inline-item" href="#">Login</a></li> </ul> <div> <form class="form-inline " style="margin-top:5px;"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </div><!-- /.navbar-collapse --> </nav><!-- /.navbar --> </div><!-- /.container --> <div class="row topline text-center bg-faded"> <div class="col-md-12"> <ul class="list-inline subh"> <li class="list-inline-item subh-li"><a href="#">Home</a></li> <li class="list-inline-item subh-li"><a href="#">Trending</a></li> <li class="list-inline-item subh-li"><a href="#">Subscriptions</a></li> </ul> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-xs-3 collapse in bg-default" id="sidebar" > <ul class="list-unstyled"> <li> <a href="#"> <i class="fa fa-dashboard"></i> <span>My Videos</span> </a> </li> <li> <a href="#"> <i class="fa fa-list"></i> <span>My Playlist</span> </a> </li> <li> <a href="#"> <i class="fa fa-bar-chart"></i> <span>Trending</span> </a> </li> <li> <a href="#"> <i class="fa fa-list"></i> <span>Subscriptions</span> </a> </li> <li> <a href="#"> <i class="fa fa-history"></i> <span>History</span> </a> </li> <li> <a href="#"> <i class="fa fa-clock-o"></i> <span>Watch Later</span> </a> </li> <li> <a href="#"> <i class="fa fa-shopping-cart"></i> <span>Purchases</span> </a> </li> <li> <a href="#"> <i class="fa fa-line-chart"></i> <span>Earnings</span> </a> </li> <li> <a href="#"> <i class="fa fa-comments"></i> <span>Feedback</span> </a> </li> <!--<li class=""> <a href="#"> <i class="fa fa-file-text"></i> <span>Statement</span> </a> </li>--> <!--<li class=""> <a href="#"> <i class="fa fa-user"></i> <span>Buyer Activity</span> </a> </li>--> <li> <a href="#"> <i class="fa fa-user"></i> <span>Buyer Insights</span> </a> </li> <!--<li class=""> <a href="#"> <i class="fa fa-comment"></i> <span>Message</span> </a> </li>--> <!-- <li class=""> <a href="#"> <i class="fa fa-bell"></i> <span>Notification</span> </a> </li> --> <li> <a href="#"> <i class="fa fa-cogs"></i> <span>Settings</span> </a> </li> <li> <a href="#"> <i class="fa fa-list"></i> <span>Users</span> </a> </li> <li> <a href="#"> <i class="fa fa-list"></i> <span>Psyout List</span> </a> </li> <li> <a href="#"> <i class="fa fa-info-circle"></i> <span>Help</span> </a> </li> <li> <a href="#"> <i class="fa fa-sign-out"></i> <span>Logout</span> </a> </li> </ul> </div> <main class="col-md-10 col-xs-9 "> <div class="wrapper"> <div class=" content-wrapper" > <div class="content"> <section class="bg-info" > <!--watch now section start --> <div class="row" style="margin-bottom:5px;margin-left:1.7rem"> <h2 class="col-md-12" style="color:#ce964c;">Watch Now</h2><br> <div class="col-md-2 col-xs-6 vvv" > <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive "/> </div> <div class="col-md-2 col-xs-6 vvv"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive vvv"/> </div> <div class="col-md-2 col-xs-6 vvv"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6 vvv"> <img src="https://upload.wikimedia.org/wikipedia/en/3/37/Captain_America_The_First_Avenger_poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6 vvv"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6 video_left_hover"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> </div> <!--watch now section end --> <!--Recommended section start --> <div class="row " style="margin-bottom:5px;margin-left:1.7rem"> <h2 class="col-md-12" style="color:#ce964c;margin-left:1.7rem">Recommended</h2> <div class="col-md-2 col-xs-6" > <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> </div> <!--Recommended section end --> <!--Watch it Again section start --> <div class="row" style="margin-bottom:0.5rem;margin-left:1.7rem"> <h2 class="col-md-12" style="color:#ce964c;margin-left:1.7rem">Watch it Again</h2> <div class="col-md-2 col-xs-6" > <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="video_link img-responsive"/> </div> <div class="col-md-2 col-xs-6 video_link" style="cursor:pointer"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <!--watch it Again section end --> </div> </div> </section> <!--hover finish--> </div> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#sidebar').niceScroll({ cursorcolor: '#53619d', // Changing the scrollbar color cursorwidth: 4, // Changing the scrollbar width cursorborder: 'none', // Rempving the scrollbar border }); // when opening the sidebar $('#sidebarCollapse').on('click', function () { // open sidebar $('#sidebar').addClass('active'); // fade in the overlay $('.overlay').fadeIn(); $('.collapse.in').toggleClass('in'); $('a[aria-expanded=true]').attr('aria-expanded', 'false'); }); // if dismiss or overlay was clicked $('#dismiss, .overlay').on('click', function () { // hide the sidebar $('#sidebar').removeClass('active'); // fade out the overlay $('.overlay').fadeOut(); }); }); </script> </main> </div> </div>
#sidebar { border-radius: 0; background-color: #FAFAFA; color: #ccc; border-left: 0; border-right: 0; border-color: #2c2c2c; white-space: nowrap; padding:5px 20px; } #sidebar li{ margin-bottom:15px; font-size:initial; }
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script type="text/javascript">
Related:
See More
Template
Paper Dashboard Pro
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76