10 TIPs - To Become a Good Developer/Programmer
Why Join
Become a member
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
C# Corner
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
TECHNOLOGIES
ANSWERS
LEARN
NEWS
BLOGS
VIDEOS
INTERVIEW PREP
BOOKS
EVENTS
Training
Live
JOBS
MORE
CAREER
MEMBERS
Bootstrap Navigation Bar With Toggle Button
Kiranteja Jallepalli
Updated date
May 06, 2020
75.2k
0
2
This article shows how to use Bootstrap Navigation Bars with a Toggle Button.
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Bookmark
Print
Other Artcile
Expand
Introduction
Navigation Bar is mainly used to provide direction to the users/visitors. To create a Bootstrap Navigation Bar with a Toggle button is very simple and easy.
Step 1
<ul>
<li>
<a href=
"http://www.yoursitename.com/Home"
>Home</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/EleK"
>Electronics</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/Books"
>Books</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/BustiK"
>Bustickets</a>
</li>
</ul>
Output
Step 2
<ul
class
=
"nav navbar-nav"
>
<li>
<a href=
"http://www.yoursitename.com/Home"
>Home</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/EleK"
>Electronics</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/Books"
>Books</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/BustiK"
>Bustickets</a>
</li>
</ul>
Output
Step 3
<div
class
=
"navbar-header"
>
<span
class
=
"navbar-brand"
>King's Kart</span>
</div>
<div >
<ul
class
=
"nav navbar-nav"
>
<li>
<a href=
"http://www.yoursitename.com/Home"
>Home</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/EleK"
>Electronics</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/Books"
>Books</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/BustiK"
>Bustickets</a>
</li>
</ul>
Output
Step 4
<div
class
=
"navbar-header"
>
<span
class
=
"navbar-brand"
>King's Kart</span>
</div>
<div
class
=
"navbar-collapse collapse"
>
<ul
class
=
"nav navbar-nav"
>
<li>
<a href=
"http://www.yoursitename.com/Home"
>Home</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/EleK"
>Electronics</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/Books"
>Books</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/BustiK"
>Bustickets</a>
</li>
</ul>
</div>
Output
Step 5
<div
class
=
"navbar navbar-inverse"
role=
"navigation"
>
<div
class
=
"navbar-header"
>
<span
class
=
"navbar-brand"
>King's Kart</span>
</div>
<div
class
=
"navbar-collapse collapse"
>
<ul
class
=
"nav navbar-nav"
>
<li>
<a href=
"http://www.yoursitename.com/Home"
>Home</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/EleK"
>Electronics</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/Books"
>Books</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/BustiK"
>Bustickets</a>
</li>
</ul>
</div>
Output
Step 6
<div
class
=
"navbar navbar-inverse"
role=
"navigation"
>
<div
class
=
"navbar-header"
>
<button type=
"button"
class
=
"navbar-toggle"
data-toggle=
"collapse"
>
<span
class
=
"icon-bar"
></span>
<span
class
=
"icon-bar"
></span>
<span
class
=
"icon-bar"
></span>
</button>
<span
class
=
"navbar-brand"
>King's Kart</span>
</div>
<div
class
=
"navbar-collapse collapse"
>
<ul
class
=
"nav navbar-nav"
>
<li>
<a href=
"http://www.yoursitename.com/Home"
>Home</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/EleK"
>Electronics</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/Books"
>Books</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/BustiK"
>Bustickets</a>
</li>
</ul>
</div>
</div>
Output
Step 7
<div
class
=
"navbar navbar-inverse"
role=
"navigation"
>
<div
class
=
"navbar-header"
>
<button type=
"button"
class
=
"navbar-toggle"
data-toggle=
"collapse"
data-target=
"#myidname"
>
<span
class
=
"icon-bar"
></span>
<span
class
=
"icon-bar"
></span>
<span
class
=
"icon-bar"
></span>
</button>
<span
class
=
"navbar-brand"
>King's Kart</span>
</div>
<div
class
=
"navbar-collapse collapse"
id=
"myidname"
>
<ul
class
=
"nav navbar-nav"
>
<li>
<a href=
"http://www.yoursitename.com/Home"
>Home</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/EleK"
>Electronics</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/Books"
>Books</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/BustiK"
>Bustickets</a>
</li>
</ul>
</div>
Output
I will combined all the preceding 7 steps into a single HTML file.
BootstrapNav.hmtl
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"utf-8"
>
<meta http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<!-- The above 3 meta tags *must* come first
in
the head; any other head content must come *after* these tags -->
<title>Bootstrap Navigation
with
Toggle Button</title>
<!-- Bootstrap -->
<link rel=
"stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
>
<!-- HTML5 shim and Respond.js
for
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/html5shiv/3.7.2/html5shiv.min.js"
></script>
<script src=
"https://oss.maxcdn.com/respond/1.4.2/respond.min.js"
></script>
<![endif]-->
</head>
<body>
<div
class
=
"navbar navbar-inverse"
role=
"navigation"
>
<div
class
=
"navbar-header"
>
<button type=
"button"
class
=
"navbar-toggle"
data-toggle=
"collapse"
data-target=
"#myidname"
>
<span
class
=
"icon-bar"
></span>
<span
class
=
"icon-bar"
></span>
<span
class
=
"icon-bar"
></span>
</button>
<span
class
=
"navbar-brand"
>King's Kart</span>
</div>
<div
class
=
"navbar-collapse collapse"
id=
"myidname"
>
<ul
class
=
"nav navbar-nav"
>
<li>
<a href=
"http://www.yoursitename.com/Home"
>Home</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/EleK"
>Electronics</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/Books"
>Books</a>
</li>
<li>
<a href=
"http://www.yoursitename.com/BustiK"
>Bustickets</a>
</li>
</ul>
</div>
<!-- jQuery (necessary
for
Bootstrap's JavaScript plugins) Order is important -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"
></script>
</body>
</html>
Output
Reference:
http://getbootstrap.com/
nav bar
Navigation
toggle
toggle button
Next Recommended Reading
FEATURED ARTICLES
View All
TRENDING UP
01
Azure Duration Functions - How To Use And Implement It
02
Create A PowerApps Component Framework (PCFx ) Using Custom Code In PowerAPPs
03
Log Correlation In Microservices
04
Import PowerApps Component Framework (PCFx ) Into Model Driven PowerApps
05
Fundamentals Of Software Architecture
06
Safest Way To Convert String To Int In C#
07
How To Migrate From .NET Core 3.1 To .NET 6.0
08
Top Three VS Code Extensions Worth The Money
09
Web3 Developer Salary Soars In 2022
10
PowerApps - Create Label And Textbox
View All
Learn JavaScript
Challenge yourself
C# 10
Get Certified
Microsoft Azure