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

Bootstrap Tutorial - Create a Responsive Navigation Menu - Navbar Components

98 ratings | 21787 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 (1 month ago)
Best css bootstrap video
Madhav Varshney (6 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 (9 months ago)
Tnq it's really helpful ....
ashu yadav (11 months 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>
Razavi Imran (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 (1 year 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 (1 year 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 (1 year 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.