Bulma Responsive Alignment

Last Updated : 08 Dec, 2021

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= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css'> 
</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>