{ "by_id": { "home": { "name": "Home", "icon": "fa-solid fa-house", "path": "/" }, "docs": { "name": "Docs", "long_name": "Documentation", "subtitle": "Everything you need to create a website with Bulma", "color": "primary", "icon": "fa-solid fa-book", "path": "/documentation/" }, "code": { "name": "Templates", "subtitle": "Bulma templates to get started", "color": "link", "icon": "fa-solid fa-code", "path": "/bulma-templates/" }, "blog": { "name": "Bulma Blog", "subtitle": "Stay updated with new features", "color": "rss", "icon": "fa-solid fa-rss", "path": "/blog/" }, "expo": { "name": "Expo", "subtitle": "Official Bulma showcase", "icon": "fa-solid fa-star", "color": "expo", "path": "/expo/" }, "love": { "name": "Love", "subtitle": "Fans of Bulma around the world", "color": "love", "icon": "fa-solid fa-heart", "path": "/love/" }, "github": { "name": "GitHub", "subtitle": "Open Source on GitHub", "icon_only": true, "color": "github", "icon": "fa-brands fa-github-alt fa-lg", "href": "https://github.com/jgthms/bulma" }, "twitter": { "name": "Twitter", "subtitle": "Follow me on Twitter", "icon_only": true, "color": "twitter", "icon": "fa-brands fa-twitter fa-lg", "href": "https://twitter.com/jgthms" }, "sponsor": { "name": "Sponsor", "subtitle": "Sponsor Bulma and Open Source via Patreon and GitHub", "color": "patreon", "icon": "fa-brands fa-patreon", "path": "/become-a-bulma-sponsor/" }, "brand": { "name": "Bulma Brand", "subtitle": "The official Bulma logos", "color": "primary", "icon": "fa-solid fa-medal", "path": "/brand/" }, "backers": { "id": "backers", "name": "Backers", "title": "Backers", "color": "patreon", "icon": "fa-solid fa-hand-holding-heart", "path": "/backers/", "subtitle": "Everyone who is supporting Bulma via Patreon and GitHub", "description": "Everyone who is supporting Bulma" }, "bootstrap": { "name": "Coming from Bootstrap", "subtitle": "See how Bulma is an alternative to Bootstrap", "icon": "fa-solid fa-exchange-alt", "color": "bootstrap", "path": "/alternative-to-bootstrap/" }, "extensions": { "name": "Bulma Extensions", "title": "Extensions", "subtitle": "Side projects to enhance Bulma", "icon": "fa-solid fa-plug", "color": "extensions", "path": "/extensions/" }, "made-with-bulma": { "name": "Made with Bulma", "title": "Badge", "subtitle": "The official community badge", "icon": "fa-solid fa-certificate", "color": "warning", "path": "/made-with-bulma/" }, "patreon-backers": { "name": "Patreon and GitHub backers", "subtitle": "Everyone who is supporting Bulma", "icon": "fa-solid fa-patreon", "color": "patreon", "path": "/backers/" }, "start": { "name": "Start", "subtitle": "An overview of what Bulma as a framework is all about", "color": "start", "icon": "fa-solid fa-arrow-right", "path": "/documentation/start/" }, "start-overview": { "name": "Overview", "subtitle": "You only need 1 CSS file to use Bulma", "color": "start", "icon": "fa-regular fa-eye", "path": "/documentation/start/overview/" }, "start-installation": { "name": "Installation", "subtitle": "Create your own theme with a simple set of variables", "color": "start", "icon": "fa-solid fa-download", "path": "/documentation/start/installation/" }, "start-alternative-versions": { "name": "Alternative Versions", "subtitle": "Use one of the pre-built alternative versions of Bulma", "color": "start", "icon": "fa-solid fa-download", "path": "/documentation/start/alternative-versions/" }, "start-syntax": { "name": "Syntax", "subtitle": "How to use Bulma components and their alternative styles", "color": "start", "icon": "fa-solid fa-code", "path": "/documentation/start/syntax/" }, "start-modular": { "name": "Modularity", "subtitle": "Just import what you need", "color": "start", "icon": "fa-solid fa-cubes", "path": "/documentation/start/modular/" }, "start-responsiveness": { "name": "Responsiveness", "subtitle": "Bulma is a mobile-first framework", "color": "start", "icon": "fa-solid fa-arrows-left-right", "path": "/documentation/start/responsiveness/" }, "start-migrating": { "name": "Migrating to v1", "subtitle": "How to migrate to Bulma v1", "color": "start", "icon": "fa-solid fa-arrows-left-right", "path": "/documentation/start/migrating-to-v1/" }, "features": { "name": "Features", "subtitle": "What makes Bulma special", "color": "danger", "icon": "fa-solid fa-wand-magic-sparkles", "path": "/documentation/features/" }, "features-auto-color": { "name": "Automatic Color", "subtitle": "Change the color of your text automatically based on the background", "color": "danger", "icon": "fa-solid fa-droplet", "path": "/documentation/features/auto-color/" }, "features-color-palettes": { "name": "Color Palettes", "subtitle": "Input 1 color, Receive dozens of different shades for that color", "color": "danger", "icon": "fa-solid fa-swatchbook", "path": "/documentation/features/color-palettes/" }, "features-css-variables": { "name": "CSS Variables", "subtitle": "Customizing with CSS only", "color": "danger", "icon": "fa-brands fa-css3", "path": "/documentation/features/css-variables/" }, "features-dark-mode": { "name": "Dark Mode", "subtitle": "Bulma comes with an automatic Dark mode", "color": "danger", "icon": "fa-solid fa-moon", "path": "/documentation/features/dark-mode/" }, "features-skeletons": { "name": "Skeletons", "subtitle": "Transform almost any Bulma component into a skeleton loader, or use one of the pre-built utility elements", "color": "danger", "icon": "fa-solid fa-swatchbook", "path": "/documentation/features/skeletons/" }, "features-smart-columns": { "name": "Smart Columns", "subtitle": "The simplest column system", "color": "danger", "icon": "fa-solid fa-chart-simple fa-flip-vertical", "path": "/documentation/features/smart-columns/" }, "features-smart-grid": { "name": "Smart Grid", "subtitle": "A responsive 2D CSS Grid", "color": "danger", "icon": "fa-solid fa-grip", "path": "/documentation/features/smart-grid/" }, "features-themes": { "name": "Themes", "subtitle": "How Bulma styles its components with CSS variables", "color": "danger", "icon": "fa-solid fa-palette", "path": "/documentation/features/themes/" }, "sass": { "name": "Sass Utilities", "subtitle": "Sass tools used by Bulma and available for you", "color": "primary", "icon": "fa-brands fa-sass", "path": "/documentation/sass/" }, "sass-extends": { "name": "Extends", "subtitle": "Sass extends to keep your CSS code DRY", "color": "sass", "icon": "fa-solid fa-percentage", "path": "/documentation/sass/extends/" }, "sass-form-control-mixins": { "name": "Form Control mixins", "subtitle": "Mixins for Bulma's buttons and form controls", "color": "sass", "icon": "fa-regular fa-square-check", "path": "/documentation/sass/form-control-mixins/" }, "sass-functions": { "name": "Functions", "subtitle": "Utility functions to calculate colors and other values", "color": "orange", "icon": "fa-solid fa-code", "path": "/documentation/sass/functions/" }, "sass-mixins": { "name": "Mixins", "subtitle": "Utility mixins for custom elements and other CSS helpers", "color": "sass", "icon": "fa-solid fa-at", "path": "/documentation/sass/mixins/" }, "sass-responsive-mixins": { "name": "Responsive mixins", "subtitle": "Mixins that allows you to define different styles for each screen size", "color": "sass", "icon": "fa-solid fa-arrows-left-right", "path": "/documentation/sass/responsive-mixins/" }, "customize": { "name": "Customize", "subtitle": "Create your own theme with a simple set of variables", "color": "sass", "icon": "fa-solid fa-paint-brush", "path": "/documentation/customize/" }, "customize-concepts": { "name": "Concepts", "subtitle": "What makes Bulma customizable", "color": "info", "icon": "fa-solid fa-lightbulb", "path": "/documentation/customize/concepts/" }, "customize-with-sass": { "name": "With Sass", "subtitle": "Customize Bulma with Sass variables", "color": "sass", "icon": "fa-brands fa-sass", "path": "/documentation/customize/with-sass/" }, "customize-with-css-variables": { "name": "With CSS Variables", "subtitle": "See how Bulma uses Sass variables to allow easy customization", "color": "grey", "icon": "fa-brands fa-css3", "path": "/documentation/customize/with-css-variables/" }, "customize-sass-list": { "name": "List of Sass variables", "subtitle": "All Sass variables defined by Bulma", "color": "grey", "icon": "fa-solid fa-list", "path": "/documentation/customize/list-of-sass-variables/" }, "library": { "name": "CSS Library", "subtitle": "The core of the Bulma framework", "color": "link", "icon": "fa-solid fa-cubes", "path": "/documentation/library/" }, "columns": { "name": "Columns", "subtitle": "The power of Flexbox in a simple interface", "color": "link", "icon": "fa-solid fa-chart-simple fa-flip-vertical", "path": "/documentation/columns/" }, "columns-basics": { "name": "Basics", "subtitle": "A simple way to build responsive columns", "color": "link", "icon": "fa-solid fa-columns", "path": "/documentation/columns/basics/" }, "columns-sizes": { "name": "Sizes", "subtitle": "Define the size of each column individually", "color": "success", "icon": "fa-solid fa-up-right-and-down-left-from-center", "path": "/documentation/columns/sizes/" }, "columns-responsiveness": { "name": "Responsiveness", "subtitle": "Handle different column layouts for each breakpoint", "color": "primary", "icon": "fa-solid fa-arrows-left-right", "path": "/documentation/columns/responsiveness/" }, "columns-nesting": { "name": "Nesting", "subtitle": "A simple way to build responsive columns", "color": "danger", "icon": "fa-solid fa-sitemap", "path": "/documentation/columns/nesting/" }, "columns-gap": { "name": "Gap", "subtitle": "Customize the gap between the columns", "color": "info", "icon": "fa-solid fa-arrows-left-right-to-line", "path": "/documentation/columns/gap/" }, "columns-options": { "name": "Options", "subtitle": "Design different types of column layouts", "color": "grey", "icon": "fa-solid fa-cogs", "path": "/documentation/columns/options/" }, "grid": { "name": "Grid", "subtitle": "A 2 dimensional layout component", "icon": "fa-solid fa-grip", "path": "/documentation/grid/" }, "grid-smart": { "name": "Smart Grid", "subtitle": "A smart 2D grid with flexible columns", "icon": "fa-solid fa-lightbulb", "path": "/documentation/grid/smart-grid/" }, "grid-fixed": { "name": "Fixed Grid", "subtitle": "A customizable 2D fixed grid", "icon": "fa-solid fa-grip", "path": "/documentation/grid/fixed-grid/" }, "grid-cells": { "name": "Grid Cells", "subtitle": "Adjust the width and height of each individual cell", "icon": "fa-solid fa-square", "path": "/documentation/grid/grid-cells/" }, "grid-playground": { "name": "Playground", "subtitle": "Try out the Bulma 2D Grid", "icon": "fa-solid fa-code", "path": "/documentation/grid/playground/" }, "layout": { "name": "Layout", "subtitle": "Design the structure of your webpage with these CSS classes", "color": "success", "icon": "fa-solid fa-border-none", "path": "/documentation/layout/" }, "layout-container": { "name": "Container", "subtitle": "A simple container to center your content horizontally", "path": "/documentation/layout/container/", "icon": "fa-solid fa-arrows-alt-h" }, "layout-level": { "name": "Level", "subtitle": "A multi-purpose horizontal level, which can contain almost any other element", "path": "/documentation/layout/level/", "icon": "fa-solid fa-ruler-horizontal" }, "layout-media": { "name": "Media Object", "subtitle": "The famous media object prevalent in social media interfaces, but useful in any context", "path": "/documentation/layout/media-object/", "icon": "fa-solid fa-th-list" }, "layout-hero": { "name": "Hero", "subtitle": "An imposing hero banner to showcase something", "path": "/documentation/layout/hero/", "icon": "fa-solid fa-star" }, "layout-section": { "name": "Section", "subtitle": "A simple container to divide your page into sections, like the one you're currently reading", "path": "/documentation/layout/section/", "icon": "fa-solid fa-square" }, "layout-footer": { "name": "Footer", "subtitle": "A simple responsive footer which can include anything: lists, headings, columns, icons, buttons, etc.", "path": "/documentation/layout/footer/", "icon": "fa-solid fa-window-minimize" }, "form": { "name": "Form", "subtitle": "The indispensable form controls, designed for maximum clarity", "color": "link", "icon": "fa-solid fa-align-left fa-flip-vertical", "path": "/documentation/form/" }, "form-general": { "name": "General", "subtitle": "All generic form controls, designed for consistency", "color": "link", "icon": "fa-solid fa-keyboard", "path": "/documentation/form/general/" }, "form-input": { "name": "Input", "subtitle": "The text input and its variations", "color": "link", "icon": "fa-solid fa-minus", "path": "/documentation/form/input/" }, "form-textarea": { "name": "Textarea", "subtitle": "The multiline textarea and its variations", "color": "link", "icon": "fa-solid fa-square", "path": "/documentation/form/textarea/" }, "form-select": { "name": "Select", "subtitle": "The browser built-in select dropdown, styled accordingly", "color": "link", "icon": "fa-solid fa-mouse-pointer", "path": "/documentation/form/select/" }, "form-checkbox": { "name": "Checkbox", "subtitle": "The 2-state checkbox in its native format", "color": "link", "icon": "fa-solid fa-check-square", "path": "/documentation/form/checkbox/" }, "form-radio": { "name": "Radio", "subtitle": "The mutually exclusive radio buttons in their native format", "color": "link", "icon": "fa-solid fa-dot-circle", "path": "/documentation/form/radio/" }, "form-file": { "name": "File", "subtitle": "A custom file upload input, without JavaScript", "color": "link", "icon": "fa-solid fa-cloud-upload-alt", "path": "/documentation/form/file/" }, "elements": { "name": "Elements", "subtitle": "Essential interface elements that only require a single CSS class", "color": "orange", "icon": "fa-solid fa-cube", "path": "/documentation/elements/" }, "elements-block": { "name": "Block", "subtitle": "Bulma's most basic spacer block", "color": "grey", "icon": "fa-solid fa-arrows-alt-v", "path": "/documentation/elements/block/" }, "elements-box": { "name": "Box", "subtitle": "A white box to contain other elements", "color": "grey", "icon": "fa-solid fa-square", "path": "/documentation/elements/box/" }, "elements-button": { "name": "Button", "subtitle": "The classic button, in different colors, sizes, and states", "color": "success", "icon": "fa-solid fa-hand-pointer", "path": "/documentation/elements/button/" }, "elements-content": { "name": "Content", "subtitle": "A single class to handle WYSIWYG generated content, where only HTML tags are available", "color": "primary", "icon": "fa-solid fa-align-left", "path": "/documentation/elements/content/" }, "elements-delete": { "name": "Delete", "subtitle": "A versatile delete cross", "color": "danger", "icon": "fa-solid fa-times-circle", "path": "/documentation/elements/delete/" }, "elements-icon": { "name": "Icon", "subtitle": "Compatible with all icon font libraries, including Font Awesome 5", "icon": "fa-solid fa-font-awesome", "path": "/documentation/elements/icon/" }, "elements-image": { "name": "Image", "subtitle": "A container for responsive images", "color": "sass", "icon": "fa-solid fa-image", "path": "/documentation/elements/image/" }, "elements-notification": { "name": "Notification", "subtitle": "Bold notification blocks, to alert your users of something", "color": "orange", "icon": "fa-solid fa-exclamation-triangle", "path": "/documentation/elements/notification/" }, "elements-progress": { "name": "Progress bars", "subtitle": "Native HTML progress bars", "color": "warning", "icon": "fa-solid fa-spinner", "path": "/documentation/elements/progress/" }, "elements-table": { "name": "Table", "subtitle": "The inevitable HTML table, with special case cells", "color": "info", "icon": "fa-solid fa-table", "path": "/documentation/elements/table/" }, "elements-tag": { "name": "Tag", "subtitle": "Small tag labels to insert anywhere", "color": "success", "icon": "fa-solid fa-tag", "path": "/documentation/elements/tag/" }, "elements-title": { "name": "Title", "subtitle": "Simple headings to add depth to your page", "color": "black", "icon": "fa-solid fa-heading", "path": "/documentation/elements/title/" }, "components": { "name": "Components", "subtitle": "Advanced multi-part components with lots of possibilities", "color": "danger", "icon": "fa-solid fa-cubes", "path": "/documentation/components/" }, "components-breadcrumb": { "name": "Breadcrumb", "subtitle": "A simple breadcrumb component to improve your navigation experience", "color": "star", "icon": "fa-solid fa-ellipsis-h", "path": "/documentation/components/breadcrumb/" }, "components-card": { "name": "Card", "subtitle": "An all-around flexible and composable component", "color": "success", "icon": "fa-solid fa-id-card", "path": "/documentation/components/card/" }, "components-dropdown": { "name": "Dropdown", "subtitle": "An interactive dropdown menu for discoverable content", "color": "success", "icon": "fa-solid fa-angle-down", "path": "/documentation/components/dropdown/" }, "components-menu": { "name": "Menu", "subtitle": "A simple menu, for any type of vertical navigation", "icon": "fa-solid fa-bars", "path": "/documentation/components/menu/" }, "components-message": { "name": "Message", "subtitle": "Colored message blocks, to emphasize part of your page", "color": "info", "icon": "fa-solid fa-window-maximize", "path": "/documentation/components/message/" }, "components-modal": { "name": "Modal", "subtitle": "A classic modal overlay, in which you can include any content you want", "color": "danger", "icon": "fa-solid fa-clone", "path": "/documentation/components/modal/" }, "components-navbar": { "name": "Navbar", "subtitle": "A responsive horizontal navbar that can support images, links, buttons, and dropdowns", "color": "primary", "icon": "fa-solid fa-minus", "path": "/documentation/components/navbar/" }, "components-pagination": { "name": "Pagination", "subtitle": "A responsive, usable, and flexible pagination", "color": "orange", "icon": "fa-solid fa-caret-square-right", "path": "/documentation/components/pagination/" }, "components-panel": { "name": "Panel", "subtitle": "A composable panel, for compact controls", "color": "grey-dark", "icon": "fa-solid fa-list-alt", "path": "/documentation/components/panel/" }, "components-tabs": { "name": "Tabs", "subtitle": "Simple responsive horizontal navigation tabs, with different styles", "color": "sass", "icon": "fa-solid fa-folder", "path": "/documentation/components/tabs/" }, "skeletons": { "name": "Skeletons", "subtitle": "Design the structure of your webpage with these CSS classes", "color": "success", "icon": "fa-solid fa-border-none", "path": "/documentation/skeletons/" }, "helpers": { "name": "Helpers", "subtitle": "Apply helper classes to almost any element, in order to alter their style", "color": "success", "icon": "fa-brands fa-css3", "path": "/documentation/helpers/" }, "helpers-color": { "name": "Color", "subtitle": "Change the color of the text and/or background", "color": "success", "icon": "fa-solid fa-tint", "path": "/documentation/helpers/color-helpers/" }, "helpers-palette": { "name": "Color Palette", "subtitle": "Use a color's palette as text color and/or background", "color": "success", "icon": "fa-solid fa-swatchbook", "path": "/documentation/helpers/palette-helpers/" }, "helpers-css-grid": { "name": "CSS Grid", "subtitle": "Change the color of the text and/or background", "color": "success", "icon": "fa-solid fa-grip", "path": "/documentation/helpers/css-grid-helpers/" }, "helpers-flexbox": { "name": "Flexbox", "subtitle": "Helpers for all Flexbox properties", "color": "success", "icon": "fa-solid fa-chart-simple fa-flip-vertical", "path": "/documentation/helpers/flexbox-helpers/" }, "helpers-positioning": { "name": "Positioning", "subtitle": "Change the size and color of the text for one or multiple viewport width", "color": "success-dark", "icon": "fa-solid fa-arrows-up-down-left-right", "path": "/documentation/helpers/spacing-helpers/" }, "helpers-sizing": { "name": "Sizing", "subtitle": "Change the size and color of the text for one or multiple viewport width", "color": "success-dark", "icon": "fa-solid fa-up-right-and-down-left-from-center", "path": "/documentation/helpers/spacing-helpers/" }, "helpers-spacing": { "name": "Spacing", "subtitle": "Change the size and color of the text for one or multiple viewport width", "color": "success-dark", "icon": "fa-solid fa-arrows-left-right-to-line", "path": "/documentation/helpers/spacing-helpers/" }, "helpers-typography": { "name": "Typography", "subtitle": "Change the size, weight, and other font properties of the text", "color": "success", "icon": "fa-solid fa-font", "path": "/documentation/helpers/typography-helpers/" }, "helpers-visibility": { "name": "Visibility", "subtitle": "Show/hide content depending on the width of the viewport", "color": "success", "icon": "fa-regular fa-eye", "path": "/documentation/helpers/visibility-helpers/" }, "helpers-other": { "name": "Other", "subtitle": "Other useful Bulma helpers", "color": "success", "icon": "fa-solid fa-ellipsis-h", "path": "/documentation/helpers/other-helpers/" } }, "navbar": ["docs", "expo", "love", "sponsor"], "navbar_icons": ["github", "twitter"], "navbar_more": ["made-with-bulma", "backers", "brand", "extensions"], "category_ids": [ "start", "features", "sass", "customize", "library", "helpers" ], "pagination_category_ids": [ "start", "features", "sass", "customize", "elements", "components", "form", "columns", "grid", "layout", "helpers" ], "categories": { "start": [ "start-overview", "start-installation", "start-alternative-versions", "start-syntax", "start-modular", "start-responsiveness", "start-migrating" ], "features": [ "features-css-variables", "features-themes", "features-dark-mode", "features-color-palettes", "features-skeletons" ], "sass": [ "sass-mixins", "sass-responsive-mixins", "sass-form-control-mixins", "sass-extends" ], "customize": [ "customize-concepts", "customize-with-sass", "customize-with-css-variables", "customize-sass-list" ], "library": ["columns", "grid", "elements", "components", "form", "layout"], "columns": [ "columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options" ], "grid": ["grid-smart", "grid-fixed", "grid-cells", "grid-playground"], "elements": [ "elements-block", "elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title" ], "components": [ "components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs" ], "form": [ "form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file" ], "layout": [ "layout-container", "layout-hero", "layout-section", "layout-level", "layout-media", "layout-footer" ], "helpers": [ "helpers-color", "helpers-palette", "helpers-positioning", "helpers-spacing", "helpers-sizing", "helpers-typography", "helpers-visibility", "helpers-flexbox", "helpers-other" ] } }