HomeОбразованиеRelated VideosMore From: BestDotNetTraining

Bootstrap Tutorial - Create a Responsive Navigation Menu - Navbar Components

103 ratings | 22916 views
Visit for C#, ASP.NET, MVC, SharePoint 2010 & 2013, HTML 5 & CSS 3, Bootstrap Tutorial for beginners https://www.youtube.com/user/Deccansoft123 In this video we discuss about Navbar Components : Navbars are responsive meta components that serve as navigation headers for application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available view port width increases.
Html code for embedding videos on your blog
Text Comments (15)
Raydan it (4 months ago)
Best css bootstrap video
Madhav Varshney (9 months ago)
Hello sir, I tried this, but the collapse button on the navigation bar is not working . Nothing is happening when I'm pressing it
Umarani Kola (1 year ago)
Tnq it's really helpful ....
ashu yadav (1 year ago)
sir plz give the code bcz its not working
Ali Shah Raizo (1 year ago)
and how to make side navbar
Manoj Reddy (1 year ago)
sir i did't where is the mistake <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="author" content="" /> <title>my page</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <span class="navbar-brand">Menu</span> <button class="navbar-toggle" data-toggle="collapse" data-target="#menu" > Menu </button> </div> <ul class="nav navbar-nav navbar-collapse" id="menu" > <li><a href="#">Home</a></li> <li><a href="#">nterior Wall Cladding Designs </a></li> <li><a href="#">Exterior Cladding Designs</a></li> <li><a href="#">Flooring </a></li> <li><a href="#">Contacts us </a></li> <li><a href="#">Contacts us </a></li> </ul> </div> </div> </div> </body> </html>
Imran Shaikh (1 year ago)
Make video series for Bootstrap 4
Surya Prasad Tripathy (1 year ago)
hello sir, can it possible to send that bootstrap file?
BestDotNetTraining (1 year ago)
20th Anniversary Innovation - Amazing Offers on Microsoft trending course tutorials Please visit for Offers details: https://www.bestdotnettraining.com/20th-Anniversary-offers
Afi Scruggs (1 year ago)
Thanks so much for this!
Ajay Kumar Yadav (2 years ago)
where is error this code is not collapse why ? <div class="container"> <div class="row"> <div class="col-sm-12"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <span class="navbar-brand">Main Menu</span> <button class="nav navbar-toggle" data-toggel="collapse" data-target="#menu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <ul class="nav navbar-nav navbar-collapse collapse" id="menu"> <li><a href="#">News</a></li> <li><a href="#">Hospital</a></li> <li><a href="#">Hotel</a></li> <li><a href="#">Travel & Tour</a></li> <li><a href="#">University </a></li> <li><a href="#">Others</a></li> </ul> </nav> </div> </div> </div>
Afi Scruggs (1 year ago)
you misspelled data-toggle in the button class. That's why it won't collapse. Here is your error: data-toggel="collapse" Also, make sure you've linked Bootstraps minified js plugin or it won't work.
Carlette Nortje (2 years ago)
What styles, jquery, etc did you add?
Afi Scruggs (1 year ago)
Use the minified Bootstrap js plugin or else the button won't toggle.
Carlette Nortje (2 years ago)
What dis you add into the project

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.