Bulma Alignment is used to align your website content, there are 4 different alignment classes in Bulma. You can use any of them to align your context.
Alignment Classes:
- has-text-centered: This class is used to align the context centered.
- has-text-justified: This class is used to align the context justified.
- has-text-left: This class is used to align the context left.
- has-text-right: This class is used to align the context right.
Example: Below example illustrate the “Alignment” class in Bulma.
HTML
<!DOCTYPE html> <html>
<head>
<link rel='stylesheet'
href=
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>Bulma Alignment</b>
<br>
<div class="container">
<p class="has-text-centered is-size-4 box">
GeeksforGeeks</p>
<!-- This can be left align, it's centered because
of has-text-centered class in body tag -->
<p class="has-text-justify is-size-4 box">
GeeksforGeeks</p>
<p class="has-text-right is-size-4 box">
GeeksforGeeks</p>
<p class="has-text-left is-size-4 box">
GeeksforGeeks</p>
</div>
</body>
</html>
|
Output:
Bulma Alignment
Reference: https://bulma.io/documentation/helpers/typography-helpers/#alignment