<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
'stylesheet'
href
=
<
link
rel
=
"stylesheet"
href
=
<
style
>
.container>p {
margin-top: 30px;
}
.container>.tabs {
margin-top: 30px;
}
</
style
>
</
head
>
<
body
class
=
"has-text-centered"
>
<
h1
class
=
"is-size-2 has-text-success"
>
GeeksforGeeks
</
h1
>
<
b
class
=
"is-size-4"
>Bulma Tab Styles</
b
>
<
div
class
=
"container"
>
<
p
><
b
>Normal Tabs:</
b
></
p
>
<
div
class
=
"tabs is-centered"
>
<
ul
>
<
li
class
=
"is-active"
>
<
a
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-home"
></
i
>
</
span
>
<
span
>Home</
span
>
</
a
>
</
li
>
<
li
>
<
a
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-film"
></
i
>
</
span
>
<
span
>Videos</
span
>
</
a
>
</
li
>
<
li
>
<
a
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-camera"
></
i
>
</
span
>
<
span
>Pictures</
span
>
</
a
>
</
li
>
</
ul
>
</
div
>
<
p
><
b
>Boxed Tabs:</
b
></
p
>
<
div
class
=
"tabs is-centered is-boxed"
>
<
ul
>
<
li
class
=
"is-active"
>
<
a
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-home"
></
i
>
</
span
>
<
span
>Home</
span
>
</
a
>
</
li
>
<
li
>
<
a
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-film"
></
i
>
</
span
>
<
span
>Videos</
span
>
</
a
>
</
li
>
<
li
>
<
a
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-camera"
></
i
>
</
span
>
<
span
>Pictures</
span
>
</
a
>
</
li
>
</
ul
>
</
div
>
<
p
><
b
>Toggle Tabs:</
b
></
p
>
<
div
class
=
"tabs is-centered is-toggle"
>
<
ul
>
<
li
class
=
"is-active"
>
<
a
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-home"
></
i
>
</
span
>
<
span
>Home</
span
>
</
a
>
</
li
>
<
li
>
<
a
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-film"
></
i
>
</
span
>
<
span
>Videos</
span
>
</
a
>
</
li
>
<
li
>
<
a
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-camera"
></
i
>
</
span
>
<
span
>Pictures</
span
>
</
a
>
</
li
>
</
ul
>
</
div
>
<
p
><
b
>Rounded Toggle Tabs:</
b
></
p
>
<
div
class
=
"tabs is-centered is-toggle is-toggle-rounded"
>
<
ul
>
<
li
class
=
"is-active"
>
<
a
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-home"
></
i
>
</
span
>
<
span
>Home</
span
>
</
a
>
</
li
>
<
li
>
<
a
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-film"
></
i
>
</
span
>
<
span
>Videos</
span
>
</
a
>
</
li
>
<
li
>
<
a
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-camera"
></
i
>
</
span
>
<
span
>Pictures</
span
>
</
a
>
</
li
>
</
ul
>
</
div
>
<
p
><
b
>Fullwidth Tabs:</
b
></
p
>
<
div
class
=
"tabs is-centered is-fullwidth"
>
<
ul
>
<
li
class
=
"is-active"
>
<
a
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-home"
></
i
>
</
span
>
<
span
>Home</
span
>
</
a
>
</
li
>
<
li
>
<
a
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-film"
></
i
>
</
span
>
<
span
>Videos</
span
>
</
a
>
</
li
>
<
li
>
<
a
>
<
span
class
=
"icon is-small"
>
<
i
class
=
"fas fa-camera"
></
i
>
</
span
>
<
span
>Pictures</
span
>
</
a
>
</
li
>
</
ul
>
</
div
>
</
div
>
</
body
>
</
html
>