2017-07-24 13:59:23 +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.4.4 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free." >
< title > Bulma v0.4.4: 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.4.4/css/bulma-docs.css" >
< link rel = "canonical" href = "http://bulma.io/versions/0.4.4/documentation/form/general/" >
< link rel = "alternate" type = "application/rss+xml" title = "Bulma v0.4.4: a modern CSS framework based on Flexbox" href = "http://bulma.io/versions/0.4.4/feed.xml" >
< meta property = "og:url" content = "http://bulma.io/versions/0.4.4" >
< meta property = "og:type" content = "website" >
< meta property = "og:title" content = "Bulma v0.4.4: a modern CSS framework based on Flexbox" >
< meta property = "og:image" content = "http://bulma.io/versions/0.4.4/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.4.4 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.4.4: a modern CSS framework based on Flexbox" >
< meta name = "twitter:image" content = "http://bulma.io/versions/0.4.4/images/bulma-banner.png" >
< meta name = "twitter:description" content = "Bulma v0.4.4 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.4.4/favicons/apple-touch-icon.png?v=201701041855" >
< link rel = "icon" type = "image/png" href = "http://bulma.io/versions/0.4.4/favicons/favicon-32x32.png?v=201701041855" sizes = "32x32" >
< link rel = "icon" type = "image/png" href = "http://bulma.io/versions/0.4.4/favicons/favicon-16x16.png?v=201701041855" sizes = "16x16" >
< link rel = "manifest" href = "http://bulma.io/versions/0.4.4/favicons/manifest.json?v=201701041855" >
< link rel = "mask-icon" href = "http://bulma.io/versions/0.4.4/favicons/safari-pinned-tab.svg?v=201701041855" color = "#00d1b2" >
< link rel = "shortcut icon" href = "http://bulma.io/versions/0.4.4/favicons/favicon.ico?v=201701041855" >
< meta name = "msapplication-config" content = "http://bulma.io/versions/0.4.4/favicons/browserconfig.xml?v=201701041855" >
< meta name = "theme-color" content = "#00d1b2" >
< / head >
< body class = "layout-documentation page-form" >
< div class = "notification is-info" style = "border-radius: 0; margin-bottom: 0;" >
< p >
You are viewing the deprecated < strong > 0.4.4< / 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.4.4" >
< img src = "http://bulma.io/versions/0.4.4/images/bulma-logo.png" alt = "Bulma v0.4.4: 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" >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/" >
Home
< / a >
< div class = "navbar-item has-dropdown is-hoverable" >
< a class = "navbar-link is-active" href = "/versions/0.4.4/documentation/overview/start/" >
Docs
< / a >
< div class = "navbar-dropdown " >
< a class = "navbar-item " href = "/versions/0.4.4/documentation/overview/start/" >
Overview
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/modifiers/syntax/" >
Modifiers
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/grid/columns/" >
Grid
< / a >
< a class = "navbar-item is-active" href = "http://bulma.io/versions/0.4.4/documentation/form/general/" >
Form
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/elements/box/" >
Elements
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/components/breadcrumb/" >
Components
< / a >
< a class = "navbar-item " href = "http://bulma.io/versions/0.4.4/documentation/layout/container/" >
Layout
< / a >
< hr class = "navbar-divider" >
< div class = "navbar-item" >
< div >
< p class = "has-text-info is-size-6-desktop" > < strong > 0.4.4< / 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.4.4/blog/" >
Blog
< / a >
< div id = "blogDropdown" class = "navbar-dropdown " data-style = "width: 18rem;" >
< a class = "navbar-item" href = "/2017/03/10/new-field-element/" >
< div class = "navbar-content" >
< p >
< small class = "has-text-info" > 10 Mar 2017< / small >
< / p >
< p > New field element (for better controls)< / p >
< / div >
< / a >
< a class = "navbar-item" href = "/2016/04/11/metro-ui-css-grid-with-bulma-tiles/" >
< div class = "navbar-content" >
< p >
< small class = "has-text-info" > 11 Apr 2016< / small >
< / p >
< p > Metro UI CSS grid with Bulma tiles< / p >
< / div >
< / a >
< a class = "navbar-item" href = "/2016/02/09/blog-launched-new-responsive-columns-new-helpers/" >
< div class = "navbar-content" >
< p >
< small class = "has-text-info" > 09 Feb 2016< / small >
< / p >
< p > Blog launched, new responsive columns, new helpers< / p >
< / div >
< / a >
< a class = "navbar-item" href = "http://bulma.io/versions/0.4.4/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.4.4/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.4.4/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 >
< / div >
< div class = "navbar-end" >
< a class = "navbar-item" href = "https://github.com/jgthms/bulma" target = "_blank" >
Github
< / a >
< a class = "navbar-item" href = "https://twitter.com/jgthms" target = "_blank" >
Twitter
< / a >
< div class = "navbar-item" >
< div class = "field is-grouped" >
< p class = "control" >
< a id = "twitter"
class="button"
data-social-network="Twitter"
data-social-action="tweet"
data-social-target="http://bulma.io/versions/0.4.4"
target="_blank"
href="https://twitter.com/intent/tweet?text=Bulma v0.4.4: a modern CSS framework based on Flexbox& url=http://bulma.io/versions/0.4.4& 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.4.4.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 >
< a href = "/versions/0.4.4/documentation/overview/start/" > Overview< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.4.4/documentation/modifiers/syntax" > Modifiers< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.4.4/documentation/grid/columns" > Grid< / a >
< / li >
< li class = "is-active" >
< a href = "http://bulma.io/versions/0.4.4/documentation/form/general" > Form< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.4.4/documentation/elements/box/" > Elements< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.4.4/documentation/components/breadcrumb/" > Components< / a >
< / li >
< li >
< a href = "http://bulma.io/versions/0.4.4/documentation/layout/container/" > Layout< / 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 is-active" href = "http://bulma.io/versions/0.4.4/documentation/form/general/" >
General
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.4.4/documentation/form/input/" >
Input
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.4.4/documentation/form/textarea/" >
Textarea
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.4.4/documentation/form/select/" >
Select
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.4.4/documentation/form/checkbox/" >
Checkbox
< / a >
< a class = "navbar-item is-tab " href = "http://bulma.io/versions/0.4.4/documentation/form/radio/" >
Radio
< / a >
< / div >
< / div >
< / nav >
< section class = "section" >
< div class = "container" >
< h1 class = "title" > Form controls< / h1 >
< h2 class = "subtitle" >
All generic < strong > form controls< / strong > , designed for consistency
< / h2 >
< hr >
< div class = "content" >
< p > The following form controls < strong > classes< / strong > are supported:< / p >
< ul >
< li > < code > .label< / code > < / li >
< li > < code > .input< / code > < / li >
< li > < code > .textarea< / code > < / li >
< li > < code > .select< / code > < / li >
< li > < code > .checkbox< / code > < / li >
< li > < code > .radio< / code > < / li >
< li > < code > .button< / code > < / li >
< li > < code > .help< / code > < / li >
< / ul >
< p > Each of them should be wrapped in a < code > .control< / code > container.< br >
When combining several controls in a < strong > form< / strong > , use the < code > .field< / code > class as a < strong > container< / strong > , to keep the spacing consistent.< / p >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "field" >
< label class = "label" > Name< / label >
< div class = "control" >
< input class = "input" type = "text" placeholder = "Text input" >
< / div >
< / div >
< div class = "field" >
< label class = "label" > Username< / label >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-success" type = "text" placeholder = "Text input" value = "bulma" >
< span class = "icon is-small is-left" >
< i class = "fa fa-user" > < / i >
< / span >
< span class = "icon is-small is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< p class = "help is-success" > This username is available< / p >
< / div >
< div class = "field" >
< label class = "label" > Email< / label >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-danger" type = "text" placeholder = "Email input" value = "hello@" >
< span class = "icon is-small is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-small is-right" >
< i class = "fa fa-warning" > < / i >
< / span >
< / div >
< p class = "help is-danger" > This email is invalid< / p >
< / div >
< div class = "field" >
< label class = "label" > Subject< / label >
< div class = "control" >
< div class = "select" >
< select >
< option > Select dropdown< / option >
< option > With options< / option >
< / select >
< / div >
< / div >
< / div >
< div class = "field" >
< label class = "label" > Message< / label >
< div class = "control" >
< textarea class = "textarea" placeholder = "Textarea" > < / textarea >
< / div >
< / div >
< div class = "field" >
< div class = "control" >
< label class = "checkbox" >
< input type = "checkbox" >
I agree to the < a href = "#" > terms and conditions< / a >
< / label >
< / div >
< / div >
< div class = "field" >
< div class = "control" >
< label class = "radio" >
< input type = "radio" name = "question" >
Yes
< / label >
< label class = "radio" >
< input type = "radio" name = "question" >
No
< / label >
< / div >
< / div >
< div class = "field is-grouped" >
< div class = "control" >
< button class = "button is-primary" > Submit< / button >
< / div >
< div class = "control" >
< button class = "button is-link" > Cancel< / button >
< / div >
< / div >
< / div >
< div class = "column is-half" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Name< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Text input"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Username< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control has-icons-left has-icons-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input is-success"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Text input"< / span > < span class = "na" > value=< / span > < span class = "s" > "bulma"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-user"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-check"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "help is-success"< / span > < span class = "nt" > > < / span > This username is available< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Email< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control has-icons-left has-icons-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input is-danger"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Email input"< / span > < span class = "na" > value=< / span > < span class = "s" > "hello@"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-envelope"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-warning"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "help is-danger"< / span > < span class = "nt" > > < / span > This email is invalid< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Subject< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "select"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < select> < / span >
< span class = "nt" > < option> < / span > Select dropdown< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > With options< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Message< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < textarea< / span > < span class = "na" > class=< / span > < span class = "s" > "textarea"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Textarea"< / span > < span class = "nt" > > < /textarea> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "checkbox"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "nt" > > < / span >
I agree to the < span class = "nt" > < a< / span > < span class = "na" > href=< / span > < span class = "s" > "#"< / span > < span class = "nt" > > < / span > terms and conditions< span class = "nt" > < /a> < / span >
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "radio"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > name=< / span > < span class = "s" > "question"< / span > < span class = "nt" > > < / span >
Yes
< span class = "nt" > < /label> < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "radio"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > name=< / span > < span class = "s" > "question"< / span > < span class = "nt" > > < / span >
No
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-grouped"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "button is-primary"< / span > < span class = "nt" > > < / span > Submit< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "button is-link"< / span > < span class = "nt" > > < / span > Cancel< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
< hr >
< h3 id = "form-field" class = "title" > Form field< / h3 >
< div class = "content" >
< p > The < code > field< / code > container is a simple container for:< / p >
< ul >
< li > a text < code > label< / code > < / li >
< li > a form < code > control< / code > < / li >
< li > an optional < code > help< / code > text< / li >
< / ul >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "field" >
< label class = "label" > Label< / label >
< div class = "control" >
< input class = "input" type = "text" placeholder = "Text input" >
< / div >
< p class = "help" > This is a help text< / p >
< / div >
< / div >
< div class = "column is-half" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Label< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Text input"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "help"< / span > < span class = "nt" > > < / span > This is a help text< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
< div class = "content" >
< p > This container allows form fields to be < strong > spaced consistently< / strong > .< / p >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "field" >
< label class = "label" > Name< / label >
< div class = "control" >
< input class = "input" type = "text" placeholder = "e.g Alex Smith" >
< / div >
< / div >
< div class = "field" >
< label class = "label" > Email< / label >
< div class = "control" >
< input class = "input" type = "email" placeholder = "e.g. alexsmith@gmail.com" >
< / div >
< / div >
< / div >
< div class = "column is-half" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Name< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "e.g Alex Smith"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Email< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "e.g. alexsmith@gmail.com"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
< hr >
< h3 id = "form-control" class = "title" > Form control< / h3 >
< div class = "content" >
< p > The < code > control< / code > is a versatile container meant to < strong > enhance single form controls< / strong > . Because it has the same height as a control elements, it can < strong class = "has-text-danger" > only contain< / strong > the following elements:< / p >
< ul >
< li > < code > input< / code > < / li >
< li > < code > select< / code > < / li >
< li > < code > button< / code > < / li >
< li > < code > icon< / code > < / li >
< / ul >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "control" >
< input class = "input" type = "text" placeholder = "Text input" >
< / div >
< / div >
< div class = "column is-half" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Text input"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "control" >
< div class = "select" >
< select >
< option > Select dropdown< / option >
< option > With options< / option >
< / select >
< / div >
< / div >
< / div >
< div class = "column is-half" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "select"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < select> < / span >
< span class = "nt" > < option> < / span > Select dropdown< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > With options< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "control" >
< button class = "button is-primary" > Submit< / button >
< / div >
< / div >
< div class = "column is-half" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "button is-primary"< / span > < span class = "nt" > > < / span > Submit< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
<!-- Font Awesome Icons -->
< hr >
< h3 class = "title" > With icons< / h3 >
< div class = "content" >
< p > You can append one of 2 < strong > modifiers< / strong > on a control:< / p >
< ul >
< li >
< code > has-icons-left< / code >
< / li >
< li >
and/or < code > has-icons-right< / code >
< / li >
< / ul >
< p > You also need to add a modifier on the < strong > icon< / strong > :< / p >
< ul >
< li >
< code > icon is-left< / code > if < code > has-icons-left< / code > is used
< / li >
< li >
< code > icon is-right< / code > if < code > has-icons-right< / code > is used
< / li >
< / ul >
< p > The size of the < strong > input< / strong > will define the size of the icon container.< / p >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "field" >
< p class = "control has-icons-left has-icons-right" >
< input class = "input" type = "email" placeholder = "Email" >
< span class = "icon is-small is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-small is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / p >
< / div >
< div class = "field" >
< p class = "control has-icons-left" >
< input class = "input" type = "password" placeholder = "Password" >
< span class = "icon is-small is-left" >
< i class = "fa fa-lock" > < / i >
< / span >
< / p >
< / div >
< div class = "field" >
< p class = "control" >
< button class = "button is-success" >
Login
< / button >
< / p >
< / div >
< / div >
< div class = "column is-half highlight-full" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control has-icons-left has-icons-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Email"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-envelope"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-check"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control has-icons-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "password"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Password"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-lock"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "button is-success"< / span > < span class = "nt" > > < / span >
Login
< span class = "nt" > < /button> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "content" >
< p >
You can append icons to < strong > select dropdowns< / strong > as well.
< / p >
< / div >
< div class = "field" >
< p class = "control has-icons-left" >
< span class = "select" >
< select >
< option selected > Country< / option >
< option > Select dropdown< / option >
< option > With options< / option >
< / select >
< / span >
< span class = "icon is-small is-left" >
< i class = "fa fa-globe" > < / i >
< / span >
< / p >
< / div >
< / div >
< div class = "column is-half" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control has-icons-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "select"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < select> < / span >
< span class = "nt" > < option< / span > < span class = "na" > selected< / span > < span class = "nt" > > < / span > Country< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > Select dropdown< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > With options< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-globe"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "content" >
< p >
If the control contains an icon, Bulma will make sure the icon remains < strong > centered< / strong > , no matter the size of the input < em > or< / em > of the icon.
< / p >
< / div >
< div class = "field" >
< label class = "label is-small" > Small input< / label >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-small" type = "email" placeholder = "Email" >
< span class = "icon is-small is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-small is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
< / div >
< div class = "column is-half" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label is-small"< / span > < span class = "nt" > > < / span > Small input< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control has-icons-left has-icons-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input is-small"< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Email"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-envelope"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-check"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "field" >
< label class = "label" > Normal input< / label >
< div class = "control has-icons-left has-icons-right" >
< input class = "input" type = "email" placeholder = "Email" >
< span class = "icon is-small is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-small is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
< div class = "field" >
< div class = "control has-icons-left has-icons-right" >
< input class = "input" type = "email" placeholder = "Email" >
< span class = "icon is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
< / div >
< div class = "column is-half" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Normal input< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control has-icons-left has-icons-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Email"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-envelope"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-check"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control has-icons-left has-icons-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Email"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-envelope"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-check"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "field" >
< label class = "label is-medium" > Medium input< / label >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-medium" type = "email" placeholder = "Email" >
< span class = "icon is-small is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-small is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
< div class = "field" >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-medium" type = "email" placeholder = "Email" >
< span class = "icon is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
< div class = "field" >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-medium" type = "email" placeholder = "Email" >
< span class = "icon is-medium is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-medium is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
< / div >
< div class = "column is-half" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label is-medium"< / span > < span class = "nt" > > < / span > Medium input< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control has-icons-left has-icons-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input is-medium"< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Email"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-envelope"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-check"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control has-icons-left has-icons-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input is-medium"< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Email"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-envelope"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-check"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control has-icons-left has-icons-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input is-medium"< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Email"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-medium is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-envelope"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-medium is-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-check"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
< div class = "columns" >
< div class = "column is-half" >
< div class = "field" >
< label class = "label is-large" > Large input< / label >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-large" type = "email" placeholder = "Email" >
< span class = "icon is-small is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-small is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
< div class = "field" >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-large" type = "email" placeholder = "Email" >
< span class = "icon is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
< div class = "field" >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-large" type = "email" placeholder = "Email" >
< span class = "icon is-medium is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-medium is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
< div class = "field" >
< div class = "control has-icons-left has-icons-right" >
< input class = "input is-large" type = "email" placeholder = "Email" >
< span class = "icon is-large is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-large is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / div >
< / div >
< / div >
< div class = "column is-half" >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label is-large"< / span > < span class = "nt" > > < / span > Large input< span class = "nt" > < /label> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control has-icons-left has-icons-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input is-large"< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Email"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-envelope"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-check"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control has-icons-left has-icons-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input is-large"< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Email"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-envelope"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-check"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control has-icons-left has-icons-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input is-large"< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Email"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-medium is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-envelope"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-medium is-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-check"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control has-icons-left has-icons-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input is-large"< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Email"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-large is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-envelope"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-large is-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-check"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< / div >
< / div >
< hr >
< h3 id = "form-addons" class = "title" > Form addons< / h3 >
< div class = "content" >
< p > If you want to < strong > attach controls< / strong > together, use the < code > has-addons< / code > modifier on the < code > field< / code > container:< / p >
< / div >
< div class = "example" >
< div class = "field has-addons" >
< div class = "control" >
< input class = "input" type = "text" placeholder = "Find a repository" >
< / div >
< div class = "control" >
< a class = "button is-info" >
Search
< / a >
< / div >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field has-addons"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Find a repository"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "button is-info"< / span > < span class = "nt" > > < / span >
Search
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< div class = "content" >
< p > You can attach inputs, buttons, and dropdowns < strong > only< / strong > .< / p >
< / div >
< div class = "content" >
< p >
< span class = "tag is-success" > New!< / span >
< span class = "tag is-info" > 0.4.2< / span >
< / p >
< p > It can be useful to append a < a href = "http://bulma.io/versions/0.4.4/documentation/elements/button#static-button" > static button< / a > .< / p >
< / div >
< div class = "example" >
< div class = "field has-addons" >
< p class = "control" >
< input class = "input" type = "text" placeholder = "Your email" >
< / p >
< p class = "control" >
< a class = "button is-static" >
@gmail.com
< / a >
< / p >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field has-addons"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Your email"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "button is-static"< / span > < span class = "nt" > > < / span >
@gmail.com
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< div class = "content" >
< p > Use the < code > is-expanded< / code > modifier on the element you want to fill up the remaining space (in this case, the input):< / p >
< / div >
< div class = "example" >
< div class = "field has-addons" >
< p class = "control" >
< span class = "select" >
< select >
< option > $< / option >
< option > £< / option >
< option > €< / option >
< / select >
< / span >
< / p >
< p class = "control" >
< input class = "input" type = "text" placeholder = "Amount of money" >
< / p >
< p class = "control" >
< a class = "button" >
Transfer
< / a >
< / p >
< / div >
< div class = "field has-addons" >
< p class = "control" >
< span class = "select" >
< select >
< option > $< / option >
< option > £< / option >
< option > €< / option >
< / select >
< / span >
< / p >
< p class = "control is-expanded" >
< input class = "input" type = "text" placeholder = "Amount of money" >
< / p >
< p class = "control" >
< a class = "button" >
Transfer
< / a >
< / p >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field has-addons"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "select"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < select> < / span >
< span class = "nt" > < option> < / span > $< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > £< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > €< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Amount of money"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span >
Transfer
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field has-addons"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "select"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < select> < / span >
< span class = "nt" > < option> < / span > $< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > £< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > €< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control is-expanded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Amount of money"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "button"< / span > < span class = "nt" > > < / span >
Transfer
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< div class = "content" >
< p > If you want a full width select dropdown, pair < code > control is-expanded< / code > with < code > select is-fullwidth< / code > .< / p >
< / div >
< div class = "example" >
< div class = "field has-addons" >
< div class = "control is-expanded" >
< div class = "select is-fullwidth" >
< select name = "country" >
< option value = "Argentina" > Argentina< / option >
< option value = "Bolivia" > Bolivia< / option >
< option value = "Brazil" > Brazil< / option >
< option value = "Chile" > Chile< / option >
< option value = "Colombia" > Colombia< / option >
< option value = "Ecuador" > Ecuador< / option >
< option value = "Guyana" > Guyana< / option >
< option value = "Paraguay" > Paraguay< / option >
< option value = "Peru" > Peru< / option >
< option value = "Suriname" > Suriname< / option >
< option value = "Uruguay" > Uruguay< / option >
< option value = "Venezuela" > Venezuela< / option >
< / select >
< / div >
< / div >
< div class = "control" >
< button type = "submit" class = "button is-primary" > Choose< / button >
< / div >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field has-addons"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control is-expanded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "select is-fullwidth"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < select< / span > < span class = "na" > name=< / span > < span class = "s" > "country"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "Argentina"< / span > < span class = "nt" > > < / span > Argentina< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "Bolivia"< / span > < span class = "nt" > > < / span > Bolivia< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "Brazil"< / span > < span class = "nt" > > < / span > Brazil< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "Chile"< / span > < span class = "nt" > > < / span > Chile< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "Colombia"< / span > < span class = "nt" > > < / span > Colombia< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "Ecuador"< / span > < span class = "nt" > > < / span > Ecuador< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "Guyana"< / span > < span class = "nt" > > < / span > Guyana< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "Paraguay"< / span > < span class = "nt" > > < / span > Paraguay< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "Peru"< / span > < span class = "nt" > > < / span > Peru< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "Suriname"< / span > < span class = "nt" > > < / span > Suriname< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "Uruguay"< / span > < span class = "nt" > > < / span > Uruguay< span class = "nt" > < /option> < / span >
< span class = "nt" > < option< / span > < span class = "na" > value=< / span > < span class = "s" > "Venezuela"< / span > < span class = "nt" > > < / span > Venezuela< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > type=< / span > < span class = "s" > "submit"< / span > < span class = "na" > class=< / span > < span class = "s" > "button is-primary"< / span > < span class = "nt" > > < / span > Choose< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< div class = "content" >
2017-10-02 18:24:29 +00:00
< p > Use the < code > has-addons-centered< / code > or the < code > has-addons-right< / code > modifiers to alter the < strong > alignment< / strong > .< / p >
2017-07-24 13:59:23 +00:00
< / div >
< div class = "example" >
< div class = "field has-addons has-addons-centered" >
< p class = "control" >
< span class = "select" >
< select >
< option > $< / option >
< option > £< / option >
< option > €< / option >
< / select >
< / span >
< / p >
< p class = "control" >
< input class = "input" type = "text" placeholder = "Amount of money" >
< / p >
< p class = "control" >
< a class = "button is-primary" >
Transfer
< / a >
< / p >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field has-addons has-addons-centered"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "select"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < select> < / span >
< span class = "nt" > < option> < / span > $< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > £< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > €< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Amount of money"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "button is-primary"< / span > < span class = "nt" > > < / span >
Transfer
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< div class = "example" >
< div class = "field has-addons has-addons-right" >
< p class = "control" >
< span class = "select" >
< select >
< option > $< / option >
< option > £< / option >
< option > €< / option >
< / select >
< / span >
< / p >
< p class = "control" >
< input class = "input" type = "text" placeholder = "Amount of money" >
< / p >
< p class = "control" >
< a class = "button is-primary" >
Transfer
< / a >
< / p >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field has-addons has-addons-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "select"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < select> < / span >
< span class = "nt" > < option> < / span > $< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > £< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > €< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Amount of money"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "button is-primary"< / span > < span class = "nt" > > < / span >
Transfer
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< hr >
< h3 class = "title" > Form group< / h3 >
< div class = "content" >
< p >
If you want to < strong > group< / strong > controls together, use the < code > is-grouped< / code > modifier on the < code > field< / code > container.
< br >
2017-10-02 18:24:29 +00:00
Use the < code > is-grouped-centered< / code > or the < code > is-grouped-right< / code > modifiers to alter the < strong > alignment< / strong > .
2017-07-24 13:59:23 +00:00
< / p >
< p >
Add the < code > is-expanded< / code > modifier on the control element you want to < strong > fill up the remaining space< / strong > with.
< / p >
< / div >
< div class = "example" >
< div class = "field is-grouped" >
< p class = "control is-expanded" >
< input class = "input" type = "text" placeholder = "Find a repository" >
< / p >
< p class = "control" >
< a class = "button is-info" >
Search
< / a >
< / p >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-grouped"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control is-expanded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Find a repository"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "button is-info"< / span > < span class = "nt" > > < / span >
Search
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< hr >
< h3 class = "title" > Horizontal form< / h3 >
< div class = "content" >
< p > If you want a < strong > horizontal< / strong > form control, use the < code > is-horizontal< / code > modifier on the < code > field< / code > container, in which you include:< / p >
< ul >
< li >
< code > field-label< / code > for the side label
< / li >
< li >
< code > field-body< / code > for the input/select/textarea container
< / li >
< / ul >
< p > You can use < code > is-grouped< / code > or < code > has-addons< / code > for the child elements.< / p >
< / div >
< div class = "example" >
< div class = "field is-horizontal" >
< div class = "field-label is-normal" >
< label class = "label" > From< / label >
< / div >
< div class = "field-body" >
< div class = "field" >
< p class = "control is-expanded has-icons-left" >
< input class = "input" type = "text" placeholder = "Name" >
< span class = "icon is-small is-left" >
< i class = "fa fa-user" > < / i >
< / span >
< / p >
< / div >
< div class = "field" >
< p class = "control is-expanded has-icons-left has-icons-right" >
< input class = "input is-success" type = "email" placeholder = "Email" value = "alex@smith.com" >
< span class = "icon is-small is-left" >
< i class = "fa fa-envelope" > < / i >
< / span >
< span class = "icon is-small is-right" >
< i class = "fa fa-check" > < / i >
< / span >
< / p >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label" > < / div >
< div class = "field-body" >
< div class = "field is-expanded" >
< div class = "field has-addons" >
< p class = "control" >
< a class = "button is-static" >
+44
< / a >
< / p >
< p class = "control is-expanded" >
< input class = "input" type = "tel" placeholder = "Your phone number" >
< / p >
< / div >
< p class = "help" > Do not enter the first zero< / p >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label is-normal" >
< label class = "label" > Department< / label >
< / div >
< div class = "field-body" >
< div class = "field is-narrow" >
< div class = "control" >
< div class = "select is-fullwidth" >
< select >
< option > Business development< / option >
< option > Marketing< / option >
< option > Sales< / option >
< / select >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label" >
< label class = "label" > Already a member?< / label >
< / div >
< div class = "field-body" >
< div class = "field is-narrow" >
< div class = "control" >
< label class = "radio" >
< input type = "radio" name = "member" >
Yes
< / label >
< label class = "radio" >
< input type = "radio" name = "member" >
No
< / label >
< / div >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label is-normal" >
< label class = "label" > Subject< / label >
< / div >
< div class = "field-body" >
< div class = "field" >
< div class = "control" >
< input class = "input is-danger" type = "text" placeholder = "e.g. Partnership opportunity" >
< / div >
< p class = "help is-danger" >
This field is required
< / p >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label is-normal" >
< label class = "label" > Question< / label >
< / div >
< div class = "field-body" >
< div class = "field" >
< div class = "control" >
< textarea class = "textarea" placeholder = "Explain how we can help you" > < / textarea >
< / div >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label" >
<!-- Left empty for spacing -->
< / div >
< div class = "field-body" >
< div class = "field" >
< div class = "control" >
< button class = "button is-primary" >
Send message
< / button >
< / div >
< / div >
< / div >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-horizontal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-label is-normal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > From< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-body"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control is-expanded has-icons-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Name"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-user"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control is-expanded has-icons-left has-icons-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input is-success"< / span > < span class = "na" > type=< / span > < span class = "s" > "email"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Email"< / span > < span class = "na" > value=< / span > < span class = "s" > "alex@smith.com"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-left"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-envelope"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < span< / span > < span class = "na" > class=< / span > < span class = "s" > "icon is-small is-right"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < i< / span > < span class = "na" > class=< / span > < span class = "s" > "fa fa-check"< / span > < span class = "nt" > > < /i> < / span >
< span class = "nt" > < /span> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-horizontal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-label"< / span > < span class = "nt" > > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-body"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-expanded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field has-addons"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < a< / span > < span class = "na" > class=< / span > < span class = "s" > "button is-static"< / span > < span class = "nt" > > < / span >
+44
< span class = "nt" > < /a> < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "control is-expanded"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "tel"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Your phone number"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "help"< / span > < span class = "nt" > > < / span > Do not enter the first zero< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-horizontal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-label is-normal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Department< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-body"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-narrow"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "select is-fullwidth"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < select> < / span >
< span class = "nt" > < option> < / span > Business development< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > Marketing< span class = "nt" > < /option> < / span >
< span class = "nt" > < option> < / span > Sales< span class = "nt" > < /option> < / span >
< span class = "nt" > < /select> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-horizontal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-label"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Already a member?< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-body"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-narrow"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "radio"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > name=< / span > < span class = "s" > "member"< / span > < span class = "nt" > > < / span >
Yes
< span class = "nt" > < /label> < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "radio"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "radio"< / span > < span class = "na" > name=< / span > < span class = "s" > "member"< / span > < span class = "nt" > > < / span >
No
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-horizontal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-label is-normal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Subject< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-body"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input is-danger"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "e.g. Partnership opportunity"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < p< / span > < span class = "na" > class=< / span > < span class = "s" > "help is-danger"< / span > < span class = "nt" > > < / span >
This field is required
< span class = "nt" > < /p> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-horizontal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-label is-normal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Question< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-body"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < textarea< / span > < span class = "na" > class=< / span > < span class = "s" > "textarea"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Explain how we can help you"< / span > < span class = "nt" > > < /textarea> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-horizontal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-label"< / span > < span class = "nt" > > < / span >
< span class = "c" > < !-- Left empty for spacing --> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-body"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < button< / span > < span class = "na" > class=< / span > < span class = "s" > "button is-primary"< / span > < span class = "nt" > > < / span >
Send message
< span class = "nt" > < /button> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< div class = "content" >
< p >
To preserve the < strong > vertical alignment< / strong > of labels with each type and size of control, the < code > .field-label< / code > comes with < strong > 4 size modifiers< / strong > :
< / p >
< ul >
< li >
< code > .is-small< / code >
< / li >
< li >
< code > .is-normal< / code > for any < code > .input< / code > or < code > .button< / code >
< / li >
< li >
< code > .is-medium< / code >
< / li >
< li >
< code > .is-large< / code >
< / li >
< / ul >
< / div >
< div class = "example" >
< div class = "field is-horizontal" >
< div class = "field-label" >
< label class = "label" > No padding< / label >
< / div >
< div class = "field-body" >
< div class = "field" >
< div class = "control" >
< label class = "checkbox" >
< input type = "checkbox" >
Checkbox
< / label >
< / div >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label is-small" >
< label class = "label" > Small padding< / label >
< / div >
< div class = "field-body" >
< div class = "field" >
< div class = "control" >
< input class = "input is-small" type = "text" placeholder = "Small sized input" >
< / div >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label is-normal" >
< label class = "label" > Normal label< / label >
< / div >
< div class = "field-body" >
< div class = "field" >
< div class = "control" >
< input class = "input" type = "text" placeholder = "Normal sized input" >
< / div >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label is-medium" >
< label class = "label" > Medium label< / label >
< / div >
< div class = "field-body" >
< div class = "field" >
< div class = "control" >
< input class = "input is-medium" type = "text" placeholder = "Medium sized input" >
< / div >
< / div >
< / div >
< / div >
< div class = "field is-horizontal" >
< div class = "field-label is-large" >
< label class = "label" > Large label< / label >
< / div >
< div class = "field-body" >
< div class = "field" >
< div class = "control" >
< input class = "input is-large" type = "text" placeholder = "Large sized input" >
< / div >
< / div >
< / div >
< / div >
< / div >
< figure class = "highlight" > < pre > < code class = "language-html" data-lang = "html" > < span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-horizontal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-label"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > No padding< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-body"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "checkbox"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > type=< / span > < span class = "s" > "checkbox"< / span > < span class = "nt" > > < / span >
Checkbox
< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-horizontal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-label is-small"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Small padding< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-body"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input is-small"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Small sized input"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-horizontal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-label is-normal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Normal label< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-body"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Normal sized input"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-horizontal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-label is-medium"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Medium label< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-body"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input is-medium"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Medium sized input"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field is-horizontal"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-label is-large"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < label< / span > < span class = "na" > class=< / span > < span class = "s" > "label"< / span > < span class = "nt" > > < / span > Large label< span class = "nt" > < /label> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field-body"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "field"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < div< / span > < span class = "na" > class=< / span > < span class = "s" > "control"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < input< / span > < span class = "na" > class=< / span > < span class = "s" > "input is-large"< / span > < span class = "na" > type=< / span > < span class = "s" > "text"< / span > < span class = "na" > placeholder=< / span > < span class = "s" > "Large sized input"< / span > < span class = "nt" > > < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span >
< span class = "nt" > < /div> < / span > < / code > < / pre > < / figure >
< / 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 > .
< 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.4.4: a modern CSS framework based on Flexbox" data-url = "http://bulma.io/versions/0.4.4" 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.4.4/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.4.4/images/css-reference-logo.png" alt = "CSS Reference logo" >
< / a >
< / li >
< li >
< a href = "http://htmlreference.io" >
< img src = "http://bulma.io/versions/0.4.4/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.4.4/vendor/clipboard-1.7.1.min.js" > < / script >
< script src = "http://bulma.io/versions/0.4.4/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 >
