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.