<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma Navbar Colors</
title
>
<
link
rel
=
'stylesheet'
href
=
<
style
>
.navbar {
margin-top: 20px;
padding: 10px;
border-radius: 10px;
}
</
style
>
</
head
>
<
body
class
=
"has-text-centered"
>
<
h1
class
=
"is-size-2 has-text-success"
>
GeeksforGeeks
</
h1
>
<
b
>Bulma Navbar Colors</
b
>
<
div
class
=
"container"
>
<
nav
class
=
"navbar is-danger"
>
<
div
class
=
"navbar-brand"
>
<
a
class
=
"navbar-item"
<
img
src
=
</
a
>
<
div
class
=
"navbar-burger"
data-target
=
"navBackgroundDemo1"
>
<
span
></
span
>
<
span
></
span
>
<
span
></
span
>
</
div
>
</
div
>
<
div
id
=
"navBackgroundDemo1"
class
=
"navbar-menu"
>
<
div
class
=
"navbar-start"
>
<
a
class
=
"navbar-item"
href
=
"#"
>
Home
</
a
>
<
a
class
=
"navbar-item"
href
=
"#"
>
Courses
</
a
>
</
div
>
<
div
class
=
"navbar-end"
>
<
div
class
=
"navbar-item"
>
<
div
class
=
"field is-grouped"
>
<
p
class
=
"control"
>
<
button
class
=
"button is-primary"
>
Algorithms
</
button
>
</
p
>
<
p
class
=
"control"
>
<
button
class
=
"button is-primary is-outlined"
>
Data Structures
</
button
>
</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
</
nav
>
<
nav
class
=
"navbar is-link"
>
<
div
class
=
"navbar-brand"
>
<
a
class
=
"navbar-item"
<
img
src
=
</
a
>
<
div
class
=
"navbar-burger"
data-target
=
"navBackgroundDemo1"
>
<
span
></
span
>
<
span
></
span
>
<
span
></
span
>
</
div
>
</
div
>
<
div
id
=
"navBackgroundDemo1"
class
=
"navbar-menu"
>
<
div
class
=
"navbar-start"
>
<
a
class
=
"navbar-item"
href
=
"#"
>
Home
</
a
>
<
a
class
=
"navbar-item"
href
=
"#"
>
Courses
</
a
>
</
div
>
<
div
class
=
"navbar-end"
>
<
div
class
=
"navbar-item"
>
<
div
class
=
"field is-grouped"
>
<
p
class
=
"control"
>
<
button
class
=
"button is-primary"
>
Algorithms
</
button
>
</
p
>
<
p
class
=
"control"
>
<
button
class
=
"button is-white"
>
Data Structures
</
button
>
</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
</
nav
>
<
nav
class
=
"navbar is-info"
>
<
div
class
=
"navbar-brand"
>
<
a
class
=
"navbar-item"
<
img
src
=
</
a
>
<
div
class
=
"navbar-burger"
data-target
=
"navBackgroundDemo1"
>
<
span
></
span
>
<
span
></
span
>
<
span
></
span
>
</
div
>
</
div
>
<
div
id
=
"navBackgroundDemo1"
class
=
"navbar-menu"
>
<
div
class
=
"navbar-start"
>
<
a
class
=
"navbar-item"
href
=
"#"
>
Home
</
a
>
<
a
class
=
"navbar-item"
href
=
"#"
>
Courses
</
a
>
</
div
>
<
div
class
=
"navbar-end"
>
<
div
class
=
"navbar-item"
>
<
div
class
=
"field is-grouped"
>
<
p
class
=
"control"
>
<
button
class
=
"button is-primary"
>
Algorithms
</
button
>
</
p
>
<
p
class
=
"control"
>
<
button
class
=
"button is-white"
>
Data Structures
</
button
>
</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
</
nav
>
</
div
>
</
body
>
</
html
>