<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma Tabs Combining</
title
>
<
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 Tabs Combining</
b
>
<
div
class
=
"container is-fluid"
>
<
p
><
b
>
Boxed tabs which takes up fullwidth
and align to center:
</
b
></
p
>
<
div
class
=
"tabs is-boxed is-fullwidth 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
>
Rounded Toggle Tabs which are
aligned to the right:
</
b
></
p
>
<
div
class
=
"tabs is-toggle is-toggle-rounded is-right"
>
<
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 which takes up
fullwidth and are large in size:</
b
>
</
p
>
<
div
class
=
"tabs is-toggle is-fullwidth is-large"
>
<
ul
>
<
li
class
=
"is-active"
>a
<
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
>