PageSourceSearch

https://bulma.io/documentation/

html bulma.io collected 2026-09-24 08:37:26 UTC 70,923 bytes, 4,189 lines download raw bytes

1<!doctype html>
2<html lang="en" class="bd-theme-docs">
3  <head>
4    <meta charset="utf-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<meta name="viewport" content="width=device-width, initial-scale=1">
7<meta
8  name="description"
9  content="Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free."
10>
11
12<title>
13  Official Bulma Documentation
14 | Bulma: Free, open source, and modern CSS framework based on Flexbox
15
16</title>
17
18  <link rel="stylesheet" href="https://bulma.io/vendor/fontawesome-free-6.5.2-web/css/all.min.css">
19
20
21
22
23
24<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
25<link
26  rel="stylesheet"
27  href="https://bulma.io/assets/css/website.min.css?v="
28>
29
30<link rel="canonical" href="https://bulma.io/documentation/">
31<link
32  rel="alternate"
33  type="application/rss+xml"
34  title="Bulma: Free, open source, and modern CSS framework based on Flexbox"
35  href="https://bulma.io/atom.xml"
36>
37
38<meta property="og:url" content="https://bulma.io">
39<meta property="og:type" content="website">
40<meta property="og:image:type" content="image/png">
41<meta property="og:image:width" content="1200">
42<meta property="og:image:height" content="630">
43
44<meta name="twitter:card" content="summary_large_image">
45<meta name="twitter:site" content="@jgthms">
46<meta name="twitter:creator" content="@jgthms">
47
48<!-- Shared social media -->
49
50  <meta property="og:title" content="Official Bulma Documentation">
51  <meta name="twitter:title" content="Official Bulma Documentation">
52
53
54
55  <meta property="og:description" content="Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
56  <meta name="twitter:description" content="Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
57
58
59
60  <meta property="og:image" content="https://bulma.io/assets/images/bulma-banner.png">
61  <meta name="twitter:image" content="https://bulma.io/assets/images/bulma-banner.png">
62
63
64<!-- Favicons -->
65<link rel="apple-touch-icon" sizes="180x180" href="https://bulma.io/favicons/apple-touch-icon.png?v=201701041855">
66<link rel="icon" type="image/png" href="https://bulma.io/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
67<link rel="icon" type="image/png" href="https://bulma.io/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
68<!-- link rel="manifest" href="https://bulma.io/favicons/manifest.json?v=201701041855" -->
69<link rel="mask-icon" href="https://bulma.io/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
70<link rel="shortcut icon" href="https://bulma.io/favicons/favicon.ico?v=201701041855">
71<meta name="msapplication-config" content="https://bulma.io/favicons/browserconfig.xml?v=201701041855">
72<meta name="theme-color" content="#00d1b2">
73
74  </head>
75  <body>
76    <a href="https://cssmasterclass.io/" target="_blank" class="launch-code is-animated">
77  <h3><img
78        src="https://bulma.io/assets/images/masterclass/logo-desktop.png"
79        height="40"
80        width="300"
81    />
82  </h3>
83
84  <small>
85    Learn CSS with 🎓 online interactive courses,📺 educational videos, and
86    🧑🏻‍💻project-building tutorials.
87  </small>
88</a>
89
90
91    
92
93
94
95
96<header class="bd-header">
97  <a class="bulma-logo" href="https://bulma.io/">
98    <svg width="640" height="160" viewBox="0 0 640 160" fill="none" xmlns="http://www.w3.org/2000/svg">
99  <path fill-rule="evenodd" clip-rule="evenodd" d="M170 132.571V27.5908C170 25.5451 170.915 23.93 172.746 22.7456C174.576 21.5612 176.729 20.969 179.206 20.969H210.377C232.019 20.969 242.84 30.4441 242.84 49.3943C242.84 62.5303 238.264 71.0902 229.112 75.074C234.603 77.2275 238.748 80.2692 241.548 84.1992C244.347 88.1292 245.747 93.8627 245.747 101.4V104.791C245.747 116.743 242.84 125.437 237.026 130.875C231.211 136.312 223.351 139.031 213.445 139.031H179.206C176.514 139.031 174.307 138.385 172.584 137.093C170.861 135.801 170 134.293 170 132.571ZM190.834 120.619H209.085C219.529 120.619 224.751 114.751 224.751 103.015V100.431C224.751 94.401 223.432 90.0404 220.794 87.3486C218.156 84.6568 214.253 83.3109 209.085 83.3109H190.834V120.619ZM190.834 66.8371H208.923C213.122 66.8371 216.326 65.5989 218.533 63.1225C220.74 60.646 221.844 5
997.2544 221.844 52.9475C221.844 48.7483 220.686 45.4374 218.371 43.0148C216.057 40.5922 212.853 39.3809 208.762 39.3809H190.834V66.8371ZM260.283 103.015V27.4293C260.283 25.2759 261.306 23.6608 263.351 22.5841C265.397 21.5074 267.873 20.969 270.781 20.969C273.688 20.969 276.164 21.5074 278.21 22.5841C280.256 23.6608 281.279 25.2759 281.279 27.4293V103.015C281.279 115.397 287.2 121.588 299.044 121.588C310.888 121.588 316.81 115.397 316.81 103.015V27.4293C316.81 25.2759 317.833 23.6608 319.879 22.5841C321.925 21.5074 324.401 20.969 327.308 20.969C330.215 20.969 332.692 21.5074 334.738 22.5841C336.783 23.6608 337.806 25.2759 337.806 27.4293V103.015C337.806 115.72 334.28 125.061 327.227 131.036C320.175 137.012 310.781 140 299.044 140C287.308 140 277.914 137.039 270.861 131.117C263.809 125.195 260.283 115.828 260.283 103.015ZM356.703 132.409V27.4293C356.703 25.2759 357.725 23.6608 359.771 22.5841C361.817 21.5074 364.293 20.969 367.201 20.969C370.108 20.969 372.584 21.5074 374.63 22.5841C376.676 23.6608 377.699 25.2759 377.699 27.4293V120.619H417.106C419.044 120.619 420.579 121.534 421.709 123.365C422.84 125.195 423.405 127.349 423.405 129.825C423.405 132.301 422.84 134.455 421.709 136.285C420.579 138.116 419.044 139.031 417.106 139.031H365.908C363.432 139.031 361.279 138.439 359.448 137.254C357.618 136.07 356.703 134.455 356.703 132.409ZM434.872 132.409V31.467C434.872 27.9138 435.868 25.2759 437.86 23.5532C439.852 21.8304 442.355 20.969 445.37 20.969C449.354 20.969 452.423 21.6689 454.576 23.0686C456.729 24.4684 459.098 27.4832 461.682 32.1131L481.548 68.2907L501.413 32.1131C503.997 27.4832 506.393 24.4684 508.6 23.0686C510.808 21.6689 513.903 20.969 517.887 20.969C520.902 20.969 523.405 21.8304 525.397 23.5532C527.389 25.2759 528.385 27.9138 528.385 31.467V132.409C528.385 134.455 527.335 136.07 525.236 137.254C523.136 138.439 520.686 139.031 517.887 139.031C514.98 139.031 512.503 138.439 510.458 137.254C508.412 136.07 507.389 134.455 507.389 132.409V62.961L488.493 96.5545C486.985 99.354 484.616 100.754 481.386 100.754C478.264 100.754 475.949 99.354 474.441 96.5545L455.868 61.6689V132.409C455.868 134.455 454.818 136.07 452.719 137.254C450.619 138.439 448.17 139.031 445.37 139.031C442.463 139.031 439.987 138.439 437.941 137.254C435.895 136.07 434.872 134.455 434.872 132.409ZM539.529 130.31C539.529 130.094 539.637 129.556 539.852 128.694L571.023 27.1063C571.669 24.8452 573.257 23.0956 575.787 21.8573C578.318 20.6191 581.198 20 584.428 20C587.658 20 590.565 20.6191 593.149 21.8573C595.734 23.0956 597.349 24.8452 597.995 27.1063L629.166 128.694C629.381 129.556 629.489 130.094 629.489 130.31C629.489 132.678 628.035 134.724 625.128 136.447C622.221 138.17 619.26 139.031 616.245 139.031C612.261 139.031 609.892 137.631 609.139 134.832L603.001 113.351H566.016L559.879 134.832C559.125 137.631 556.756 139.031 552.773 139.031C549.65 139.031 546.662 138.197 543.809 136.528C540.956 134.859 539.529 132.786 539.529 130.31ZM570.377 96.8775H598.479L584.428 47.2948L570.377 96.8775Z" fill="black" class="bd-svg-black" />
100  <path fill-rule="evenodd" clip-rule="evenodd" d="M0 110L10 40L50 0L100 50L70 80L110 120L50 160L0 110Z" fill="#00D1B2"/>
101</svg>
102
103  </a>
104
105  <nav id="js-nav" class="bd-nav">
106      
107
108<a
109  class="
110    bd-nav-item
111    bd-theme-docs
112    is-docs
113    
114    
115      is-active
116    
117    
118  "
119  title="Everything you need to create a website with Bulma"
120  
121  href="https://bulma.io/documentation/"
122  
123>
124  <span class="icon">
125    <i class="fa-solid fa-book"></i>
126  </span>
127
128  
129  <span class="bd-nav-item-name">
130    
131    <span class="is-hidden-fullhd">Docs</span>
132    <span class="is-hidden is-block-fullhd">Documentation</span>
133    
134  </span>
135  
136</a>
137   
138
139<a
140  class="
141    bd-nav-item
142    bd-theme-expo
143    is-expo
144    
145    
146    
147  "
148  title="Official Bulma showcase"
149  
150  href="https://bulma.io/expo/"
151  
152>
153  <span class="icon">
154    <i class="fa-solid fa-star"></i>
155  </span>
156
157  
158  <span class="bd-nav-item-name">
159     Expo 
160  </span>
161  
162</a>
163   
164
165<a
166  class="
167    bd-nav-item
168    bd-theme-love
169    is-love
170    
171    
172    
173  "
174  title="Fans of Bulma around the world"
175  
176  href="https://bulma.io/love/"
177  
178>
179  <span class="icon">
180    <i class="fa-solid fa-heart"></i>
181  </span>
182
183  
184  <span class="bd-nav-item-name">
185     Love 
186  </span>
187  
188</a>
189   
190
191<a
192  class="
193    bd-nav-item
194    bd-theme-sponsor
195    is-sponsor
196    
197    
198    
199  "
200  title="Sponsor Bulma and Open Source via Patreon and GitHub"
201  
202  href="https://bulma.io/become-a-bulma-sponsor/"
203  
204>
205  <span class="icon">
206    <i class="fa-brands fa-patreon"></i>
207  </span>
208
209  
210  <span class="bd-nav-item-name">
211     Sponsor 
212  </span>
213  
214</a>
215 
216
217    <div class="bd-nav-icons">
218        
219
220<a
221  class="
222    bd-nav-item
223    bd-theme-github
224    is-github
225    
226      is-icon
227    
228    
229    
230  "
231  title="Open Source on GitHub"
232  
233  href="https://github.com/jgthms/bulma"
234  target="_blank"
235  
236>
237  <span class="icon">
238    <i class="fa-brands fa-github-alt fa-lg"></i>
239  </span>
240
241  
242</a>
243   
244
245<a
246  class="
247    bd-nav-item
248    bd-theme-twitter
249    is-twitter
250    
251      is-icon
252    
253    
254    
255  "
256  title="Follow me on Twitter"
257  
258  href="https://twitter.com/jgthms"
259  target="_blank"
260  
261>
262  <span class="icon">
263    <i class="fa-brands fa-twitter fa-lg"></i>
264  </span>
265
266  
267</a>
268 
269
270      <button class="bd-nav-item is-search is-icon">
271        <span class="icon">
272          <i class="fas fa-search fa-lg"></i>
273        </span>
274      </button>
275
276      <button
277        class="bd-nav-item is-icon is-ellipsis js-burger"
278        data-target="js-more"
279      >
280        <span class="icon">
281          <i class="fas fa-ellipsis-h fa-lg"></i>
282        </span>
283      </button>
284
285      <div id="js-more" class="bd-nav-menu is-more js-menu">
286          
287
288<a
289  class="
290    bd-nav-item
291    bd-theme-made-with-bulma
292    is-made-with-bulma
293    
294    
295    
296  "
297  title="The official community badge"
298  
299  href="https://bulma.io/made-with-bulma/"
300  
301>
302  <span class="icon">
303    <i class="fa-solid fa-certificate"></i>
304  </span>
305
306  
307  <span class="bd-nav-item-name">
308     Made with Bulma 
309  </span>
310  
311</a>
312   
313
314<a
315  class="
316    bd-nav-item
317    bd-theme-backers
318    is-backers
319    
320    
321    
322  "
323  title="Everyone who is supporting Bulma via Patreon and GitHub"
324  
325  href="https://bulma.io/backers/"
326  
327>
328  <span class="icon">
329    <i class="fa-solid fa-hand-holding-heart"></i>
330  </span>
331
332  
333  <span class="bd-nav-item-name">
334     Backers 
335  </span>
336  
337</a>
338   
339
340<a
341  class="
342    bd-nav-item
343    bd-theme-brand
344    is-brand
345    
346    
347    
348  "
349  title="The official Bulma logos"
350  
351  href="https://bulma.io/brand/"
352  
353>
354  <span class="icon">
355    <i class="fa-solid fa-medal"></i>
356  </span>
357
358  
359  <span class="bd-nav-item-name">
360     Bulma Brand 
361  </span>
362  
363</a>
364   
365
366<a
367  class="
368    bd-nav-item
369    bd-theme-extensions
370    is-extensions
371    
372    
373    
374  "
375  title="Side projects to enhance Bulma"
376  
377  href="https://bulma.io/extensions/"
378  
379>
380  <span class="icon">
381    <i class="fa-solid fa-plug"></i>
382  </span>
383
384  
385  <span class="bd-nav-item-name">
386     Bulma Extensions 
387  </span>
388  
389</a>
390 
391      </div>
392    </div>
393
394    <a
395      class="button is-primary bd-nav-mobile-download"
396      href="https://github.com/jgthms/bulma/releases/download/1.0.4/bulma-1.0.4.zip"
397    >
398      Download
399    </a>
400  </nav>
401
402  <div class="bd-nav-themes">
403    <button id="js-cycle" class="bd-cycle js-burger" data-target="js-themes">
404      <div class="bd-cycles">
405        <div class="bd-cycle-sun">
406          <span class="icon">
407            <i class="fas fa-lg fa-sun" aria-hidden="true"></i>
408          </span>
409        </div>
410
411        <div class="bd-cycle-moon">
412          <span class="icon">
413            <i class="fas fa-lg fa-moon" aria-hidden="true"></i>
414          </span>
415        </div>
416      </div>
417    </button>
418
419    <div id="js-themes" class="bd-nav-menu is-cycles js-menu js-themes">
420      <button
421        data-scheme="light"
422        class="bd-nav-item is-sun"
423        aria-label="Light mode"
424      >
425        <span class="icon">
426          <i class="fas fa-sun" aria-hidden="true"></i>
427        </span>
428        <span>Light</span>
429      </button>
430
431      <button
432        data-scheme="dark"
433        class="bd-nav-item is-moon"
434        aria-label="Dark mode"
435      >
436        <span class="icon">
437          <i class="fas fa-moon" aria-hidden="true"></i>
438        </span>
439        <span>Dark</span>
440      </button>
441
442      <button
443        data-scheme="system"
444        class="bd-nav-item is-system"
445        aria-label="System mode"
446      >
447        <span class="icon">
448          <i class="fas fa-desktop" aria-hidden="true"></i>
449        </span>
450        <span>System</span>
451      </button>
452    </div>
453  </div>
454
455  <div class="bd-nav-search">
456    <button
457      class="bd-nav-item is-search-desktop is-icon js-burger"
458      data-target="js-search"
459    >
460      <span class="icon">
461        <i class="fas fa-search fa-lg"></i>
462      </span>
463    </button>
464
465    <div id="js-search" class="bd-nav-menu is-search js-menu">
466      <input id="algoliaSearch" class="input" type="text" placeholder="Search" />
467    </div>
468  </div>
469
470  <a
471    class="button is-primary bd-nav-desktop-download"
472    href="https://github.com/jgthms/bulma/releases/download/1.0.4/bulma-1.0.4.zip"
473  >
474    Download
475  </a>
476
477  <button class="navbar-burger bd-nav-burger js-burger" data-target="js-nav">
478    <span></span>
479    <span></span>
480    <span></span>
481    <span></span>
482  </button>
483</header>
484
485
486<main id="js-docs" class="bd-docs ">
487  <div class="bd-docs-overlay js-toggle" data-target="js-docs"></div>
488
489  <button id="js-menu-toggle" class="button bd-docs-button js-toggle" data-target="js-docs">
490    <i class="fas fa-arrow-right-from-bracket"></i>
491  </button>
492
493  <div class="bd-docs-menu">
494    <div class="bd-menu">
495  <div class="bd-menu-section is-start">
496    <h3 class="bd-menu-heading js-menu-heading">
497  
498    <span class="icon">
499      <i class="fas fa-arrow-right"></i>
500    </span>
501  
502  <strong>Start Here</strong>
503</h3>
504
505    
506
507<ul class="bd-menu-list js-menu-list" style="--size: 7">
508  
509    
510
511
512
513
514
515<li>
516  
517
518<a
519  class="
520    bd-menu-link
521    
522    
523  "
524  href="https://bulma.io/documentation/start/overview/"
525  data-current-link-id=""
526  data-name="Overview"
527  data-size="0"
528>
529  <span class="bd-menu-link-name">Overview</span>
530
531  
532</a>
533
534
535  
536</li>
537
538  
539    
540
541
542
543
544
545<li>
546  
547
548<a
549  class="
550    bd-menu-link
551    
552    
553  "
554  href="https://bulma.io/documentation/start/installation/"
555  data-current-link-id=""
556  data-name="Installation"
557  data-size="0"
558>
559  <span class="bd-menu-link-name">Installation</span>
560
561  
562</a>
563
564
565  
566</li>
567
568  
569    
570
571
572
573
574
575<li>
576  
577
578<a
579  class="
580    bd-menu-link
581    
582    
583  "
584  href="https://bulma.io/documentation/start/alternative-versions/"
585  data-current-link-id=""
586  data-name="Alternative Versions"
587  data-size="0"
588>
589  <span class="bd-menu-link-name">Alternative Versions</span>
590
591  
592</a>
593
594
595  
596</li>
597
598  
599    
600
601
602
603
604
605<li>
606  
607
608<a
609  class="
610    bd-menu-link
611    
612    
613  "
614  href="https://bulma.io/documentation/start/syntax/"
615  data-current-link-id=""
616  data-name="Syntax"
617  data-size="0"
618>
619  <span class="bd-menu-link-name">Syntax</span>
620
621  
622</a>
623
624
625  
626</li>
627
628  
629    
630
631
632
633
634
635<li>
636  
637
638<a
639  class="
640    bd-menu-link
641    
642    
643  "
644  href="https://bulma.io/documentation/start/modular/"
645  data-current-link-id=""
646  data-name="Modularity"
647  data-size="0"
648>
649  <span class="bd-menu-link-name">Modularity</span>
650
651  
652</a>
653
654
655  
656</li>
657
658  
659    
660
661
662
663
664
665<li>
666  
667
668<a
669  class="
670    bd-menu-link
671    
672    
673  "
674  href="https://bulma.io/documentation/start/responsiveness/"
675  data-current-link-id=""
676  data-name="Responsiveness"
677  data-size="0"
678>
679  <span class="bd-menu-link-name">Responsiveness</span>
680
681  
682</a>
683
684
685  
686</li>
687
688  
689    
690
691
692
693
694
695<li>
696  
697
698<a
699  class="
700    bd-menu-link
701    
702    
703  "
704  href="https://bulma.io/documentation/start/migrating-to-v1/"
705  data-current-link-id=""
706  data-name="Migrating to v1"
707  data-size="0"
708>
709  <span class="bd-menu-link-name">Migrating to v1</span>
710
711  
712</a>
713
714
715  
716</li>
717
718  
719</ul>
720
721  </div>
722
723  <div class="bd-menu-section is-features">
724    <h3 class="bd-menu-heading js-menu-heading">
725  
726    <span class="icon">
727      <i class="fas fa-medal"></i>
728    </span>
729  
730  <strong>Features</strong>
731</h3>
732
733    
734
735<ul class="bd-menu-list js-menu-list" style="--size: 5">
736  
737    
738
739
740
741
742
743<li>
744  
745
746<a
747  class="
748    bd-menu-link
749    
750    
751  "
752  href="https://bulma.io/documentation/features/css-variables/"
753  data-current-link-id=""
754  data-name="CSS Variables"
755  data-size="0"
756>
757  <span class="bd-menu-link-name">CSS Variables</span>
758
759  
760</a>
761
762
763  
764</li>
765
766  
767    
768
769
770
771
772
773<li>
774  
775
776<a
777  class="
778    bd-menu-link
779    
780    
781  "
782  href="https://bulma.io/documentation/features/themes/"
783  data-current-link-id=""
784  data-name="Themes"
785  data-size="0"
786>
787  <span class="bd-menu-link-name">Themes</span>
788
789  
790</a>
791
792
793  
794</li>
795
796  
797    
798
799
800
801
802
803<li>
804  
805
806<a
807  class="
808    bd-menu-link
809    
810    
811  "
812  href="https://bulma.io/documentation/features/dark-mode/"
813  data-current-link-id=""
814  data-name="Dark Mode"
815  data-size="0"
816>
817  <span class="bd-menu-link-name">Dark Mode</span>
818
819  
820</a>
821
822
823  
824</li>
825
826  
827    
828
829
830
831
832
833<li>
834  
835
836<a
837  class="
838    bd-menu-link
839    
840    
841  "
842  href="https://bulma.io/documentation/features/color-palettes/"
843  data-current-link-id=""
844  data-name="Color Palettes"
845  data-size="0"
846>
847  <span class="bd-menu-link-name">Color Palettes</span>
848
849  
850</a>
851
852
853  
854</li>
855
856  
857    
858
859
860
861
862
863<li>
864  
865
866<a
867  class="
868    bd-menu-link
869    
870    
871  "
872  href="https://bulma.io/documentation/features/skeletons/"
873  data-current-link-id=""
874  data-name="Skeletons"
875  data-size="0"
876>
877  <span class="bd-menu-link-name">Skeletons</span>
878
879  
880</a>
881
882
883  
884</li>
885
886  
887</ul>
888
889  </div>
890
891  <div class="bd-menu-section is-sass">
892    <h3 class="bd-menu-heading js-menu-heading">
893  
894    <span class="icon">
895      <i class="fab fa-sass"></i>
896    </span>
897  
898  <strong>Sass Tools</strong>
899</h3>
900
901    
902
903<ul class="bd-menu-list js-menu-list" style="--size: 4">
904  
905    
906
907
908
909
910
911<li>
912  
913
914<a
915  class="
916    bd-menu-link
917    
918    
919  "
920  href="https://bulma.io/documentation/sass/mixins/"
921  data-current-link-id=""
922  data-name="Mixins"
923  data-size="0"
924>
925  <span class="bd-menu-link-name">Mixins</span>
926
927  
928</a>
929
930
931  
932</li>
933
934  
935    
936
937
938
939
940
941<li>
942  
943
944<a
945  class="
946    bd-menu-link
947    
948    
949  "
950  href="https://bulma.io/documentation/sass/responsive-mixins/"
951  data-current-link-id=""
952  data-name="Responsive mixins"
953  data-size="0"
954>
955  <span class="bd-menu-link-name">Responsive mixins</span>
956
957  
958</a>
959
960
961  
962</li>
963
964  
965    
966
967
968
969
970
971<li>
972  
973
974<a
975  class="
976    bd-menu-link
977    
978    
979  "
980  href="https://bulma.io/documentation/sass/form-control-mixins/"
981  data-current-link-id=""
982  data-name="Form Control mixins"
983  data-size="0"
984>
985  <span class="bd-menu-link-name">Form Control mixins</span>
986
987  
988</a>
989
990
991  
992</li>
993
994  
995    
996
997
998
999
1000
1001<li>
1002  
1003
1004<a
1005  class="
1006    bd-menu-link
1007    
1008    
1009  "
1010  href="https://bulma.io/documentation/sass/extends/"
1011  data-current-link-id=""
1012  data-name="Extends"
1013  data-size="0"
1014>
1015  <span class="bd-menu-link-name">Extends</span>
1016
1017  
1018</a>
1019
1020
1021  
1022</li>
1023
1024  
1025</ul>
1026
1027  </div>
1028
1029  <div class="bd-menu-section is-custom">
1030    <h3 class="bd-menu-heading js-menu-heading">
1031  
1032    <span class="icon">
1033      <i class="fas fa-palette"></i>
1034    </span>
1035  
1036  <strong>Customization</strong>
1037</h3>
1038
1039    
1040
1041<ul class="bd-menu-list js-menu-list" style="--size: 5">
1042  
1043    
1044
1045
1046
1047
1048
1049<li>
1050  
1051
1052<a
1053  class="
1054    bd-menu-link
1055    
1056    
1057  "
1058  href="https://bulma.io/documentation/customize/concepts/"
1059  data-current-link-id=""
1060  data-name="Concepts"
1061  data-size="0"
1062>
1063  <span class="bd-menu-link-name">Concepts</span>
1064
1065  
1066</a>
1067
1068
1069  
1070</li>
1071
1072  
1073    
1074
1075
1076
1077
1078
1079<li>
1080  
1081
1082<a
1083  class="
1084    bd-menu-link
1085    
1086    
1087  "
1088  href="https://bulma.io/documentation/customize/with-sass/"
1089  data-current-link-id=""
1090  data-name="With Sass"
1091  data-size="0"
1092>
1093  <span class="bd-menu-link-name">With Sass</span>
1094
1095  
1096</a>
1097
1098
1099  
1100</li>
1101
1102  
1103    
1104
1105
1106
1107
1108
1109<li>
1110  
1111
1112<a
1113  class="
1114    bd-menu-link
1115    
1116    
1117  "
1118  href="https://bulma.io/documentation/customize/with-modular-sass/"
1119  data-current-link-id=""
1120  data-name="With Modular Sass"
1121  data-size="0"
1122>
1123  <span class="bd-menu-link-name">With Modular Sass</span>
1124
1125  
1126</a>
1127
1128
1129  
1130</li>
1131
1132  
1133    
1134
1135
1136
1137
1138
1139<li>
1140  
1141
1142<a
1143  class="
1144    bd-menu-link
1145    
1146    
1147  "
1148  href="https://bulma.io/documentation/customize/with-css-variables/"
1149  data-current-link-id=""
1150  data-name="With CSS Variables"
1151  data-size="0"
1152>
1153  <span class="bd-menu-link-name">With CSS Variables</span>
1154
1155  
1156</a>
1157
1158
1159  
1160</li>
1161
1162  
1163    
1164
1165
1166
1167
1168
1169<li>
1170  
1171
1172<a
1173  class="
1174    bd-menu-link
1175    
1176    
1177  "
1178  href="https://bulma.io/documentation/customize/list-of-sass-variables/"
1179  data-current-link-id=""
1180  data-name="List of Sass variables"
1181  data-size="0"
1182>
1183  <span class="bd-menu-link-name">List of Sass variables</span>
1184
1185  
1186</a>
1187
1188
1189  
1190</li>
1191
1192  
1193</ul>
1194
1195  </div>
1196
1197  <div class="bd-menu-section is-library">
1198    <h3 class="bd-menu-heading js-menu-heading">
1199  
1200    <span class="icon">
1201      <i class="fas fa-code"></i>
1202    </span>
1203  
1204  <strong>CSS Library</strong>
1205</h3>
1206
1207
1208    
1209    
1210    
1211    
1212    
1213    
1214
1215    <ul
1216      id="js-library-menu"
1217      class="bd-menu-list bd-menu-library-list js-menu-list "
1218      style="
1219        --size: 5;
1220        
1221      "
1222    >
1223      
1224
1225
1226
1227
1228
1229<li>
1230  
1231
1232<a
1233  class="
1234    bd-menu-link
1235    
1236      js-sublist-link
1237      has-sublist
1238    
1239    
1240  "
1241  href="https://bulma.io/documentation/elements/"
1242  data-current-link-id=""
1243  data-name="Elements"
1244  data-size="12"
1245>
1246  <span class="bd-menu-link-name">Elements</span>
1247
1248  
1249    <span class="icon is-small">
1250      <i class="fas fa-angle-right"></i>
1251    </span>
1252  
1253</a>
1254
1255
1256  
1257    <ul
1258      class="bd-menu-sublist "
1259      style="--subsize: 12"
1260    >
1261      
1262        
1263        <li>
1264          
1265
1266<a
1267  class="
1268    bd-menu-link
1269    
1270    
1271  "
1272  href="https://bulma.io/documentation/elements/block/"
1273  data-current-link-id=""
1274  data-name="Block"
1275  data-size=""
1276>
1277  <span class="bd-menu-link-name">Block</span>
1278
1279  
1280</a>
1281
1282        </li>
1283      
1284        
1285        <li>
1286          
1287
1288<a
1289  class="
1290    bd-menu-link
1291    
1292    
1293  "
1294  href="https://bulma.io/documentation/elements/box/"
1295  data-current-link-id=""
1296  data-name="Box"
1297  data-size=""
1298>
1299  <span class="bd-menu-link-name">Box</span>
1300
1301  
1302</a>
1303
1304        </li>
1305      
1306        
1307        <li>
1308          
1309
1310<a
1311  class="
1312    bd-menu-link
1313    
1314    
1315  "
1316  href="https://bulma.io/documentation/elements/button/"
1317  data-current-link-id=""
1318  data-name="Button"
1319  data-size=""
1320>
1321  <span class="bd-menu-link-name">Button</span>
1322
1323  
1324</a>
1325
1326        </li>
1327      
1328        
1329        <li>
1330          
1331
1332<a
1333  class="
1334    bd-menu-link
1335    
1336    
1337  "
1338  href="https://bulma.io/documentation/elements/content/"
1339  data-current-link-id=""
1340  data-name="Content"
1341  data-size=""
1342>
1343  <span class="bd-menu-link-name">Content</span>
1344
1345  
1346</a>
1347
1348        </li>
1349      
1350        
1351        <li>
1352          
1353
1354<a
1355  class="
1356    bd-menu-link
1357    
1358    
1359  "
1360  href="https://bulma.io/documentation/elements/delete/"
1361  data-current-link-id=""
1362  data-name="Delete"
1363  data-size=""
1364>
1365  <span class="bd-menu-link-name">Delete</span>
1366
1367  
1368</a>
1369
1370        </li>
1371      
1372        
1373        <li>
1374          
1375
1376<a
1377  class="
1378    bd-menu-link
1379    
1380    
1381  "
1382  href="https://bulma.io/documentation/elements/icon/"
1383  data-current-link-id=""
1384  data-name="Icon"
1385  data-size=""
1386>
1387  <span class="bd-menu-link-name">Icon</span>
1388
1389  
1390</a>
1391
1392        </li>
1393      
1394        
1395        <li>
1396          
1397
1398<a
1399  class="
1400    bd-menu-link
1401    
1402    
1403  "
1404  href="https://bulma.io/documentation/elements/image/"
1405  data-current-link-id=""
1406  data-name="Image"
1407  data-size=""
1408>
1409  <span class="bd-menu-link-name">Image</span>
1410
1411  
1412</a>
1413
1414        </li>
1415      
1416        
1417        <li>
1418          
1419
1420<a
1421  class="
1422    bd-menu-link
1423    
1424    
1425  "
1426  href="https://bulma.io/documentation/elements/notification/"
1427  data-current-link-id=""
1428  data-name="Notification"
1429  data-size=""
1430>
1431  <span class="bd-menu-link-name">Notification</span>
1432
1433  
1434</a>
1435
1436        </li>
1437      
1438        
1439        <li>
1440          
1441
1442<a
1443  class="
1444    bd-menu-link
1445    
1446    
1447  "
1448  href="https://bulma.io/documentation/elements/progress/"
1449  data-current-link-id=""
1450  data-name="Progress bars"
1451  data-size=""
1452>
1453  <span class="bd-menu-link-name">Progress bars</span>
1454
1455  
1456</a>
1457
1458        </li>
1459      
1460        
1461        <li>
1462          
1463
1464<a
1465  class="
1466    bd-menu-link
1467    
1468    
1469  "
1470  href="https://bulma.io/documentation/elements/table/"
1471  data-current-link-id=""
1472  data-name="Table"
1473  data-size=""
1474>
1475  <span class="bd-menu-link-name">Table</span>
1476
1477  
1478</a>
1479
1480        </li>
1481      
1482        
1483        <li>
1484          
1485
1486<a
1487  class="
1488    bd-menu-link
1489    
1490    
1491  "
1492  href="https://bulma.io/documentation/elements/tag/"
1493  data-current-link-id=""
1494  data-name="Tag"
1495  data-size=""
1496>
1497  <span class="bd-menu-link-name">Tag</span>
1498
1499  
1500</a>
1501
1502        </li>
1503      
1504        
1505        <li>
1506          
1507
1508<a
1509  class="
1510    bd-menu-link
1511    
1512    
1513  "
1514  href="https://bulma.io/documentation/elements/title/"
1515  data-current-link-id=""
1516  data-name="Title"
1517  data-size=""
1518>
1519  <span class="bd-menu-link-name">Title</span>
1520
1521  
1522</a>
1523
1524        </li>
1525      
1526    </ul>
1527  
1528</li>
1529
1530      
1531
1532
1533
1534
1535
1536<li>
1537  
1538
1539<a
1540  class="
1541    bd-menu-link
1542    
1543      js-sublist-link
1544      has-sublist
1545    
1546    
1547  "
1548  href="https://bulma.io/documentation/components/"
1549  data-current-link-id=""
1550  data-name="Components"
1551  data-size="10"
1552>
1553  <span class="bd-menu-link-name">Components</span>
1554
1555  
1556    <span class="icon is-small">
1557      <i class="fas fa-angle-right"></i>
1558    </span>
1559  
1560</a>
1561
1562
1563  
1564    <ul
1565      class="bd-menu-sublist "
1566      style="--subsize: 10"
1567    >
1568      
1569        
1570        <li>
1571          
1572
1573<a
1574  class="
1575    bd-menu-link
1576    
1577    
1578  "
1579  href="https://bulma.io/documentation/components/breadcrumb/"
1580  data-current-link-id=""
1581  data-name="Breadcrumb"
1582  data-size=""
1583>
1584  <span class="bd-menu-link-name">Breadcrumb</span>
1585
1586  
1587</a>
1588
1589        </li>
1590      
1591        
1592        <li>
1593          
1594
1595<a
1596  class="
1597    bd-menu-link
1598    
1599    
1600  "
1601  href="https://bulma.io/documentation/components/card/"
1602  data-current-link-id=""
1603  data-name="Card"
1604  data-size=""
1605>
1606  <span class="bd-menu-link-name">Card</span>
1607
1608  
1609</a>
1610
1611        </li>
1612      
1613        
1614        <li>
1615          
1616
1617<a
1618  class="
1619    bd-menu-link
1620    
1621    
1622  "
1623  href="https://bulma.io/documentation/components/dropdown/"
1624  data-current-link-id=""
1625  data-name="Dropdown"
1626  data-size=""
1627>
1628  <span class="bd-menu-link-name">Dropdown</span>
1629
1630  
1631</a>
1632
1633        </li>
1634      
1635        
1636        <li>
1637          
1638
1639<a
1640  class="
1641    bd-menu-link
1642    
1643    
1644  "
1645  href="https://bulma.io/documentation/components/menu/"
1646  data-current-link-id=""
1647  data-name="Menu"
1648  data-size=""
1649>
1650  <span class="bd-menu-link-name">Menu</span>
1651
1652  
1653</a>
1654
1655        </li>
1656      
1657        
1658        <li>
1659          
1660
1661<a
1662  class="
1663    bd-menu-link
1664    
1665    
1666  "
1667  href="https://bulma.io/documentation/components/message/"
1668  data-current-link-id=""
1669  data-name="Message"
1670  data-size=""
1671>
1672  <span class="bd-menu-link-name">Message</span>
1673
1674  
1675</a>
1676
1677        </li>
1678      
1679        
1680        <li>
1681          
1682
1683<a
1684  class="
1685    bd-menu-link
1686    
1687    
1688  "
1689  href="https://bulma.io/documentation/components/modal/"
1690  data-current-link-id=""
1691  data-name="Modal"
1692  data-size=""
1693>
1694  <span class="bd-menu-link-name">Modal</span>
1695
1696  
1697</a>
1698
1699        </li>
1700      
1701        
1702        <li>
1703          
1704
1705<a
1706  class="
1707    bd-menu-link
1708    
1709    
1710  "
1711  href="https://bulma.io/documentation/components/navbar/"
1712  data-current-link-id=""
1713  data-name="Navbar"
1714  data-size=""
1715>
1716  <span class="bd-menu-link-name">Navbar</span>
1717
1718  
1719</a>
1720
1721        </li>
1722      
1723        
1724        <li>
1725          
1726
1727<a
1728  class="
1729    bd-menu-link
1730    
1731    
1732  "
1733  href="https://bulma.io/documentation/components/pagination/"
1734  data-current-link-id=""
1735  data-name="Pagination"
1736  data-size=""
1737>
1738  <span class="bd-menu-link-name">Pagination</span>
1739
1740  
1741</a>
1742
1743        </li>
1744      
1745        
1746        <li>
1747          
1748
1749<a
1750  class="
1751    bd-menu-link
1752    
1753    
1754  "
1755  href="https://bulma.io/documentation/components/panel/"
1756  data-current-link-id=""
1757  data-name="Panel"
1758  data-size=""
1759>
1760  <span class="bd-menu-link-name">Panel</span>
1761
1762  
1763</a>
1764
1765        </li>
1766      
1767        
1768        <li>
1769          
1770
1771<a
1772  class="
1773    bd-menu-link
1774    
1775    
1776  "
1777  href="https://bulma.io/documentation/components/tabs/"
1778  data-current-link-id=""
1779  data-name="Tabs"
1780  data-size=""
1781>
1782  <span class="bd-menu-link-name">Tabs</span>
1783
1784  
1785</a>
1786
1787        </li>
1788      
1789    </ul>
1790  
1791</li>
1792
1793      
1794
1795
1796
1797
1798
1799<li>
1800  
1801
1802<a
1803  class="
1804    bd-menu-link
1805    
1806      js-sublist-link
1807      has-sublist
1808    
1809    
1810  "
1811  href="https://bulma.io/documentation/form/"
1812  data-current-link-id=""
1813  data-name="Form"
1814  data-size="7"
1815>
1816  <span class="bd-menu-link-name">Form</span>
1817
1818  
1819    <span class="icon is-small">
1820      <i class="fas fa-angle-right"></i>
1821    </span>
1822  
1823</a>
1824
1825
1826  
1827    <ul
1828      class="bd-menu-sublist "
1829      style="--subsize: 7"
1830    >
1831      
1832        
1833        <li>
1834          
1835
1836<a
1837  class="
1838    bd-menu-link
1839    
1840    
1841  "
1842  href="https://bulma.io/documentation/form/general/"
1843  data-current-link-id=""
1844  data-name="General"
1845  data-size=""
1846>
1847  <span class="bd-menu-link-name">General</span>
1848
1849  
1850</a>
1851
1852        </li>
1853      
1854        
1855        <li>
1856          
1857
1858<a
1859  class="
1860    bd-menu-link
1861    
1862    
1863  "
1864  href="https://bulma.io/documentation/form/input/"
1865  data-current-link-id=""
1866  data-name="Input"
1867  data-size=""
1868>
1869  <span class="bd-menu-link-name">Input</span>
1870
1871  
1872</a>
1873
1874        </li>
1875      
1876        
1877        <li>
1878          
1879
1880<a
1881  class="
1882    bd-menu-link
1883    
1884    
1885  "
1886  href="https://bulma.io/documentation/form/textarea/"
1887  data-current-link-id=""
1888  data-name="Textarea"
1889  data-size=""
1890>
1891  <span class="bd-menu-link-name">Textarea</span>
1892
1893  
1894</a>
1895
1896        </li>
1897      
1898        
1899        <li>
1900          
1901
1902<a
1903  class="
1904    bd-menu-link
1905    
1906    
1907  "
1908  href="https://bulma.io/documentation/form/select/"
1909  data-current-link-id=""
1910  data-name="Select"
1911  data-size=""
1912>
1913  <span class="bd-menu-link-name">Select</span>
1914
1915  
1916</a>
1917
1918        </li>
1919      
1920        
1921        <li>
1922          
1923
1924<a
1925  class="
1926    bd-menu-link
1927    
1928    
1929  "
1930  href="https://bulma.io/documentation/form/checkbox/"
1931  data-current-link-id=""
1932  data-name="Checkbox"
1933  data-size=""
1934>
1935  <span class="bd-menu-link-name">Checkbox</span>
1936
1937  
1938</a>
1939
1940        </li>
1941      
1942        
1943        <li>
1944          
1945
1946<a
1947  class="
1948    bd-menu-link
1949    
1950    
1951  "
1952  href="https://bulma.io/documentation/form/radio/"
1953  data-current-link-id=""
1954  data-name="Radio"
1955  data-size=""
1956>
1957  <span class="bd-menu-link-name">Radio</span>
1958
1959  
1960</a>
1961
1962        </li>
1963      
1964        
1965        <li>
1966          
1967
1968<a
1969  class="
1970    bd-menu-link
1971    
1972    
1973  "
1974  href="https://bulma.io/documentation/form/file/"
1975  data-current-link-id=""
1976  data-name="File"
1977  data-size=""
1978>
1979  <span class="bd-menu-link-name">File</span>
1980
1981  
1982</a>
1983
1984        </li>
1985      
1986    </ul>
1987  
1988</li>
1989
1990      
1991
1992
1993
1994
1995
1996<li>
1997  
1998
1999<a
2000  class="
2001    bd-menu-link
2002    
2003      js-sublist-link
2004      has-sublist
2005    
2006    
2007  "
2008  href="https://bulma.io/documentation/columns/"
2009  data-current-link-id=""
2010  data-name="Columns"
2011  data-size="6"
2012>
2013  <span class="bd-menu-link-name">Columns</span>
2014
2015  
2016    <span class="icon is-small">
2017      <i class="fas fa-angle-right"></i>
2018    </span>
2019  
2020</a>
2021
2022
2023  
2024    <ul
2025      class="bd-menu-sublist "
2026      style="--subsize: 6"
2027    >
2028      
2029        
2030        <li>
2031          
2032
2033<a
2034  class="
2035    bd-menu-link
2036    
2037    
2038  "
2039  href="https://bulma.io/documentation/columns/basics/"
2040  data-current-link-id=""
2041  data-name="Basics"
2042  data-size=""
2043>
2044  <span class="bd-menu-link-name">Basics</span>
2045
2046  
2047</a>
2048
2049        </li>
2050      
2051        
2052        <li>
2053          
2054
2055<a
2056  class="
2057    bd-menu-link
2058    
2059    
2060  "
2061  href="https://bulma.io/documentation/columns/sizes/"
2062  data-current-link-id=""
2063  data-name="Sizes"
2064  data-size=""
2065>
2066  <span class="bd-menu-link-name">Sizes</span>
2067
2068  
2069</a>
2070
2071        </li>
2072      
2073        
2074        <li>
2075          
2076
2077<a
2078  class="
2079    bd-menu-link
2080    
2081    
2082  "
2083  href="https://bulma.io/documentation/columns/responsiveness/"
2084  data-current-link-id=""
2085  data-name="Responsiveness"
2086  data-size=""
2087>
2088  <span class="bd-menu-link-name">Responsiveness</span>
2089
2090  
2091</a>
2092
2093        </li>
2094      
2095        
2096        <li>
2097          
2098
2099<a
2100  class="
2101    bd-menu-link
2102    
2103    
2104  "
2105  href="https://bulma.io/documentation/columns/nesting/"
2106  data-current-link-id=""
2107  data-name="Nesting"
2108  data-size=""
2109>
2110  <span class="bd-menu-link-name">Nesting</span>
2111
2112  
2113</a>
2114
2115        </li>
2116      
2117        
2118        <li>
2119          
2120
2121<a
2122  class="
2123    bd-menu-link
2124    
2125    
2126  "
2127  href="https://bulma.io/documentation/columns/gap/"
2128  data-current-link-id=""
2129  data-name="Gap"
2130  data-size=""
2131>
2132  <span class="bd-menu-link-name">Gap</span>
2133
2134  
2135</a>
2136
2137        </li>
2138      
2139        
2140        <li>
2141          
2142
2143<a
2144  class="
2145    bd-menu-link
2146    
2147    
2148  "
2149  href="https://bulma.io/documentation/columns/options/"
2150  data-current-link-id=""
2151  data-name="Options"
2152  data-size=""
2153>
2154  <span class="bd-menu-link-name">Options</span>
2155
2156  
2157</a>
2158
2159        </li>
2160      
2161    </ul>
2162  
2163</li>
2164
2165      
2166
2167
2168
2169
2170
2171<li>
2172  
2173
2174<a
2175  class="
2176    bd-menu-link
2177    
2178      js-sublist-link
2179      has-sublist
2180    
2181    
2182  "
2183  href="https://bulma.io/documentation/grid/"
2184  data-current-link-id=""
2185  data-name="Grid"
2186  data-size="4"
2187>
2188  <span class="bd-menu-link-name">Grid</span>
2189
2190  
2191    <span class="icon is-small">
2192      <i class="fas fa-angle-right"></i>
2193    </span>
2194  
2195</a>
2196
2197
2198  
2199    <ul
2200      class="bd-menu-sublist "
2201      style="--subsize: 4"
2202    >
2203      
2204        
2205        <li>
2206          
2207
2208<a
2209  class="
2210    bd-menu-link
2211    
2212    
2213  "
2214  href="https://bulma.io/documentation/grid/smart-grid/"
2215  data-current-link-id=""
2216  data-name="Smart Grid"
2217  data-size=""
2218>
2219  <span class="bd-menu-link-name">Smart Grid</span>
2220
2221  
2222</a>
2223
2224        </li>
2225      
2226        
2227        <li>
2228          
2229
2230<a
2231  class="
2232    bd-menu-link
2233    
2234    
2235  "
2236  href="https://bulma.io/documentation/grid/fixed-grid/"
2237  data-current-link-id=""
2238  data-name="Fixed Grid"
2239  data-size=""
2240>
2241  <span class="bd-menu-link-name">Fixed Grid</span>
2242
2243  
2244</a>
2245
2246        </li>
2247      
2248        
2249        <li>
2250          
2251
2252<a
2253  class="
2254    bd-menu-link
2255    
2256    
2257  "
2258  href="https://bulma.io/documentation/grid/grid-cells/"
2259  data-current-link-id=""
2260  data-name="Grid Cells"
2261  data-size=""
2262>
2263  <span class="bd-menu-link-name">Grid Cells</span>
2264
2265  
2266</a>
2267
2268        </li>
2269      
2270        
2271        <li>
2272          
2273
2274<a
2275  class="
2276    bd-menu-link
2277    
2278    
2279  "
2280  href="https://bulma.io/documentation/grid/playground/"
2281  data-current-link-id=""
2282  data-name="Playground"
2283  data-size=""
2284>
2285  <span class="bd-menu-link-name">Playground</span>
2286
2287  
2288</a>
2289
2290        </li>
2291      
2292    </ul>
2293  
2294</li>
2295
2296      
2297
2298
2299
2300
2301
2302<li>
2303  
2304
2305<a
2306  class="
2307    bd-menu-link
2308    
2309      js-sublist-link
2310      has-sublist
2311    
2312    
2313  "
2314  href="https://bulma.io/documentation/layout/"
2315  data-current-link-id=""
2316  data-name="Layout"
2317  data-size="6"
2318>
2319  <span class="bd-menu-link-name">Layout</span>
2320
2321  
2322    <span class="icon is-small">
2323      <i class="fas fa-angle-right"></i>
2324    </span>
2325  
2326</a>
2327
2328
2329  
2330    <ul
2331      class="bd-menu-sublist "
2332      style="--subsize: 6"
2333    >
2334      
2335        
2336        <li>
2337          
2338
2339<a
2340  class="
2341    bd-menu-link
2342    
2343    
2344  "
2345  href="https://bulma.io/documentation/layout/container/"
2346  data-current-link-id=""
2347  data-name="Container"
2348  data-size=""
2349>
2350  <span class="bd-menu-link-name">Container</span>
2351
2352  
2353</a>
2354
2355        </li>
2356      
2357        
2358        <li>
2359          
2360
2361<a
2362  class="
2363    bd-menu-link
2364    
2365    
2366  "
2367  href="https://bulma.io/documentation/layout/hero/"
2368  data-current-link-id=""
2369  data-name="Hero"
2370  data-size=""
2371>
2372  <span class="bd-menu-link-name">Hero</span>
2373
2374  
2375</a>
2376
2377        </li>
2378      
2379        
2380        <li>
2381          
2382
2383<a
2384  class="
2385    bd-menu-link
2386    
2387    
2388  "
2389  href="https://bulma.io/documentation/layout/section/"
2390  data-current-link-id=""
2391  data-name="Section"
2392  data-size=""
2393>
2394  <span class="bd-menu-link-name">Section</span>
2395
2396  
2397</a>
2398
2399        </li>
2400      
2401        
2402        <li>
2403          
2404
2405<a
2406  class="
2407    bd-menu-link
2408    
2409    
2410  "
2411  href="https://bulma.io/documentation/layout/level/"
2412  data-current-link-id=""
2413  data-name="Level"
2414  data-size=""
2415>
2416  <span class="bd-menu-link-name">Level</span>
2417
2418  
2419</a>
2420
2421        </li>
2422      
2423        
2424        <li>
2425          
2426
2427<a
2428  class="
2429    bd-menu-link
2430    
2431    
2432  "
2433  href="https://bulma.io/documentation/layout/media-object/"
2434  data-current-link-id=""
2435  data-name="Media Object"
2436  data-size=""
2437>
2438  <span class="bd-menu-link-name">Media Object</span>
2439
2440  
2441</a>
2442
2443        </li>
2444      
2445        
2446        <li>
2447          
2448
2449<a
2450  class="
2451    bd-menu-link
2452    
2453    
2454  "
2455  href="https://bulma.io/documentation/layout/footer/"
2456  data-current-link-id=""
2457  data-name="Footer"
2458  data-size=""
2459>
2460  <span class="bd-menu-link-name">Footer</span>
2461
2462  
2463</a>
2464
2465        </li>
2466      
2467    </ul>
2468  
2469</li>
2470
2471    </ul>
2472  </div>
2473
2474  <div class="bd-menu-section is-utilities">
2475    <h3 class="bd-menu-heading js-menu-heading">
2476  
2477    <span class="icon">
2478      <i class="fab fa-css3"></i>
2479    </span>
2480  
2481  <strong>CSS Helpers</strong>
2482</h3>
2483
2484    
2485
2486<ul class="bd-menu-list js-menu-list" style="--size: 7">
2487  
2488    
2489
2490
2491
2492
2493
2494<li>
2495  
2496
2497<a
2498  class="
2499    bd-menu-link
2500    
2501    
2502  "
2503  href="https://bulma.io/documentation/helpers/color-helpers/"
2504  data-current-link-id=""
2505  data-name="Color"
2506  data-size="0"
2507>
2508  <span class="bd-menu-link-name">Color</span>
2509
2510  
2511</a>
2512
2513
2514  
2515</li>
2516
2517  
2518    
2519
2520
2521
2522
2523
2524<li>
2525  
2526
2527<a
2528  class="
2529    bd-menu-link
2530    
2531    
2532  "
2533  href="https://bulma.io/documentation/helpers/palette-helpers/"
2534  data-current-link-id=""
2535  data-name="Color Palette"
2536  data-size="0"
2537>
2538  <span class="bd-menu-link-name">Color Palette</span>
2539
2540  
2541</a>
2542
2543
2544  
2545</li>
2546
2547  
2548    
2549
2550
2551
2552
2553
2554<li>
2555  
2556
2557<a
2558  class="
2559    bd-menu-link
2560    
2561    
2562  "
2563  href="https://bulma.io/documentation/helpers/spacing-helpers/"
2564  data-current-link-id=""
2565  data-name="Spacing"
2566  data-size="0"
2567>
2568  <span class="bd-menu-link-name">Spacing</span>
2569
2570  
2571</a>
2572
2573
2574  
2575</li>
2576
2577  
2578    
2579
2580
2581
2582
2583
2584<li>
2585  
2586
2587<a
2588  class="
2589    bd-menu-link
2590    
2591    
2592  "
2593  href="https://bulma.io/documentation/helpers/typography-helpers/"
2594  data-current-link-id=""
2595  data-name="Typography"
2596  data-size="0"
2597>
2598  <span class="bd-menu-link-name">Typography</span>
2599
2600  
2601</a>
2602
2603
2604  
2605</li>
2606
2607  
2608    
2609
2610
2611
2612
2613
2614<li>
2615  
2616
2617<a
2618  class="
2619    bd-menu-link
2620    
2621    
2622  "
2623  href="https://bulma.io/documentation/helpers/visibility-helpers/"
2624  data-current-link-id=""
2625  data-name="Visibility"
2626  data-size="0"
2627>
2628  <span class="bd-menu-link-name">Visibility</span>
2629
2630  
2631</a>
2632
2633
2634  
2635</li>
2636
2637  
2638    
2639
2640
2641
2642
2643
2644<li>
2645  
2646
2647<a
2648  class="
2649    bd-menu-link
2650    
2651    
2652  "
2653  href="https://bulma.io/documentation/helpers/flexbox-helpers/"
2654  data-current-link-id=""
2655  data-name="Flexbox"
2656  data-size="0"
2657>
2658  <span class="bd-menu-link-name">Flexbox</span>
2659
2660  
2661</a>
2662
2663
2664  
2665</li>
2666
2667  
2668    
2669
2670
2671
2672
2673
2674<li>
2675  
2676
2677<a
2678  class="
2679    bd-menu-link
2680    
2681    
2682  "
2683  href="https://bulma.io/documentation/helpers/other-helpers/"
2684  data-current-link-id=""
2685  data-name="Other"
2686  data-size="0"
2687>
2688  <span class="bd-menu-link-name">
2688Other</span>
2689
2690  
2691</a>
2692
2693
2694  
2695</li>
2696
2697  
2698</ul>
2699
2700  </div>
2701</div>
2702
2703<div class="bd-side-sponsrs">
2704  <p class="bd-side-sponsor-label">Sponsor</p>
2705
2706  <a class="bd-side-sponsor" href="https://www.route4me.com/" target="_blank">
2707    <img
2708  src="https://bulma.io/assets/images/amis/route4me.png"
2709  srcset="https://bulma.io/assets/images/amis/route4me.png 1x,
2710          https://bulma.io/assets/images/amis/[email protected] 2x"
2711  alt="Route Planner and Route Optimizer"
2712  width="224"
2713  height="57">
2714
2715  </a>
2716</div>
2717
2718
2719  </div>
2720
2721  <div class="bd-docs-lead bd-theme-">
2722    
2723    
2724
2725    <section class="bd-hero is-docs">
2726  <div class="bd-hero-body">
2727    <h1 class="bd-hero-title algolia-lvl0">
2728      <p>Official Bulma Documentation</p>
2729
2730    </h1>
2731
2732    <hr class="bd-hr">
2733
2734    <h2 class="bd-hero-subtitle algolia-lvl1">
2735      
2736
2737    </h2>
2738
2739    
2740      <div class="bd-hero-prints">
2741        
2742          <a class="bd-hero-print icon-text" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">
2743            <span class="icon">
2744              <i class="fab fa-creative-commons"></i>
2745            </span>
2746            <span>Creative Commons</span>
2747          </a>
2748        
2749          <a class="bd-hero-print icon-text" href="https://github.com/jgthms/bulma" target="_blank">
2750            <span class="icon">
2751              <i class="fas fa-code-pull-request"></i>
2752            </span>
2753            <span>Contribute on GitHub</span>
2754          </a>
2755        
2756      </div>
2757    
2758  </div>
2759
2760  
2761    <div class="bd-hero-carbon">
2762      <div id="carboncontainer" class="bd-carbon">
2763  <div id="carbon">
2764    <a id="masterclass-carbon" href="https://cssmasterclass.io/" target="_blank" style="display: none; aspect-ratio: 40 / 28; max-width: 400px; max-height: 280px; width: 100%;">
2765      <img src="https://bulma.io/assets/images/masterclass/masterclass-carbon.png" height="260" width="400" alt="CSS Masterclass">
2766    </a>
2767    
2767<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIE237&placement=bulmaio&format=cover" id="_carbonads_js" onerror="this.previousElementSibling.style.display = 'flex'"></script>
2767
2768  </div>
2769</div>
2770
2771    </div>
2772  
2773</section>
2774
2775
2776    <div class="bd-docs-content algolia-content">
2777      
2778        
2779
2780<div class="bd-stack">
2781  
2782    
2783    
2784
2785    <h3 class="bd-link-heading bd-theme-start">
2786      <span class="icon">
2787        <i class="fa-solid fa-arrow-right"></i>
2788      </span>
2789      <strong>Start</strong>
2790    </h3>
2791
2792    <div class="bd-links bd-theme-start">
2793      
2794        
2795
2796        <a class="bd-link" href="https://bulma.io/documentation/start/overview/">
2797  
2798
2799  <header class="bd-link-header">
2800    
2801      <span class="icon bd-link-icon">
2802        <i
2803          class="fa-regular fa-eye fa-lg"
2804        ></i>
2805      </span>
2806    
2807
2808    <h4 class="bd-link-title algolia-lvl1">
2809      Overview
2810    </h4>
2811  </header>
2812
2813  <div class="bd-link-body">
2814    <div class="bd-link-subtitle">
2815      You only need <strong>1 CSS file</strong> to use Bulma
2816    </div>
2817
2818    
2819  </div>
2820</a>
2821
2822      
2823        
2824
2825        <a class="bd-link" href="https://bulma.io/documentation/start/installation/">
2826  
2827
2828  <header class="bd-link-header">
2829    
2830      <span class="icon bd-link-icon">
2831        <i
2832          class="fa-solid fa-download fa-lg"
2833        ></i>
2834      </span>
2835    
2836
2837    <h4 class="bd-link-title algolia-lvl1">
2838      Installation
2839    </h4>
2840  </header>
2841
2842  <div class="bd-link-body">
2843    <div class="bd-link-subtitle">
2844      Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>
2845    </div>
2846
2847    
2848  </div>
2849</a>
2850
2851      
2852        
2853
2854        <a class="bd-link" href="https://bulma.io/documentation/start/alternative-versions/">
2855  
2856
2857  <header class="bd-link-header">
2858    
2859      <span class="icon bd-link-icon">
2860        <i
2861          class="fa-solid fa-download fa-lg"
2862        ></i>
2863      </span>
2864    
2865
2866    <h4 class="bd-link-title algolia-lvl1">
2867      Alternative Versions
2868    </h4>
2869  </header>
2870
2871  <div class="bd-link-body">
2872    <div class="bd-link-subtitle">
2873      Use one of the <strong>pre-built</strong> alternative versions of Bulma
2874    </div>
2875
2876    
2877  </div>
2878</a>
2879
2880      
2881        
2882
2883        <a class="bd-link" href="https://bulma.io/documentation/start/syntax/">
2884  
2885
2886  <header class="bd-link-header">
2887    
2888      <span class="icon bd-link-icon">
2889        <i
2890          class="fa-solid fa-code fa-lg"
2891        ></i>
2892      </span>
2893    
2894
2895    <h4 class="bd-link-title algolia-lvl1">
2896      Syntax
2897    </h4>
2898  </header>
2899
2900  <div class="bd-link-body">
2901    <div class="bd-link-subtitle">
2902      <strong>How to use</strong> Bulma components and their alternative styles
2903    </div>
2904
2905    
2906  </div>
2907</a>
2908
2909      
2910        
2911
2912        <a class="bd-link" href="https://bulma.io/documentation/start/modular/">
2913  
2914
2915  <header class="bd-link-header">
2916    
2917      <span class="icon bd-link-icon">
2918        <i
2919          class="fa-solid fa-cubes fa-lg"
2920        ></i>
2921      </span>
2922    
2923
2924    <h4 class="bd-link-title algolia-lvl1">
2925      Modularity
2926    </h4>
2927  </header>
2928
2929  <div class="bd-link-body">
2930    <div class="bd-link-subtitle">
2931      Just import what you <strong>need</strong>
2932    </div>
2933
2934    
2935  </div>
2936</a>
2937
2938      
2939        
2940
2941        <a class="bd-link" href="https://bulma.io/documentation/start/responsiveness/">
2942  
2943
2944  <header class="bd-link-header">
2945    
2946      <span class="icon bd-link-icon">
2947        <i
2948          class="fa-solid fa-arrows-alt-h fa-lg"
2949        ></i>
2950      </span>
2951    
2952
2953    <h4 class="bd-link-title algolia-lvl1">
2954      Responsiveness
2955    </h4>
2956  </header>
2957
2958  <div class="bd-link-body">
2959    <div class="bd-link-subtitle">
2960      Bulma is a <strong>mobile-first</strong> framework
2961    </div>
2962
2963    
2964  </div>
2965</a>
2966
2967      
2968        
2969
2970        <a class="bd-link" href="https://bulma.io/documentation/start/migrating-to-v1/">
2971  
2972
2973  <header class="bd-link-header">
2974    
2975      <span class="icon bd-link-icon">
2976        <i
2977          class="fa-solid fa-arrow-up fa-lg"
2978        ></i>
2979      </span>
2980    
2981
2982    <h4 class="bd-link-title algolia-lvl1">
2983      Migrating to v1
2984    </h4>
2985  </header>
2986
2987  <div class="bd-link-body">
2988    <div class="bd-link-subtitle">
2989      How to <strong>migrate</strong> to Bulma v1
2990    </div>
2991
2992    
2993  </div>
2994</a>
2995
2996      
2997    </div>
2998  
2999    
3000    
3001
3002    <h3 class="bd-link-heading bd-theme-features">
3003      <span class="icon">
3004        <i class="fa-solid fa-wand-magic-sparkles"></i>
3005      </span>
3006      <strong>Features</strong>
3007    </h3>
3008
3009    <div class="bd-links bd-theme-features">
3010      
3011        
3012
3013        <a class="bd-link" href="https://bulma.io/documentation/features/css-variables/">
3014  
3015
3016  <header class="bd-link-header">
3017    
3018      <span class="icon bd-link-icon">
3019        <i
3020          class="fa-brands fa-css3 fa-lg"
3021        ></i>
3022      </span>
3023    
3024
3025    <h4 class="bd-link-title algolia-lvl1">
3026      CSS Variables
3027    </h4>
3028  </header>
3029
3030  <div class="bd-link-body">
3031    <div class="bd-link-subtitle">
3032      Customizing with <strong>CSS only</strong>
3033    </div>
3034
3035    
3036  </div>
3037</a>
3038
3039      
3040        
3041
3042        <a class="bd-link" href="https://bulma.io/documentation/features/themes/">
3043  
3044
3045  <header class="bd-link-header">
3046    
3047      <span class="icon bd-link-icon">
3048        <i
3049          class="fa-solid fa-palette fa-lg"
3050        ></i>
3051      </span>
3052    
3053
3054    <h4 class="bd-link-title algolia-lvl1">
3055      Themes
3056    </h4>
3057  </header>
3058
3059  <div class="bd-link-body">
3060    <div class="bd-link-subtitle">
3061      How Bulma styles its components with <strong>CSS variables</strong>
3062    </div>
3063
3064    
3065  </div>
3066</a>
3067
3068      
3069        
3070
3071        <a class="bd-link" href="https://bulma.io/documentation/features/dark-mode/">
3072  
3073
3074  <header class="bd-link-header">
3075    
3076      <span class="icon bd-link-icon">
3077        <i
3078          class="fa-solid fa-moon fa-lg"
3079        ></i>
3080      </span>
3081    
3082
3083    <h4 class="bd-link-title algolia-lvl1">
3084      Dark Mode
3085    </h4>
3086  </header>
3087
3088  <div class="bd-link-body">
3089    <div class="bd-link-subtitle">
3090      Bulma comes with an <strong>automatic Dark mode</strong>
3091    </div>
3092
3093    
3094  </div>
3095</a>
3096
3097      
3098        
3099
3100        <a class="bd-link" href="https://bulma.io/documentation/features/color-palettes/">
3101  
3102
3103  <header class="bd-link-header">
3104    
3105      <span class="icon bd-link-icon">
3106        <i
3107          class="fa-solid fa-swatchbook fa-lg"
3108        ></i>
3109      </span>
3110    
3111
3112    <h4 class="bd-link-title algolia-lvl1">
3113      Color Palettes
3114    </h4>
3115  </header>
3116
3117  <div class="bd-link-body">
3118    <div class="bd-link-subtitle">
3119      Input <strong>1 color</strong>, Receive <strong>dozens</strong> of different <strong>shades</strong> for that color
3120    </div>
3121
3122    
3123  </div>
3124</a>
3125
3126      
3127        
3128
3129        <a class="bd-link" href="https://bulma.io/documentation/features/skeletons/">
3130  
3131
3132  <header class="bd-link-header">
3133    
3134      <span class="icon bd-link-icon">
3135        <i
3136          class="fa-solid fa-spinner fa-lg"
3137        ></i>
3138      </span>
3139    
3140
3141    <h4 class="bd-link-title algolia-lvl1">
3142      Skeletons
3143    </h4>
3144  </header>
3145
3146  <div class="bd-link-body">
3147    <div class="bd-link-subtitle">
3148      Transform almost any Bulma component into a <strong>skeleton loader</strong>, or use one of the pre-built utility elements
3149    </div>
3150
3151    
3152  </div>
3153</a>
3154
3155      
3156    </div>
3157  
3158    
3159    
3160
3161    <h3 class="bd-link-heading bd-theme-sass">
3162      <span class="icon">
3163        <i class="fa-brands fa-sass"></i>
3164      </span>
3165      <strong>Sass Utilities</strong>
3166    </h3>
3167
3168    <div class="bd-links bd-theme-sass">
3169      
3170        
3171
3172        <a class="bd-link" href="https://bulma.io/documentation/sass/mixins/">
3173  
3174
3175  <header class="bd-link-header">
3176    
3177      <span class="icon bd-link-icon">
3178        <i
3179          class="fa-solid fa-at fa-lg"
3180        ></i>
3181      </span>
3182    
3183
3184    <h4 class="bd-link-title algolia-lvl1">
3185      Mixins
3186    </h4>
3187  </header>
3188
3189  <div class="bd-link-body">
3190    <div class="bd-link-subtitle">
3191      Utility mixins for custom elements and other CSS helpers
3192    </div>
3193
3194    
3195  </div>
3196</a>
3197
3198      
3199        
3200
3201        <a class="bd-link" href="https://bulma.io/documentation/sass/responsive-mixins/">
3202  
3203
3204  <header class="bd-link-header">
3205    
3206      <span class="icon bd-link-icon">
3207        <i
3208          class="fa-solid fa-arrows-alt-h fa-lg"
3209        ></i>
3210      </span>
3211    
3212
3213    <h4 class="bd-link-title algolia-lvl1">
3214      Responsive mixins
3215    </h4>
3216  </header>
3217
3218  <div class="bd-link-body">
3219    <div class="bd-link-subtitle">
3220      Mixins that allows you to define different styles for each screen size
3221    </div>
3222
3223    
3224  </div>
3225</a>
3226
3227      
3228        
3229
3230        <a class="bd-link" href="https://bulma.io/documentation/sass/form-control-mixins/">
3231  
3232
3233  <header class="bd-link-header">
3234    
3235      <span class="icon bd-link-icon">
3236        <i
3237          class="fa-regular fa-hand-pointer fa-lg"
3238        ></i>
3239      </span>
3240    
3241
3242    <h4 class="bd-link-title algolia-lvl1">
3243      Form Control mixins
3244    </h4>
3245  </header>
3246
3247  <div class="bd-link-body">
3248    <div class="bd-link-subtitle">
3249      <strong>Mixins</strong> for Bulma's buttons and form controls
3250    </div>
3251
3252    
3253  </div>
3254</a>
3255
3256      
3257        
3258
3259        <a class="bd-link" href="https://bulma.io/documentation/sass/extends/">
3260  
3261
3262  <header class="bd-link-header">
3263    
3264      <span class="icon bd-link-icon">
3265        <i
3266          class="fa-solid fa-percentage fa-lg"
3267        ></i>
3268      </span>
3269    
3270
3271    <h4 class="bd-link-title algolia-lvl1">
3272      Extends
3273    </h4>
3274  </header>
3275
3276  <div class="bd-link-body">
3277    <div class="bd-link-subtitle">
3278      Sass extends to keep your <strong>CSS code DRY</strong>
3279    </div>
3280
3281    
3282  </div>
3283</a>
3284
3285      
3286    </div>
3287  
3288    
3289    
3290
3291    <h3 class="bd-link-heading bd-theme-customize">
3292      <span class="icon">
3293        <i class="fa-solid fa-paint-brush"></i>
3294      </span>
3295      <strong>Customize</strong>
3296    </h3>
3297
3298    <div class="bd-links bd-theme-customize">
3299      
3300        
3301
3302        <a class="bd-link" href="https://bulma.io/documentation/customize/concepts/">
3303  
3304
3305  <header class="bd-link-header">
3306    
3307      <span class="icon bd-link-icon">
3308        <i
3309          class="fa-solid fa-lightbulb fa-lg"
3310        ></i>
3311      </span>
3312    
3313
3314    <h4 class="bd-link-title algolia-lvl1">
3315      Concepts
3316    </h4>
3317  </header>
3318
3319  <div class="bd-link-body">
3320    <div class="bd-link-subtitle">
3321      What makes Bulma <strong>customizable</strong>
3322    </div>
3323
3324    
3325  </div>
3326</a>
3327
3328      
3329        
3330
3331        <a class="bd-link" href="https://bulma.io/documentation/customize/with-sass/">
3332  
3333
3334  <header class="bd-link-header">
3335    
3336      <span class="icon bd-link-icon">
3337        <i
3338          class="fa-brands fa-sass fa-lg"
3339        ></i>
3340      </span>
3341    
3342
3343    <h4 class="bd-link-title algolia-lvl1">
3344      With Sass
3345    </h4>
3346  </header>
3347
3348  <div class="bd-link-body">
3349    <div class="bd-link-subtitle">
3350      Customize Bulma with Sass variables
3351    </div>
3352
3353    
3354  </div>
3355</a>
3356
3357      
3358        
3359
3360        <a class="bd-link" href="https://bulma.io/documentation/customize/with-modular-sass/">
3361  
3362
3363  <header class="bd-link-header">
3364    
3365      <span class="icon bd-link-icon">
3366        <i
3367          class="fa-solid fa-cubes fa-lg"
3368        ></i>
3369      </span>
3370    
3371
3372    <h4 class="bd-link-title algolia-lvl1">
3373      With Modular Sass
3374    </h4>
3375  </header>
3376
3377  <div class="bd-link-body">
3378    <div class="bd-link-subtitle">
3379      Import <strong>only</strong> what you need and <strong>customize</strong> it
3380    </div>
3381
3382    
3383  </div>
3384</a>
3385
3386      
3387        
3388
3389        <a class="bd-link" href="https://bulma.io/documentation/customize/with-css-variables/">
3390  
3391
3392  <header class="bd-link-header">
3393    
3394      <span class="icon bd-link-icon">
3395        <i
3396          class="fa-brands fa-css3 fa-lg"
3397        ></i>
3398      </span>
3399    
3400
3401    <h4 class="bd-link-title algolia-lvl1">
3402      With CSS Variables
3403    </h4>
3404  </header>
3405
3406  <div class="bd-link-body">
3407    <div class="bd-link-subtitle">
3408      See how Bulma uses <strong>Sass variables</strong> to allow easy customization
3409    </div>
3410
3411    
3412  </div>
3413</a>
3414
3415      
3416        
3417
3418        <a class="bd-link" href="https://bulma.io/documentation/customize/list-of-sass-variables/">
3419  
3420
3421  <header class="bd-link-header">
3422    
3423      <span class="icon bd-link-icon">
3424        <i
3425          class="fa-solid fa-list fa-lg"
3426        ></i>
3427      </span>
3428    
3429
3430    <h4 class="bd-link-title algolia-lvl1">
3431      List of Sass variables
3432    </h4>
3433  </header>
3434
3435  <div class="bd-link-body">
3436    <div class="bd-link-subtitle">
3437      All <strong>Sass</strong> variables defined by Bulma
3438    </div>
3439
3440    
3441  </div>
3442</a>
3443
3444      
3445    </div>
3446  
3447    
3448    
3449
3450    <h3 class="bd-link-heading bd-theme-library">
3451      <span class="icon">
3452        <i class="fa-solid fa-cubes"></i>
3453      </span>
3454      <strong>CSS Library</strong>
3455    </h3>
3456
3457    <div class="bd-links bd-theme-library">
3458      
3459        
3460
3461        <a class="bd-link" href="https://bulma.io/documentation/columns/">
3462  
3463
3464  <header class="bd-link-header">
3465    
3466      <span class="icon bd-link-icon">
3467        <i
3468          class="fa-solid fa-columns fa-lg"
3469        ></i>
3470      </span>
3471    
3472
3473    <h4 class="bd-link-title algolia-lvl1">
3474      Columns
3475    </h4>
3476  </header>
3477
3478  <div class="bd-link-body">
3479    <div class="bd-link-subtitle">
3480      The power of <strong>Flexbox</strong> in a simple interface
3481    </div>
3482
3483    
3484  </div>
3485</a>
3486
3487      
3488        
3489
3490        <a class="bd-link" href="https://bulma.io/documentation/grid/">
3491  
3492
3493  <header class="bd-link-header">
3494    
3495      <span class="icon bd-link-icon">
3496        <i
3497          class="fa-solid fa-th fa-lg"
3498        ></i>
3499      </span>
3500    
3501
3502    <h4 class="bd-link-title algolia-lvl1">
3503      Grid
3504    </h4>
3505  </header>
3506
3507  <div class="bd-link-body">
3508    <div class="bd-link-subtitle">
3509      A <strong>2 dimensional</strong> layout component
3510    </div>
3511
3512    
3513  </div>
3514</a>
3515
3516      
3517        
3518
3519        <a class="bd-link" href="https://bulma.io/documentation/elements/">
3520  
3521
3522  <header class="bd-link-header">
3523    
3524      <span class="icon bd-link-icon">
3525        <i
3526          class="fa-solid fa-cube fa-lg"
3527        ></i>
3528      </span>
3529    
3530
3531    <h4 class="bd-link-title algolia-lvl1">
3532      Elements
3533    </h4>
3534  </header>
3535
3536  <div class="bd-link-body">
3537    <div class="bd-link-subtitle">
3538      Essential interface elements that only require a <strong>single CSS class</strong>
3539    </div>
3540
3541    
3542  </div>
3543</a>
3544
3545      
3546        
3547
3548        <a class="bd-link" href="https://bulma.io/documentation/components/">
3549  
3550
3551  <header class="bd-link-header">
3552    
3553      <span class="icon bd-link-icon">
3554        <i
3555          class="fa-solid fa-cubes fa-lg"
3556        ></i>
3557      </span>
3558    
3559
3560    <h4 class="bd-link-title algolia-lvl1">
3561      Components
3562    </h4>
3563  </header>
3564
3565  <div class="bd-link-body">
3566    <div class="bd-link-subtitle">
3567      Advanced multi-part components with lots of possibilities
3568    </div>
3569
3570    
3571  </div>
3572</a>
3573
3574      
3575        
3576
3577        <a class="bd-link" href="https://bulma.io/documentation/form/">
3578  
3579
3580  <header class="bd-link-header">
3581    
3582      <span class="icon bd-link-icon">
3583        <i
3584          class="fa-solid fa-align-left fa-flip-vertical fa-lg"
3585        ></i>
3586      </span>
3587    
3588
3589    <h4 class="bd-link-title algolia-lvl1">
3590      Form
3591    </h4>
3592  </header>
3593
3594  <div class="bd-link-body">
3595    <div class="bd-link-subtitle">
3596      The indispensable <strong>form controls</strong>, designed for maximum clarity
3597    </div>
3598
3599    
3600  </div>
3601</a>
3602
3603      
3604        
3605
3606        <a class="bd-link" href="https://bulma.io/documentation/layout/">
3607  
3608
3609  <header class="bd-link-header">
3610    
3611      <span class="icon bd-link-icon">
3612        <i
3613          class="fa-solid fa-border-none fa-lg"
3614        ></i>
3615      </span>
3616    
3617
3618    <h4 class="bd-link-title algolia-lvl1">
3619      Layout
3620    </h4>
3621  </header>
3622
3623  <div class="bd-link-body">
3624    <div class="bd-link-subtitle">
3625      Design the <strong>structure</strong> of your webpage with these CSS classes
3626    </div>
3627
3628    
3629  </div>
3630</a>
3631
3632      
3633    </div>
3634  
3635    
3636    
3637
3638    <h3 class="bd-link-heading bd-theme-helpers">
3639      <span class="icon">
3640        <i class="fa-brands fa-css3"></i>
3641      </span>
3642      <strong>Helpers</strong>
3643    </h3>
3644
3645    <div class="bd-links bd-theme-helpers">
3646      
3647        
3648
3649        <a class="bd-link" href="https://bulma.io/documentation/helpers/color-helpers/">
3650  
3651
3652  <header class="bd-link-header">
3653    
3654      <span class="icon bd-link-icon">
3655        <i
3656          class="fa-solid fa-tint fa-lg"
3657        ></i>
3658      </span>
3659    
3660
3661    <h4 class="bd-link-title algolia-lvl1">
3662      Color
3663    </h4>
3664  </header>
3665
3666  <div class="bd-link-body">
3667    <div class="bd-link-subtitle">
3668      Change the <strong>color</strong> of the text and/or background
3669    </div>
3670
3671    
3672  </div>
3673</a>
3674
3675      
3676        
3677
3678        <a class="bd-link" href="https://bulma.io/documentation/helpers/palette-helpers/">
3679  
3680
3681  <header class="bd-link-header">
3682    
3683      <span class="icon bd-link-icon">
3684        <i
3685          class="fa-solid fa-swatchbook fa-lg"
3686        ></i>
3687      </span>
3688    
3689
3690    <h4 class="bd-link-title algolia-lvl1">
3691      Color Palette
3692    </h4>
3693  </header>
3694
3695  <div class="bd-link-body">
3696    <div class="bd-link-subtitle">
3697      Use a color's <strong>palette</strong> as text color and/or background
3698    </div>
3699
3700    
3701  </div>
3702</a>
3703
3704      
3705        
3706
3707        <a class="bd-link" href="https://bulma.io/documentation/helpers/spacing-helpers/">
3708  
3709
3710  <header class="bd-link-header">
3711    
3712      <span class="icon bd-link-icon">
3713        <i
3714          class="fa-solid fa-arrows-alt-h fa-lg"
3715        ></i>
3716      </span>
3717    
3718
3719    <h4 class="bd-link-title algolia-lvl1">
3720      Spacing
3721    </h4>
3722  </header>
3723
3724  <div class="bd-link-body">
3725    <div class="bd-link-subtitle">
3726      Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width
3727    </div>
3728
3729    
3730  </div>
3731</a>
3732
3733      
3734        
3735
3736        <a class="bd-link" href="https://bulma.io/documentation/helpers/typography-helpers/">
3737  
3738
3739  <header class="bd-link-header">
3740    
3741      <span class="icon bd-link-icon">
3742        <i
3743          class="fa-solid fa-font fa-lg"
3744        ></i>
3745      </span>
3746    
3747
3748    <h4 class="bd-link-title algolia-lvl1">
3749      Typography
3750    </h4>
3751  </header>
3752
3753  <div class="bd-link-body">
3754    <div class="bd-link-subtitle">
3755      Change the <strong>size</strong>, weight, and other font properties of the text
3756    </div>
3757
3758    
3759  </div>
3760</a>
3761
3762      
3763        
3764
3765        <a class="bd-link" href="https://bulma.io/documentation/helpers/visibility-helpers/">
3766  
3767
3768  <header class="bd-link-header">
3769    
3770      <span class="icon bd-link-icon">
3771        <i
3772          class="fa-regular fa-eye fa-lg"
3773        ></i>
3774      </span>
3775    
3776
3777    <h4 class="bd-link-title algolia-lvl1">
3778      Visibility
3779    </h4>
3780  </header>
3781
3782  <div class="bd-link-body">
3783    <div class="bd-link-subtitle">
3784      <strong>Show/hide content</strong> depending on the width of the viewport
3785    </div>
3786
3787    
3788  </div>
3789</a>
3790
3791      
3792        
3793
3794        <a class="bd-link" href="https://bulma.io/documentation/helpers/flexbox-helpers/">
3795  
3796
3797  <header class="bd-link-header">
3798    
3799      <span class="icon bd-link-icon">
3800        <i
3801          class="fa-regular fa-square fa-lg"
3802        ></i>
3803      </span>
3804    
3805
3806    <h4 class="bd-link-title algolia-lvl1">
3807      Flexbox
3808    </h4>
3809  </header>
3810
3811  <div class="bd-link-body">
3812    <div class="bd-link-subtitle">
3813      Helpers for all <strong>Flexbox</strong> properties
3814    </div>
3815
3816    
3817  </div>
3818</a>
3819
3820      
3821        
3822
3823        <a class="bd-link" href="https://bulma.io/documentation/helpers/other-helpers/">
3824  
3825
3826  <header class="bd-link-header">
3827    
3828      <span class="icon bd-link-icon">
3829        <i
3830          class="fa-solid fa-ellipsis-h fa-lg"
3831        ></i>
3832      </span>
3833    
3834
3835    <h4 class="bd-link-title algolia-lvl1">
3836      Other
3837    </h4>
3838  </header>
3839
3840  <div class="bd-link-body">
3841    <div class="bd-link-subtitle">
3842      Other useful Bulma helpers
3843    </div>
3844
3845    
3846  </div>
3847</a>
3848
3849      
3850    </div>
3851  
3852</div>
3853
3854      
3855
3856        
3857    </div>
3858
3859    
3860
3861
3862
3863
3864
3865
3866
3867
3868
3869
3870
3871
3872<!-- Previous link -->
3873<!-- If first index in list -->
3874
3875
3876<!-- Next link -->
3877<!-- If last index in list -->
3878
3879
3880
3881
3882
3883
3884
3885
3886
3887
3888
3889
3890  
3891
3892
3893  </div>
3894</main>
3895
3896<script type="text/javascript" src="https://bulma.io/assets/javascript/docs.js"></script>
3896
3897
3898
3899    
3900
3901    
3902      <div class="bd-home-section is-support bd-theme-docs has-text-centered">
3903  <h3 class="title">
3904    How to support Bulma
3905  </h3>
3906
3907  <div class="bd-footer-donations columns is-multiline">
3908    <div class="bd-footer-donation column">
3909      <p class="bd-footer-donation-title"><strong>One-time</strong> donation</p>
3910      <div class="bd-footer-donation-action">
3911        <form class="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
3912          <input type="hidden" name="cmd" value="_s-xclick">
3913          <input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
3914          <input
3915            type="image"
3916            src="https://bulma.io/assets/images/paypal-donate.png"
3917            border="0"
3918            name="submit"
3919            alt="PayPal – The safer, easier way to pay online."
3920            height="30"
3921          >
3922          <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
3923        </form>
3924      </div>
3925    </div>
3926
3927    <div class="bd-footer-donation column">
3928      <p class="bd-footer-donation-title"><strong>Browser testing</strong> via</p>
3929      <div class="bd-footer-donation-action">
3930        <a class="bd-hidden-dark" href="https://www.lambdatest.com/" target="_blank"><img src="https://assets.testmuai.com/resources/images/logos/logo.svg" style="vertical-align: middle;margin-left:5px" width="147" height="26" /></a>
3931        <a class="bd-hidden-light" href="https://www.lambdatest.com/" target="_blank"><img src="https://assets.testmuai.com/resources/images/logos/logo.svg" style="vertical-align: middle;margin-left:5px" width="147" height="26" /></a>
3932      </div>
3933    </div>
3934
3935    
3936      <div class="bd-footer-donation column">
3937        <p class="bd-footer-donation-title">Visit our <strong>Sponsors</strong></p>
3938
3939        <div class="bd-footer-donation-items" id="pied"></div>
3940      </div>
3941    
3942
3943    <div class="bd-footer-donation column">
3944      <p class="bd-footer-donation-title"><strong>Monthly</strong> donation</p>
3945      <div class="bd-footer-donation-action">
3946        <a class="button is-patreon"
3947  href="https://bulma.io/become-a-bulma-sponsor/">
3948  <span>
3949    Become a sponsor
3950  </span>
3951</a>
3952
3953      </div>
3954    </div>
3955  </div>
3956</div>
3957
3958      
3958<script src="https://bulma.io/assets/vendor/native.js"></script>
vendor: 1 bytes, line 3958
3958
3959<script>
3960  _native.init('CVAIKK3E', {
3961    targetClass: 'native-js',
3962    fallback: `<a href="https://gum.co/css-44-deluxe" class="native-flex" target="_blank">
3963      <style>
3964        .native-js {
3965          background: linear-gradient(-30deg, #4f38a4, #a244bc 45%, #4f38a4 45%) #4f38a4;
3966        }
3967
3968        .native-details {
3969          color: #FFFFFF !important;
3970        }
3971
3972        .native-details:hover {
3973          color: #FFFFFF !important;
3974        }
3975
3976        .native-cta {
3977          color: #FFFFFF;
3978          background-color: #3bb76d;
3979        }
3980
3981        .native-cta:hover {
3982          color: #native_cta_color_hover;
3983          background-color: #3bb76d;
3984        }
3985      </style>
3986      <div class="native-main">
3987        <img class="native-img" src="https://bulma.io/assets/images/fortyfour-native.png">
3988        <div class="native-details">
3989          <span class="native-company">CSS in 44 minutes</span>
3990          <span class="native-desc">Learn how to build your own webpage from scratch!</span>
3991        </div>
3992      </div>
3993      <span class="native-cta">Buy the book</span>
3994    </a>`,
3995  });
3996</script>
3996
3997
3998<div class="bd-native">
3999<div class="native-js">
4000  <a href="#native_link#" class="native-flex">
4001    <style>
4002      .native-js {
4003        background: linear-gradient(-30deg, #native_bg_color#E5, #native_bg_color#E5 45%, #native_bg_color# 45%) #fff;
4004      }
4005
4006      .native-details {
4007        color: #native_color# !important;
4008      }
4009
4010      .native-details:hover {
4011        color: #native_color_hover# !important;
4012      }
4013
4014      .native-cta {
4015        color: #native_cta_color#;
4016        background-color: #native_cta_bg_color#;
4017      }
4018
4019      .native-cta:hover {
4020        color: #native_cta_color_hover#;
4021        background-color: #native_cta_bg_color_hover#;
4022      }
4023    </style>
4024    <div class="native-main">
4025      <img class="native-img" src="#native_logo#">
4026      <div class="native-details">
4027        <span class="native-company">#native_company#</span>
4028        <span class="native-desc">#native_desc#</span>
4029      </div>
4030    </div>
4031    <span class="button is-medium native-cta">#native_cta#</span>
4032  </a>
4033</div>
4034</div>
4035
4036    
4037
4038    <footer class="bd-footer footer has-text-centered">
4039  <div class="container">
4040    <div class="columns">
4041      <div class="column is-4">
4042        <h4 class="bd-footer-title">
4043  <strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://jgthms.com" property="cc:attributionName" rel="cc:attributionURL" target="_blank">Jeremy Thomas</a>.
4044</h4>
4045
4046<div class="bd-footer-iframe">
4047  <a href="https://twitter.com/jgthms" class="button is-twitter" data-related="jgthms:Creator of Bulma">
4048    <span class="icon"><i class="fab fa-twitter"></i></span>
4049    <span>Follow @jgthms</span>
4050  </a>
4051</div>
4052
4053      </div>
4054      <div class="column is-4">
4055        <h4 class="bd-footer-title">
4056  <strong>Contribute</strong> on GitHub
4057</h4>
4058
4059<div class="bd-footer-iframe is-github">
4060  <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
4061  <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&type=follow&count=true&size=large" frameborder="0" scrolling="0" width="170px" height="30px"></iframe>
4062</div>
4063
4064      </div>
4065      <div class="column is-4">
4066        <h4 class="bd-footer-title">
4067  <strong>Share</strong> on social media
4068</h4>
4069
4070<div class="bd-footer-iframe">
4071  <a href="https://twitter.com/share" class="button is-twitter" data-text="Bulma: Free, open source, and modern CSS framework based on Flexbox" data-url="https://bulma.io" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma">
4072    <span class="icon"><i class="fab fa-twitter"></i></span>
4073    <span>Twitter</span>
4074  </a>
4075
4076  <a class="button is-facebook" href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fbulma.io">
4077    <span class="icon"><i class="fab fa-facebook"></i></span>
4078    <span>Facebook</span>
4079  </a>
4080</div>
4081
4082      </div>
4083    </div>
4084
4085    <div class="bd-footer-tsp has-text-centered">
4086      Source code licensed <a href="https://opensource.org/licenses/mit-license.php" target="_blank">MIT</a>.
4087      Website content licensed <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a>
4088    </div>
4089  </div>
4090</footer>
4091
4092
4093    
4093<script src="https://bulma.io/assets/vendor/clipboard-2.0.11.min.js"></script>
4093
4094    
4094<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
4094
4095    
4095<script type="text/javascript"> docsearch({
4096      apiKey: 'cb93c14bebd90678e789c946d95ea94d',
4097      indexName: 'bulma',
4098      inputSelector: '#algoliaSearch',
4099      debug: false // Set debug to true if you want to inspect the dropdown
4100    });
4101    </script>
4101
4102    
4102<script src="https://bulma.io/assets/javascript/main.js"></script>
4102
4103    <div id="bulma-customizer-app" class="is-hidden-mobile"></div>
4104<div id="scope" class="is-hidden">
4105  <div class="breadcrumb"></div>
4106  <div class="card"></div>
4107  <div class="dropdown"></div>
4108  <div class="menu"></div>
4109  <div class="message"></div>
4110  <div class="modal"></div>
4111  <div class="navbar"></div>
4112  <div class="pagination"></div>
4113  <div class="panel"></div>
4114  <div class="tabs"></div>
4115  <div class="box"></div>
4116  <div class="content"></div>
4117  <div class="delete"></div>
4118  <div class="icon"></div>
4119  <div class="notification"></div>
4120  <div class="progress"></div>
4121  <div class="table"></div>
4122  <div class="tag"></div>
4123  <div class="title"></div>
4124  <input class="input" />
4125  <div class="file"></div>
4126  <div class="columns"></div>
4127  <div class="grid"></div>
4128  <div class="footer"></div>
4129  <div class="hero"></div>
4130  <div class="media"></div>
4131  <div class="section"></div>
4132</div>
4133
4134<link
4135  rel="stylesheet"
4136  href="https://bulma.io/assets/javascript/bulma-customizer/index.css"
4137/>
4138<script
4139  defer
4140  src="https://bulma.io/assets/javascript/bulma-customizer/index.js"
4141></script>
4141
4142
4143    <div id="masterclass" class="masterclass">
4144  <div id="masterclass-background" class="masterclass-background"></div>
4145
4146  <a class="masterclass-body" href="https://cssmasterclass.io/" target="_blank">
4147    <div class="masterclass-content is-hidden-desktop">
4148      <img
4149        src="https://bulma.io/assets/images/masterclass/logo-mobile.png"
4150        height="68"
4151        width="240"
4152      />
4153      <img
4154        src="https://bulma.io/assets/images/masterclass/text-mobile.png"
4155        height="99"
4156        width="228"
4157      />
4158      <div class="shine">
4159        <span>Get started for Free</span>
4160      </div>
4161    </div>
4162
4163    <div class="masterclass-content is-hidden-touch">
4164      <img
4165        src="https://bulma.io/assets/images/masterclass/logo-desktop.png"
4166        height="50"
4167        width="378"
4168      />
4169      <img
4170        src="https://bulma.io/assets/images/masterclass/text-desktop.png"
4171        height="58"
4172        width="571"
4173      />
4174      <div class="shine">
4175        <span>Get started for Free</span>
4176      </div>
4177    </div>
4178  </a>
4179
4180  <button
4181    id="masterclass-close"
4182    class="modal-close is-large"
4183    aria-label="close"
4184  ></button>
4185</div>
4186
4187  
4187<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"23ec37dfba1447e0b5322b3ccd8da860","r":1,"spa":2}' crossorigin="anonymous"></script>
4187
4188</body>
4189</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.