Bulma Responsive Alignment
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
Please Login to comment...