2017-09-18 22:43:08 +00:00
<!DOCTYPE html>
< html lang = "en" class = "route-documentation" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "description" content = "Bulma v0.5.3 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free." >
2017-10-09 08:10:12 +00:00
< title > Progress Bar | Bulma v0.5.3: a modern CSS framework based on Flexbox< / title >
2017-09-18 22:43:08 +00:00
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
< link rel = "stylesheet" href = "http://bulma.io/versions/0.5.3/css/bulma-docs.css?v=20170918-2343" >
< link rel = "canonical" href = "http://bulma.io/versions/0.5.3/documentation/elements/progress/" >
< link rel = "alternate" type = "application/rss+xml" title = "Bulma v0.5.3: a modern CSS framework based on Flexbox" href = "http://bulma.io/versions/0.5.3/feed.xml" >
< meta property = "og:url" content = "http://bulma.io/versions/0.5.3" >
< meta property = "og:type" content = "website" >
< meta property = "og:title" content = "Bulma v0.5.3: a modern CSS framework based on Flexbox" >
< meta property = "og:image" content = "http://bulma.io/versions/0.5.3/images/bulma-banner.png" >
< meta property = "og:image:type" content = "image/png" >
< meta property = "og:image:width" content = "1200" >
< meta property = "og:image:height" content = "630" >
< meta property = "og:description" content = "Bulma v0.5.3 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free." >
< meta name = "twitter:card" content = "summary_large_image" >
< meta name = "twitter:site" content = "@jgthms" >
< meta name = "twitter:creator" content = "@jgthms" >
< meta name = "twitter:title" content = "Bulma v0.5.3: a modern CSS framework based on Flexbox" >
< meta name = "twitter:image" content = "http://bulma.io/versions/0.5.3/images/bulma-banner.png" >
< meta name = "twitter:description" content = "Bulma v0.5.3 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free." >
< link rel = "apple-touch-icon" sizes = "180x180" href = "http://bulma.io/versions/0.5.3/favicons/apple-touch-icon.png?v=201701041855" >
< link rel = "icon" type = "image/png" href = "http://bulma.io/versions/0.5.3/favicons/favicon-32x32.png?v=201701041855" sizes = "32x32" >
< link rel = "icon" type = "image/png" href = "http://bulma.io/versions/0.5.3/favicons/favicon-16x16.png?v=201701041855" sizes = "16x16" >
< link rel = "manifest" href = "http://bulma.io/versions/0.5.3/favicons/manifest.json?v=201701041855" >
< link rel = "mask-icon" href = "http://bulma.io/versions/0.5.3/favicons/safari-pinned-tab.svg?v=201701041855" color = "#00d1b2" >
< link rel = "shortcut icon" href = "http://bulma.io/versions/0.5.3/favicons/favicon.ico?v=201701041855" >
< meta name = "msapplication-config" content = "http://bulma.io/versions/0.5.3/favicons/browserconfig.xml?v=201701041855" >
< meta name = "theme-color" content = "#00d1b2" >
< / head >
< body class = "layout-documentation page-elements" >
< div class = "notification is-info" style = "border-radius: 0; margin-bottom: 0;" >
< p >
You are viewing the deprecated < strong > 0.5.3< / strong > version of the website.
< a href = "/" > Click here to view the latest version< / a >
< / p >
< / div >
< div class = "container" >
< nav class = "navbar " >
< div class = "navbar-brand" >
< a class = "navbar-item" href = "http://bulma.io/versions/0.5.3" >
< img src = "http://bulma.io/versions/0.5.3/images/bulma-logo.png" alt = "Bulma v0.5.3: a modern CSS framework based on Flexbox" width = "112" height = "28" >
< / a >
< a class = "navbar-item is-hidden-desktop" href = "https://github.com/jgthms/bulma" target = "_blank" >
< span class = "icon" style = "color: #333;" >
< i class = "fa fa-lg fa-github" > < / i >
< / span >
< / a >
< a class = "navbar-item is-hidden-desktop" href = "https://twitter.com/jgthms" target = "_blank" >
< span class = "icon" style = "color: #55acee;" >
< i class = "fa fa-lg fa-twitter" > < / i >
< / span >
< / a >
< div class = "navbar-burger burger" data-target = "navMenuDocumentation" >
< span > < / span >
< span > < / span >
< span > < / span >
< / div >
< / div >
< div id = "navMenuDocumentation" class = "navbar-menu" >
< div class = "navbar-start" >
< div class = "navbar-item has-dropdown is-hoverable" >
< a class = "navbar-link is-active" href = "/versions/0.5.3/documentation/overview/start/" >
Docs
< / a >
< div class = "navbar-dropdown " >
< a class = "navbar-item " href = "/versions/0.5.3/documentation/overview/start/" >
Overview
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.5.3/documentation/modifiers/syntax/" >
Modifiers
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.5.3/documentation/columns/basics/" >
Columns
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.5.3/documentation/layout/container/" >
Layout
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.5.3/documentation/form/general/" >
Form
< / a >
< a class = "navbar-item is-active" href = "http://bulma.io/versions/0.5.3/documentation/elements/box/" >
Elements
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.5.3/documentation/components/breadcrumb/" >
Components
< / a >
< hr class = "navbar-divider" >
< div class = "navbar-item" >
< div >
< p class = "is-size-6-desktop" >
< strong class = "has-text-info" > 0.5.3< / strong >
< / p >
< small >
< a class = "bd-view-all-versions" href = "/versions" > View all versions< / a >
< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "navbar-item has-dropdown is-hoverable" >
< a class = "navbar-link " href = "http://bulma.io/versions/0.5.3/blog/" >
Blog
< / a >
< div id = "blogDropdown" class = "navbar-dropdown " data-style = "width: 18rem;" >
< a class = "navbar-item" href = "/2017/08/03/list-of-tags/" >
< div class = "navbar-content" >
< p >
< small class = "has-text-info" > 03 Aug 2017< / small >
< / p >
< p > New feature: list of tags< / p >
< / div >
< / a >
< a class = "navbar-item" href = "/2017/08/01/bulma-bootstrap-comparison/" >
< div class = "navbar-content" >
< p >
< small class = "has-text-info" > 01 Aug 2017< / small >
< / p >
< p > Bulma / Bootstrap comparison< / p >
< / div >
< / a >
< a class = "navbar-item" href = "/2017/07/24/access-previous-bulma-versions/" >
< div class = "navbar-content" >
< p >
< small class = "has-text-info" > 24 Jul 2017< / small >
< / p >
< p > Access previous Bulma versions< / p >
< / div >
< / a >
< a class = "navbar-item" href = "http://bulma.io/versions/0.5.3/blog/" >
More posts
< / a >
< hr class = "navbar-divider" >
< div class = "navbar-item" >
< div class = "navbar-content" >
< div class = "level is-mobile" >
< div class = "level-left" >
< div class = "level-item" >
< strong > Stay up to date!< / strong >
< / div >
< / div >
< div class = "level-right" >
< div class = "level-item" >
< a class = "button bd-is-rss is-small" href = "http://bulma.io/versions/0.5.3/atom.xml" >
< span class = "icon is-small" >
< i class = "fa fa-rss" > < / i >
< / span >
< span > Subscribe< / span >
< / a >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "navbar-item has-dropdown is-hoverable" >
< div class = "navbar-link" >
More
< / div >
< div id = "moreDropdown" class = "navbar-dropdown " >
< a class = "navbar-item " href = "http://bulma.io/versions/0.5.3/extensions/" >
< div class = "level is-mobile" >
< div class = "level-left" >
< div class = "level-item" >
< p >
< strong > Extensions< / strong >
< br >
< small > Side projects to enhance Bulma< / small >
< / p >
< / div >
< / div >
< div class = "level-right" >
< div class = "level-item" >
< span class = "icon has-text-info" >
< i class = "fa fa-plug" > < / i >
< / span >
< / div >
< / div >
< / div >
< / a >
< / div >
< / div >
< a class = "navbar-item " href = "http://bulma.io/versions/0.5.3/expo/" >
< span class = "bd-emoji" > ⭐️< / span >
Expo
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.5.3/love/" >
< span class = "bd-emoji" > ❤️< / span >
Love
< / a >
< / div >
< div class = "navbar-end" >
< a class = "navbar-item is-hidden-desktop-only" href = "https://github.com/jgthms/bulma" target = "_blank" >
< span class = "icon" style = "color: #333;" >
< i class = "fa fa-lg fa-github" > < / i >
< / span >
< / a >
< a class = "navbar-item is-hidden-desktop-only" href = "https://twitter.com/jgthms" target = "_blank" >
< span class = "icon" style = "color: #55acee;" >
< i class = "fa fa-lg fa-twitter" > < / i >
< / span >
< / a >
< div class = "navbar-item" >
< div class = "field is-grouped" >
< p class = "control" >
< a class = "bd-tw-button button"
data-social-network="Twitter"
data-social-action="tweet"
data-social-target="http://bulma.io/versions/0.5.3"
target="_blank"
href="https://twitter.com/intent/tweet?text=Bulma v0.5.3: a modern CSS framework based on Flexbox& hashtags=bulmaio& url=http://bulma.io/versions/0.5.3& via=jgthms">
< span class = "icon" >
< i class = "fa fa-twitter" > < / i >
< / span >
< span >
Tweet
< / span >
< / a >
< / p >
< p class = "control" >
< a class = "button is-primary" href = "https://github.com/jgthms/bulma/archive/0.5.3.zip" >
< span class = "icon" >
< i class = "fa fa-download" > < / i >
< / span >
< span > Download< / span >
< / a >
< / p >
< / div >
< / div >
< / div >
< / div >
< / nav >
< / div >
< section class = "hero is-primary" >
< div class = "hero-body" >
< div class = "container" >
< div class = "columns is-vcentered" >
< div class = "column" >
< p class = "title" >
Documentation
< / p >
< p class = "subtitle" >
Everything you need to < strong > create a website< / strong > with Bulma
< / p >
< / div >
< div class = "column is-narrow" >
< div id = "carboncontainer" >
< div id = "carbon" class = "box" >
< script >
var _0xa6d2 = [
'\x73\x63\x72\x69\x70\x74',
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
'\x73\x70\x6c\x69\x74',
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
];
(function (_0x2fd559, _0x28dd75) {
var _0x78c626 = function (_0x497400) {
while (--_0x497400) {
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
}
};
_0x78c626(++_0x28dd75);
}(_0xa6d2, 0x125));
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
_0x8ed41 = _0x8ed41 - 0x0;
var _0x546dea = _0xa6d2[_0x8ed41];
return _0x546dea;
};
function __fb(_0x5ea579) {
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
while (!![]) {
switch (_0x3142de[_0x58dc19++]) {
case '\x30':
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
continue;
case '\x31':
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
continue;
case '\x32':
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
continue;
case '\x33':
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
continue;
case '\x34':
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
continue;
case '\x35':
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
continue;
}
break;
}
}
< / script >
< script async src = "//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id = "_carbonads_js" onerror = "__fb(this)" > < / script >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "hero-foot" >
< div class = "container" >
< nav class = "tabs is-boxed" >
< ul >
< li >
< a href = "/versions/0.5.3/documentation/overview/start/" > Overview< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.5.3/documentation/modifiers/syntax" > Modifiers< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.5.3/documentation/columns/basics" > Columns< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.5.3/documentation/layout/container/" > Layout< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.5.3/documentation/form/general" > Form< / a >
< / li >
< li class = "is-active" >
< a href = "http://bulma.io/versions/0.5.3/documentation/elements/box/" > Elements< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.5.3/documentation/components/breadcrumb/" > Components< / a >
< / li >
< / ul >
< / div >
< / div >
< / nav >
< / section >
< nav class = "navbar has-shadow" >
< div class = "container" >
< div class = "navbar-tabs" >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.3/documentation/elements/box/" >
Box
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.3/documentation/elements/button/" >
Button
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.3/documentation/elements/content/" >
Content
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.3/documentation/elements/delete/" >
Delete
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.3/documentation/elements/icon/" >
Icon
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.3/documentation/elements/image/" >
Image
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.3/documentation/elements/notification/" >
Notification
< / a >
< a class = "navbar-item is-tab is-active" href = "http://bulma.io/versions/0.5.3/documentation/elements/progress/" >
Progress
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.3/documentation/elements/table/" >
Table
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.3/documentation/elements/tag/" >
Tag
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.3/documentation/elements/title/" >
Title
< / a >
< / div >
< / div >
< / nav >
< section class = "section" >
< div class = "container" >
< h1 class = "title" > Progress bars< / h1 >
< h2 class = "subtitle" >
Native HTML < strong > progress< / strong > bars
< / h2 >
< div id = "meta" class = "field is-grouped is-grouped-multiline" >
< div class = "control" >
< div class = "tags has-addons" >
< span class = "tag" > Colors< / span >
< a class = "tag is-success" href = "#colors" > Yes< / a >
< / div >
< / div >
< div class = "control" >
< div class = "tags has-addons" >
< span class = "tag" > Sizes< / span >
< a class = "tag is-success" href = "#sizes" > Yes< / a >
< / div >
< / div >
< div class = "control" >
< div class = "tags has-addons" >
< span class = "tag" > Variables< / span >
< a class = "tag is-success" href = "#variables" > Yes< / a >
< / div >
< / div >
< / div >
< hr >
< div class = "
bd-snippet
bd-is-vertical
bd-is-1
">
< div class = "bd-snippet-preview" >
< progress class = "progress" value = "15" max = "100" > 15%< / progress >
< / div >
< div class = "bd-snippet-code highlight-full" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < progress< / span > < span class = "na" > class=< / span > < span class = "s" > "progress"< / span > < span class = "na" > value=< / span > < span class = "s" > "15"< / span > < span class = "na" > max=< / span > < span class = "s" > "100"< / span > < span class = "nt" > > < / span > 15%< span class = "nt" > < /progress> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
< hr style = "margin-bottom: 0;" >
< h3 id = "colors" class = "title is-4 is-spaced bd-anchor-title" >
Colors
< a class = "bd-anchor-link" href = "#colors" >
#
< / a >
< / h3 >
< div class = "
bd-snippet
bd-is-vertical
bd-is-1
">
< div class = "bd-snippet-preview" >
< progress class = "progress is-primary" value = "30" max = "100" > 30%< / progress >
< progress class = "progress is-info" value = "45" max = "100" > 45%< / progress >
< progress class = "progress is-success" value = "60" max = "100" > 60%< / progress >
< progress class = "progress is-warning" value = "75" max = "100" > 75%< / progress >
< progress class = "progress is-danger" value = "90" max = "100" > 90%< / progress >
< / div >
< div class = "bd-snippet-code highlight-full" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < progress< / span > < span class = "na" > class=< / span > < span class = "s" > "progress is-primary"< / span > < span class = "na" > value=< / span > < span class = "s" > "30"< / span > < span class = "na" > max=< / span > < span class = "s" > "100"< / span > < span class = "nt" > > < / span > 30%< span class = "nt" > < /progress> < / span >
< span class = "nt" > < progress< / span > < span class = "na" > class=< / span > < span class = "s" > "progress is-info"< / span > < span class = "na" > value=< / span > < span class = "s" > "45"< / span > < span class = "na" > max=< / span > < span class = "s" > "100"< / span > < span class = "nt" > > < / span > 45%< span class = "nt" > < /progress> < / span >
< span class = "nt" > < progress< / span > < span class = "na" > class=< / span > < span class = "s" > "progress is-success"< / span > < span class = "na" > value=< / span > < span class = "s" > "60"< / span > < span class = "na" > max=< / span > < span class = "s" > "100"< / span > < span class = "nt" > > < / span > 60%< span class = "nt" > < /progress> < / span >
< span class = "nt" > < progress< / span > < span class = "na" > class=< / span > < span class = "s" > "progress is-warning"< / span > < span class = "na" > value=< / span > < span class = "s" > "75"< / span > < span class = "na" > max=< / span > < span class = "s" > "100"< / span > < span class = "nt" > > < / span > 75%< span class = "nt" > < /progress> < / span >
< span class = "nt" > < progress< / span > < span class = "na" > class=< / span > < span class = "s" > "progress is-danger"< / span > < span class = "na" > value=< / span > < span class = "s" > "90"< / span > < span class = "na" > max=< / span > < span class = "s" > "100"< / span > < span class = "nt" > > < / span > 90%< span class = "nt" > < /progress> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
< hr style = "margin-bottom: 0;" >
< h3 id = "sizes" class = "title is-4 is-spaced bd-anchor-title" >
Sizes
< a class = "bd-anchor-link" href = "#sizes" >
#
< / a >
< / h3 >
< div class = "
bd-snippet
bd-is-vertical
bd-is-1
">
< div class = "bd-snippet-preview" >
< progress class = "progress is-small" value = "15" max = "100" > 15%< / progress >
< progress class = "progress" value = "30" max = "100" > 30%< / progress >
< progress class = "progress is-medium" value = "45" max = "100" > 45%< / progress >
< progress class = "progress is-large" value = "60" max = "100" > 60%< / progress >
< / div >
< div class = "bd-snippet-code highlight-full" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < progress< / span > < span class = "na" > class=< / span > < span class = "s" > "progress is-small"< / span > < span class = "na" > value=< / span > < span class = "s" > "15"< / span > < span class = "na" > max=< / span > < span class = "s" > "100"< / span > < span class = "nt" > > < / span > 15%< span class = "nt" > < /progress> < / span >
< span class = "nt" > < progress< / span > < span class = "na" > class=< / span > < span class = "s" > "progress"< / span > < span class = "na" > value=< / span > < span class = "s" > "30"< / span > < span class = "na" > max=< / span > < span class = "s" > "100"< / span > < span class = "nt" > > < / span > 30%< span class = "nt" > < /progress> < / span >
< span class = "nt" > < progress< / span > < span class = "na" > class=< / span > < span class = "s" > "progress is-medium"< / span > < span class = "na" > value=< / span > < span class = "s" > "45"< / span > < span class = "na" > max=< / span > < span class = "s" > "100"< / span > < span class = "nt" > > < / span > 45%< span class = "nt" > < /progress> < / span >
< span class = "nt" > < progress< / span > < span class = "na" > class=< / span > < span class = "s" > "progress is-large"< / span > < span class = "na" > value=< / span > < span class = "s" > "60"< / span > < span class = "na" > max=< / span > < span class = "s" > "100"< / span > < span class = "nt" > > < / span > 60%< span class = "nt" > < /progress> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
< hr style = "margin-bottom: 0;" >
< h3 id = "variables" class = "title is-4 is-spaced bd-anchor-title" >
Variables
< a class = "bd-anchor-link" href = "#variables" >
#
< / a >
< / h3 >
< div class = "content" >
< p >
You can use these variables to < strong > customize< / strong > this element. Simply set one or multiple of these variables < em > before< / em > importing Bulma. < a href = "http://bulma.io/versions/0.5.3/documentation/overview/customize/" > Learn how< / a > .
< / p >
< / div >
< table class = "table is-bordered" >
< thead >
< tr >
< th > Name< / th >
< th > Default value< / th >
< / tr >
< / thead >
< tfoot >
< tr >
< th > Name< / th >
< th > Default value< / th >
< / tr >
< / tfoot >
< tbody >
< tr >
< td >
< code > $progress-bar-background-color< / code >
< / td >
< td >
< code > $border< / code >
< / td >
< / tr >
< tr >
< td >
< code > $progress-value-background-color< / code >
< / td >
< td >
< code > $text< / code >
< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / section >
< section class = "section" >
< div class = "container" >
< p class = "has-text-centered has-text-grey-light" >
This page is < strong class = "has-text-grey" > open source< / strong > .
Noticed a typo? Or something unclear?
< a class = "has-text-grey" href = "https://github.com/jgthms/bulma/blob/master/docs/documentation/elements/progress.html" style = "border-bottom: 1px solid currentColor;" >
Improve this page on GitHub
< / a >
< / p >
< / div >
< / section >
< script src = "//m.servedby-buysellads.com/monetization.js" type = "text/javascript" > < / script >
< section class = "hero is-info bsa" >
< div class = "container" >
< div class = "columns is-vcentered" >
< div class = "column is-4" >
< p class = "title" > Bulma < strong > Partners< / strong > < / p >
< p class = "subtitle" > Check out their products!< / p >
< / div >
< div class = "column is-8" >
< div class = "bsa-cpc" > < / div >
< / div >
< / div >
< / div >
< / section >
< script >
(function(){
if(typeof _bsa !== 'undefined' & & _bsa) {
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
target: '.bsa-cpc',
align: 'horizontal',
disable_css: 'true'
});
}
})();
< / script >
< section id = "newsletter" class = "hero is-primary" >
< div class = "hero-body" >
< div class = "container" >
<!-- Begin MailChimp Signup Form -->
< div id = "mc_embed_signup" class = "columns is-vcentered" >
< div class = "column is-one-third is-left" >
< p class = "title" > Bulma < strong > Newsletter< / strong > < / p >
< p class = "subtitle" > Get notified when v1 is ready!< / p >
< / div >
< div class = "column" >
< form action = "https://bbxdesign.us3.list-manage.com/subscribe/post?u=b43b93fe633f0560b2a72a69c&id=52585e8803" method = "post" id = "mc-embedded-subscribe-form" name = "mc-embedded-subscribe-form" class = "validate" target = "_blank" novalidate >
< div id = "mc_embed_signup_scroll" >
< div class = "field is-grouped" >
< div class = "control has-icons-left is-expanded" >
< input type = "email" value = "" name = "EMAIL" class = "input is-flat required email" id = "mce-EMAIL" placeholder = "email address" required >
< span class = "icon is-small is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< / div >
< div class = "control" >
< input type = "submit" value = "Subscribe" name = "subscribe" id = "mc-embedded-subscribe" class = "button is-white is-outlined" >
< / div >
< / div >
< div id = "mce-responses" >
< div class = "notification is-danger response" id = "mce-error-response" style = "display:none" > < / div >
< div class = "notification is-success response" id = "mce-success-response" style = "display:none" > < / div >
< / div >
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups -->
< div style = "position: absolute; left: -5000px;" aria-hidden = "true" >
< input type = "text" name = "b_b43b93fe633f0560b2a72a69c_52585e8803" tabindex = "-1" value = "" >
< / div >
< / div >
< / form >
< / div >
< / div >
<!-- End mc_embed_signup -->
< / div >
< / div >
< / section >
< footer class = "footer" >
< div class = "container" >
< div class = "columns" >
< div class = "column is-3" >
< div id = "about" class = "content" >
< 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 = "http://jgthms.com" property = "cc:attributionName" rel = "cc:attributionURL" > Jeremy Thomas< / a > .
< p id = "alternative" >
< a href = "http://bulma.io/versions/0.5.3/alternative-to-bootstrap/" > An alternative to < strong > Bootstrap< / strong > < / a >
< / p >
< div class = "twitter-container" >
< a href = "https://twitter.com/jgthms" class = "twitter-follow-button" data-show-count = "true" data-lang = "en" data-size = "large" > @jgthms< / a >
< / div >
< / div >
< / div >
< div class = "column is-5" >
< div id = "share" class = "content" >
< div >
< strong > Support< / strong > and share the love!
< / div >
< div id = "social" >
< iframe class = "github-btn" 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 >
< a href = "https://twitter.com/share" class = "twitter-share-button" data-text = "Bulma v0.5.3: a modern CSS framework based on Flexbox" data-url = "http://bulma.io/versions/0.5.3" data-count = "horizontal" data-via = "jgthms" data-related = "jgthms:Creator of Bulma" data-size = "large" > Tweet< / a >
< form class = "paypal-form" action = "https://www.paypal.com/cgi-bin/webscr" method = "post" target = "_top" >
< input type = "hidden" name = "cmd" value = "_s-xclick" >
< input type = "hidden" name = "hosted_button_id" value = "8WMKYSRFN6A78" >
< input type = "image" src = "http://bulma.io/versions/0.5.3/images/paypal-donate.png" border = "0" name = "submit" alt = "PayPal – height = "30" >
< img alt = "" border = "0" src = "https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width = "1" height = "1" >
< / form >
< div class = "fb-like" data-href = "https://www.facebook.com/bulmaio" data-layout = "button" data-action = "like" data-size = "large" data-show-faces = "false" data-share = "true" > < / div >
< / div >
< / div >
< / div >
< div class = "column is-4" >
< div id = "sister" >
< p >
More < strong > helpful< / strong > tools:
< / p >
< ul >
< li >
< a href = "http://cssreference.io" >
< img src = "http://bulma.io/versions/0.5.3/images/css-reference-logo.png" alt = "CSS Reference logo" >
< / a >
< / li >
< li >
< a href = "http://htmlreference.io" >
< img src = "http://bulma.io/versions/0.5.3/images/html-reference-logo.png" alt = "HTML Reference logo" >
< / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< p id = "tsp" >
< small >
Source code licensed < a href = "http://opensource.org/licenses/mit-license.php" > MIT< / a > .
< br >
Website content licensed < a rel = "license" href = "http://creativecommons.org/licenses/by-nc-sa/4.0/" > CC BY-NC-SA 4.0< / a > .
< / small >
< / p >
< / div >
< / footer >
< script src = "http://bulma.io/versions/0.5.3/vendor/clipboard-1.7.1.min.js" > < / script >
< script src = "http://bulma.io/versions/0.5.3/lib/main.js" > < / script >
< div id = "fb-root" > < / div >
< script async defer type = "text/javascript" > ( f u n c t i o n ( d , s , i d ) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async = true;
js.defer = true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));< / script >
< script async defer id = "twitter-wjs" src = "https://platform.twitter.com/widgets.js" > < / script >
< script async defer type = "text/javascript" src = "https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js" > < / script >
< script async defer type = "text/javascript" >
(function() {
window.fnames = new Array();
window.ftypes = new Array();
fnames[0]='EMAIL';
ftypes[0]='email';
}());
// var $mcj = window.jQuery.noConflict(true);
< / script >
< script async defer type = "text/javascript" >
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-82634666-2', 'auto');
ga('send', 'pageview');
< / script >
< / body >
< / html >
