Bulma Responsive Alignment is used to make your website responsive. You can choose a specific alignment for each viewport width. Simply append the viewport width to the alignment modifier.
Responsive Alignment Classes:
- has-text-left-mobile: This class is used to make the alignment if the screen width is up to 768px.
- has-text-left-touch: This class is used to make the alignment if the screen width is between 768px to 1023px.
- has-text-left-tablet-only: This class is used to make the alignment if the screen width is between 769px to 1023px.
- has-text-left-tablet: This class is used to make the alignment if the screen width is between 769px to 1408px and above.
- has-text-left-desktop-only: This class is used to make the alignment if the screen width is between 1024px to 1215px and above.
- has-text-left-desktop: This class is used to make the alignment if the screen width is between 1024px to 1408px and above.
- has-text-left-widescreen-only: This class is used to make the alignment if the screen width is between 1216px to 1407px and above.
- has-text-left-widescreen: This class is used to make the alignment if the screen width is between 1216px to 1408px and above.
- has-text-left-fullhd: This class is used to make the alignment if the screen width is 1408px and above.
Note: You can use the same logic for each of the 4 alignments, you have to change the side value of the left and that can be anything left, right, justify and centered.
Example: The below example illustrate the Responsive 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 Responsive Alignment</b>
<br>
<div class="container">
<p class="has-text-left-mobile is-size-4">
GeeksforGeeks</p>
<p class="has-text-left-touch is-size-4">
GeeksforGeeks</p>
<p class="has-text-left-tablet-only is-size-4">
GeeksforGeeks</p>
<p class="has-text-left-tablet is-size-4">
GeeksforGeeks</p>
<p class="has-text-left-desktop-only is-size-4">
GeeksforGeeks</p>
<p class="has-text-left-desktop is-size-4">
GeeksforGeeks</p>
<p class="has-text-left-widescreen-only is-size-4">
GeeksforGeeks</p>
<p class="has-text-left-widescreen is-size-4">
GeeksforGeeks</p>
<p class="has-text-left-fullhd is-size-4">
GeeksforGeeks</p>
</div>
</body>
</html>
|
Output:
Reference: https://bulma.io/documentation/helpers/typography-helpers/#responsive-alignment