2017-08-07 19:09:59 +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.1 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free." >
< title > Responsiveness | Bulma v0.5.1: a modern CSS framework based on Flexbox< / title >
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" >
< link rel = "stylesheet" href = "http://bulma.io/versions/0.5.1/css/bulma-docs.css" >
< link rel = "canonical" href = "http://bulma.io/versions/0.5.1/documentation/overview/responsiveness/" >
< link rel = "alternate" type = "application/rss+xml" title = "Bulma v0.5.1: a modern CSS framework based on Flexbox" href = "http://bulma.io/versions/0.5.1/feed.xml" >
< meta property = "og:url" content = "http://bulma.io/versions/0.5.1" >
< meta property = "og:type" content = "website" >
< meta property = "og:title" content = "Bulma v0.5.1: a modern CSS framework based on Flexbox" >
< meta property = "og:image" content = "http://bulma.io/versions/0.5.1/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.1 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.1: a modern CSS framework based on Flexbox" >
< meta name = "twitter:image" content = "http://bulma.io/versions/0.5.1/images/bulma-banner.png" >
< meta name = "twitter:description" content = "Bulma v0.5.1 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.1/favicons/apple-touch-icon.png?v=201701041855" >
< link rel = "icon" type = "image/png" href = "http://bulma.io/versions/0.5.1/favicons/favicon-32x32.png?v=201701041855" sizes = "32x32" >
< link rel = "icon" type = "image/png" href = "http://bulma.io/versions/0.5.1/favicons/favicon-16x16.png?v=201701041855" sizes = "16x16" >
< link rel = "manifest" href = "http://bulma.io/versions/0.5.1/favicons/manifest.json?v=201701041855" >
< link rel = "mask-icon" href = "http://bulma.io/versions/0.5.1/favicons/safari-pinned-tab.svg?v=201701041855" color = "#00d1b2" >
< link rel = "shortcut icon" href = "http://bulma.io/versions/0.5.1/favicons/favicon.ico?v=201701041855" >
< meta name = "msapplication-config" content = "http://bulma.io/versions/0.5.1/favicons/browserconfig.xml?v=201701041855" >
< meta name = "theme-color" content = "#00d1b2" >
< / head >
< body class = "layout-documentation page-overview" >
< div class = "notification is-info" style = "border-radius: 0; margin-bottom: 0;" >
< p >
You are viewing the deprecated < strong > 0.5.1< / 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.1" >
< img src = "http://bulma.io/versions/0.5.1/images/bulma-logo.png" alt = "Bulma v0.5.1: 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-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-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.1/documentation/overview/start/" >
Docs
< / a >
< div class = "navbar-dropdown " >
< a class = "navbar-item is-active" href = "/versions/0.5.1/documentation/overview/start/" >
Overview
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.5.1/documentation/modifiers/syntax/" >
Modifiers
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.5.1/documentation/grid/columns/" >
Grid
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.5.1/documentation/layout/container/" >
Layout
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.5.1/documentation/form/general/" >
Form
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.5.1/documentation/elements/box/" >
Elements
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.5.1/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.1< / strong >
< / p >
< small >
< a class = "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.1/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.1/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 is-rss is-small" href = "http://bulma.io/versions/0.5.1/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.1/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.1/expo/" >
< span class = "emoji" > 🎨< / span >
Expo
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.5.1/love/" >
< span class = "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" >
Github
< / a >
< a class = "navbar-item is-hidden-desktop-only" href = "https://twitter.com/jgthms" target = "_blank" >
Twitter
< / a >
< div class = "navbar-item" >
< div class = "field is-grouped" >
< p class = "control" >
< a class = "tw-button button"
data-social-network="Twitter"
data-social-action="tweet"
data-social-target="http://bulma.io/versions/0.5.1"
target="_blank"
href="https://twitter.com/intent/tweet?text=Bulma v0.5.1: a modern CSS framework based on Flexbox& hashtags=bulmaio& url=http://bulma.io/versions/0.5.1& 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.1.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 = "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 class = "hero-foot" >
< div class = "container" >
< nav class = "tabs is-boxed" >
< ul >
< li class = "is-active" >
< a href = "/versions/0.5.1/documentation/overview/start/" > Overview< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.5.1/documentation/modifiers/syntax" > Modifiers< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.5.1/documentation/grid/columns" > Grid< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.5.1/documentation/layout/container/" > Layout< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.5.1/documentation/form/general" > Form< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.5.1/documentation/elements/box/" > Elements< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.5.1/documentation/components/breadcrumb/" > Components< / a >
< / li >
< / ul >
< / div >
< / div >
< / nav >
< / section >
< nav class = "navbar has-shadow" >
< div class = "container" >
< div class = "navbar-brand" >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.1/documentation/overview/start/" >
Start
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.1/documentation/overview/customize/" >
Customize
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.1/documentation/overview/classes/" >
Classes
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.1/documentation/overview/modular/" >
Modular
< / a >
< a class = "navbar-item is-tab is-active" href = "http://bulma.io/versions/0.5.1/documentation/overview/responsiveness/" >
Responsiveness
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.1/documentation/overview/variables/" >
Variables
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.1/documentation/overview/colors/" >
Colors
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.1/documentation/overview/functions/" >
Functions
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.5.1/documentation/overview/mixins/" >
Mixins
< / a >
< / div >
< / div >
< / nav >
< section class = "section" >
< div class = "container" >
< h1 class = "title" > Responsiveness< / h1 >
< h2 class = "subtitle" > Bulma is a < strong > mobile-first< / strong > framework< / h2 >
< hr >
< h3 class = "title" > Vertical by default< / h3 >
< div class = "content" >
< p >
Every element in Bulma is < strong > mobile-first< / strong > and optimizes for < strong > vertical reading< / strong > , so by default on mobile:
< / p >
< ul >
< li > < code > columns< / code > are stacked vertically< / li >
< li > the < code > level< / code > component will show its children stacked vertically< / li >
< li > the < code > nav< / code > menu will be hidden< / li >
< / ul >
2017-10-02 18:24:29 +00:00
< p > For example, you can enforce the < strong > horizontal< / strong > layout for both < code > columns< / code > or < code > nav< / code > by appending the < code > is-mobile< / code > modifier.< / p >
2017-08-07 19:09:59 +00:00
< / div >
< hr >
< h3 class = "title" > Breakpoints< / h3 >
< div class = "content" >
< p > Bulma has 5 breakpoints:< / p >
< ul >
< li > < code > mobile< / code > : up to < code > 768px< / code > < / li >
< li > < code > tablet< / code > : from < code > 769px< / code > < / li >
< li > < code > desktop< / code > : from < code > 1008px< / code > < / li >
< li > < code > widescreen< / code > : from < code > 1200px< / code > < / li >
< li > < span class = "tag is-success" > New!< / span > < code > fullhd< / code > : from < code > 1392px< / code > < / li >
< / ul >
< p > Bulma uses 9 responsive mixins:< / p >
< ul >
< li >
< code > =mobile< / code > < br >
until < code > 768px< / code >
< / li >
< li >
< code > =tablet< / code > < br >
from < code > 769px< / code >
< / li >
< li >
< code > =tablet-only< / code > < br >
from < code > 769px< / code > and until < code > 1007px< / code >
< / li >
< li >
< code > =touch< / code > < br >
until < code > 1007px< / code >
< / li >
< li >
< code > =desktop< / code > < br >
from < code > 1008px< / code >
< / li >
< li >
< code > =desktop-only< / code > < br >
from < code > 1008px< / code > and until < code > 1199px< / code >
< / li >
< li >
< code > =widescreen< / code > < br >
from < code > 1200px< / code >
< / li >
< li >
< code > =widescreen-only< / code > < br >
from < code > 1200px< / code > and until < code > 1391px< / code >
< / li >
< li >
< span class = "tag is-success" > New!< / span >
< code > =fullhd< / code > < br >
from < code > 1392px< / code >
< / li >
< / ul >
< / div >
< table class = "table is-bordered" >
< thead >
< tr >
< th style = "width: 20%;" >
Mobile< br >
Up to < code > 768px< / code >
< / th >
< th style = "width: 20%;" >
Tablet< br >
Between < code > 769px< / code > and < code > 1007px< / code >
< / th >
< th style = "width: 20%;" >
Desktop< br >
Between < code > 1008px< / code > and < code > 1199px< / code >
< / th >
< th style = "width: 20%;" >
Widescreen< br >
Between < code > 1200px< / code > and < code > 1391px< / code >
< / th >
< th style = "width: 20%;" >
FullHD< br >
< code > 1392px< / code > and above
< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td >
< p class = "notification is-success" > mobile< / p >
< / td >
< td colspan = "4" >
< p class = "notification" > -< / p >
< / td >
< / tr >
< tr >
< td >
< p class = "notification" > -< / p >
< / td >
< td colspan = "4" >
< p class = "notification is-success" > tablet< / p >
< / td >
< / tr >
< tr >
< td colspan = "2" >
< p class = "notification" > -< / p >
< / td >
< td colspan = "3" >
< p class = "notification is-success" > desktop< / p >
< / td >
< / tr >
< tr >
< td colspan = "3" >
< p class = "notification" > -< / p >
< / td >
< td colspan = "2" >
< p class = "notification is-success" > widescreen< / p >
< / td >
< / tr >
< tr >
< td colspan = "4" >
< p class = "notification" > -< / p >
< / td >
< td >
< p class = "notification is-success" > fullhd< / p >
< / td >
< / tr >
< tr >
< td >
< p class = "notification" > -< / p >
< / td >
< td >
< p class = "notification is-success" > tablet-only< / p >
< / td >
< td colspan = "3" >
< p class = "notification" > -< / p >
< / td >
< / tr >
< tr >
< td colspan = "2" >
< p class = "notification" > -< / p >
< / td >
< td >
< p class = "notification is-success" > desktop-only< / p >
< / td >
< td colspan = "2" >
< p class = "notification" > -< / p >
< / td >
< / tr >
< tr >
< td colspan = "3" >
< p class = "notification" > -< / p >
< / td >
< td >
< p class = "notification is-success" > widescreen-only< / p >
< / td >
< td >
< p class = "notification" > -< / p >
< / td >
< / tr >
< tr >
< td colspan = "2" >
< p class = "notification is-success" > touch< / p >
< / td >
< td colspan = "3" >
< p class = "notification" > -< / p >
< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / section >
< section class = "section" >
< div class = "container" >
< p class = "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/overview/responsiveness.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.1/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.1: a modern CSS framework based on Flexbox" data-url = "http://bulma.io/versions/0.5.1" 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.1/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.1/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.1/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.1/vendor/clipboard-1.7.1.min.js" > < / script >
< script src = "http://bulma.io/versions/0.5.1/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 >
