Elysia Tools
Navegação
CSS Frameworks
Exemplos do Framework CSS Bulma
Exemplos do framework CSS Bulma incluindo colunas, componentes, controles de formulário, sistema de layout e padrões de design modernos baseados em CSS
Exemplos
Entradas desta coleção
CódigohtmlSimples
Colunas e Sistema de Grade Bulma
Exemplos completos do sistema de colunas Bulma com breakpoints responsivos e utilitários de layout flexíveis
Dificuldade
3/10
Tempo estimado
20 min
Etiquetas
bulma, columns, grid, layout, responsive
Pré-requisitos
HTML basics, CSS basics
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulma Columns and Grid System</title>
<!-- Bulma CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.demo-box {
background-color: #00d1b2;
color: white;
border-radius: 4px;
padding: 1rem;
text-align: center;
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.demo-box-alt {
background-color: #3273dc;
color: white;
border-radius: 4px;
padding: 1rem;
text-align: center;
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.demo-box-dark {
background-color: #363636;
color: white;
border-radius: 4px;
padding: 1rem;
text-align: center;
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container mt-4">
<h1 class="title">Bulma Columns and Grid System</h1>
<!-- Basic Columns -->
<h2 class="subtitle">Basic Columns</h2>
<div class="columns">
<div class="column">
<div class="demo-box">Column 1</div>
</div>
<div class="column">
<div class="demo-box">Column 2</div>
</div>
<div class="column">
<div class="demo-box">Column 3</div>
</div>
</div>
<!-- Column Sizes -->
<h2 class="subtitle mt-5">Column Sizes</h2>
<div class="columns">
<div class="column is-one-quarter">
<div class="demo-box">is-one-quarter</div>
</div>
<div class="column is-half">
<div class="demo-box">is-half</div>
</div>
<div class="column is-one-quarter">
<div class="demo-box">is-one-quarter</div>
</div>
</div>
<div class="columns">
<div class="column is-one-third">
<div class="demo-box-alt">is-one-third</div>
</div>
<div class="column is-two-thirds">
<div class="demo-box-alt">is-two-thirds</div>
</div>
</div>
<div class="columns">
<div class="column is-three-quarters">
<div class="demo-box-dark">is-three-quarters</div>
</div>
<div class="column is-one-quarter">
<div class="demo-box-dark">is-one-quarter</div>
</div>
</div>
<!-- 12 Column System -->
<h2 class="subtitle mt-5">12 Column System</h2>
<div class="columns">
<div class="column is-2">
<div class="demo-box">is-2</div>
</div>
<div class="column is-8">
<div class="demo-box">is-8</div>
</div>
<div class="column is-2">
<div class="demo-box">is-2</div>
</div>
</div>
<div class="columns">
<div class="column is-4">
<div class="demo-box-alt">is-4</div>
</div>
<div class="column is-4">
<div class="demo-box-alt">is-4</div>
</div>
<div class="column is-4">
<div class="demo-box-alt">is-4</div>
</div>
</div>
<!-- Offset Columns -->
<h2 class="subtitle mt-5">Offset Columns</h2>
<div class="columns">
<div class="column is-half is-offset-one-quarter">
<div class="demo-box">is-half is-offset-one-quarter</div>
</div>
</div>
<div class="columns">
<div class="column is-one-third is-offset-one-third">
<div class="demo-box-alt">is-one-third is-offset-one-third</div>
</div>
</div>
<!-- Narrow Columns -->
<h2 class="subtitle mt-5">Narrow Columns</h2>
<div class="columns">
<div class="column is-narrow">
<div class="demo-box" style="width: 150px;">Narrow Column</div>
</div>
<div class="column">
<div class="demo-box">Flexible Column</div>
</div>
</div>
<div class="columns">
<div class="column is-narrow">
<div class="demo-box-dark" style="width: 200px;">Narrow Column</div>
</div>
<div class="column is-narrow">
<div class="demo-box-dark" style="width: 150px;">Narrow Column</div>
</div>
<div class="column">
<div class="demo-box-dark">Flexible Column</div>
</div>
</div>
<!-- Responsive Columns -->
<h2 class="subtitle mt-5">Responsive Columns</h2>
<div class="columns">
<div class="column is-full-mobile is-half-tablet is-one-third-desktop is-one-quarter-widescreen">
<div class="demo-box">Full on mobile<br>Half on tablet<br>1/3 on desktop<br>1/4 on widescreen</div>
</div>
<div class="column is-full-mobile is-half-tablet is-one-third-desktop is-one-quarter-widescreen">
<div class="demo-box-alt">Full on mobile<br>Half on tablet<br>1/3 on desktop<br>1/4 on widescreen</div>
</div>
<div class="column is-full-mobile is-half-tablet is-one-third-desktop is-one-quarter-widescreen">
<div class="demo-box-dark">Full on mobile<br>Half on tablet<br>1/3 on desktop<br>1/4 on widescreen</div>
</div>
<div class="column is-full-mobile is-half-tablet is-one-third-desktop is-one-quarter-widescreen">
<div class="demo-box">Full on mobile<br>Half on tablet<br>1/3 on desktop<br>1/4 on widescreen</div>
</div>
</div>
<!-- Mobile Specific Columns -->
<h2 class="subtitle mt-5">Mobile Specific Columns</h2>
<div class="columns is-mobile">
<div class="column">
<div class="demo-box">Column 1</div>
</div>
<div class="column">
<div class="demo-box">Column 2</div>
</div>
<div class="column">
<div class="demo-box">Column 3</div>
</div>
</div>
<div class="columns is-mobile">
<div class="column is-half-mobile">
<div class="demo-box-alt">is-half-mobile</div>
</div>
<div class="column is-half-mobile">
<div class="demo-box-alt">is-half-mobile</div>
</div>
</div>
<!-- Multiline Columns -->
<h2 class="subtitle mt-5">Multiline Columns</h2>
<div class="columns is-multiline">
<div class="column is-one-quarter">
<div class="demo-box">Column 1</div>
</div>
<div class="column is-one-quarter">
<div class="demo-box">Column 2</div>
</div>
<div class="column is-one-quarter">
<div class="demo-box">Column 3</div>
</div>
<div class="column is-one-quarter">
<div class="demo-box">Column 4</div>
</div>
<div class="column is-one-quarter">
<div class="demo-box-alt">Column 5</div>
</div>
<div class="column is-one-quarter">
<div class="demo-box-alt">Column 6</div>
</div>
<div class="column is-one-quarter">
<div class="demo-box-alt">Column 7</div>
</div>
<div class="column is-one-quarter">
<div class="demo-box-alt">Column 8</div>
</div>
</div>
<!-- Gap Between Columns -->
<h2 class="subtitle mt-5">Gap Between Columns</h2>
<div class="columns is-gapless">
<div class="column">
<div class="demo-box">No Gap</div>
</div>
<div class="column">
<div class="demo-box">No Gap</div>
</div>
<div class="column">
<div class="demo-box">No Gap</div>
</div>
</div>
<div class="columns is-variable is-8">
<div class="column">
<div class="demo-box-alt">Variable Gap 8</div>
</div>
<div class="column">
<div class="demo-box-alt">Variable Gap 8</div>
</div>
<div class="column">
<div class="demo-box-alt">Variable Gap 8</div>
</div>
</div>
<!-- Centered Columns -->
<h2 class="subtitle mt-5">Centered Columns</h2>
<div class="columns">
<div class="column is-half is-offset-one-quarter">
<div class="demo-box-dark">Centered Column</div>
</div>
</div>
<div class="columns is-mobile">
<div class="column is-half is-offset-one-quarter">
<div class="demo-box-dark">Mobile Centered</div>
</div>
</div>
<!-- Nested Columns -->
<h2 class="subtitle mt-5">Nested Columns</h2>
<div class="columns">
<div class="column is-one-third">
<div class="demo-box" style="background-color: #48c774;">
Parent Column
</div>
</div>
<div class="column is-two-thirds">
<div class="demo-box" style="background-color: #ff3860;">
<div class="columns">
<div class="column">
<div class="demo-box" style="background-color: #3298dc; min-height: 60px;">Nested 1</div>
</div>
<div class="column">
<div class="demo-box" style="background-color: #3298dc; min-height: 60px;">Nested 2</div>
</div>
</div>
</div>
</div>
</div>
<!-- Vertical Alignment -->
<h2 class="subtitle mt-5">Vertical Alignment</h2>
<div class="columns">
<div class="column">
<div class="demo-box" style="height: 200px;">Short Column</div>
</div>
<div class="column is-flex is-align-items-flex-start">
<div class="demo-box-alt" style="height: 150px;">Flex Start</div>
</div>
<div class="column is-flex is-align-items-center">
<div class="demo-box-dark" style="height: 100px;">Flex Center</div>
</div>
<div class="column is-flex is-align-items-flex-end">
<div class="demo-box" style="height: 80px;">Flex End</div>
</div>
</div>
<!-- Different Column Heights -->
<h2 class="subtitle mt-5">Different Column Heights</h2>
<div class="columns">
<div class="column">
<div class="demo-box" style="height: 250px;">
<p>Tall Column Content</p>
<p>More content...</p>
<p>Even more content...</p>
</div>
</div>
<div class="column">
<div class="demo-box" style="height: 150px;">
<p>Medium Column</p>
</div>
</div>
<div class="column">
<div class="demo-box" style="height: 100px;">
<p>Short Column</p>
</div>
</div>
</div>
<!-- Hero Section with Columns -->
<h2 class="subtitle mt-5">Hero Section with Columns</h2>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column is-8">
<h1 class="title is-2">Hero Title</h1>
<p class="subtitle is-4">This is a hero section using Bulma columns</p>
</div>
<div class="column is-4 has-text-right">
<button class="button is-large is-light">Get Started</button>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- No JavaScript required for basic Bulma columns -->
</body>
</html>CódigohtmlIntermediário
Componentes UI Bulma
Componentes UI essenciais Bulma incluindo botões, cards, modais, notificações, tags e objetos de mídia
Dificuldade
4/10
Tempo estimado
35 min
Etiquetas
bulma, components, ui, elements
Pré-requisitos
HTML basics, CSS basics, Bulma grid system
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulma UI Components</title>
<!-- Bulma CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="container mt-4">
<h1 class="title">Bulma UI Components</h1>
<!-- Buttons -->
<h2 class="subtitle">Buttons</h2>
<div class="buttons">
<button class="button is-primary">Primary</button>
<button class="button is-secondary">Secondary</button>
<button class="button is-success">Success</button>
<button class="button is-danger">Danger</button>
<button class="button is-warning">Warning</button>
<button class="button is-info">Info</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>
<button class="button is-link">Link</button>
</div>
<div class="buttons mt-3">
<button class="button is-primary is-outlined">Primary Outlined</button>
<button class="button is-success is-outlined">Success Outlined</button>
<button class="button is-danger is-outlined">Danger Outlined</button>
<button class="button is-info is-outlined">Info Outlined</button>
</div>
<div class="buttons mt-3">
<button class="button is-primary is-inverted">Primary Inverted</button>
<button class="button is-success is-inverted">Success Inverted</button>
<button class="button is-danger is-inverted">Danger Inverted</button>
</div>
<div class="buttons mt-3">
<button class="button is-primary is-rounded">Rounded</button>
<button class="button is-success is-large">Large</button>
<button class="button is-info is-medium">Medium</button>
<button class="button is-warning is-small">Small</button>
</div>
<!-- Button Groups -->
<h3 class="title is-4 mt-5">Button Groups</h3>
<div class="buttons has-addons">
<button class="button">Yes</button>
<button class="button">Maybe</button>
<button class="button">No</button>
</div>
<div class="buttons has-addons mt-3">
<button class="button is-success is-selected">Selected</button>
<button class="button">Not selected</button>
<button class="button">Not selected</button>
</div>
<!-- Icons -->
<h3 class="title is-4 mt-5">Buttons with Icons</h3>
<div class="buttons">
<button class="button">
<span class="icon is-small">
<i class="fas fa-bold"></i>
</span>
<span>Bold</span>
</button>
<button class="button is-primary">
<span class="icon">
<i class="fas fa-download"></i>
</span>
<span>Download</span>
</button>
<button class="button is-success">
<span class="icon">
<i class="fas fa-check"></i>
</span>
<span>Save</span>
</button>
<button class="button is-danger is-outlined">
<span>Delete</span>
<span class="icon is-small">
<i class="fas fa-times"></i>
</span>
</button>
</div>
<!-- Box -->
<h2 class="subtitle mt-5">Box Component</h2>
<div class="box">
<div class="media">
<div class="media-left">
<figure class="image is-64x64">
<img src="https://bulma.io/images/placeholders/128x128.png" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a>@bulmaio</a>. <a>#css</a> <a>#responsive</a></p>
</div>
</div>
</div>
<!-- Cards -->
<h2 class="subtitle mt-5">Cards</h2>
<div class="columns">
<div class="column is-4">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">Jane Doe</p>
<p class="subtitle is-6">@janedoe</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
<a>@bulmaio</a>. <a>#css</a> <a>#responsive</a>
<br>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Save</a>
<a href="#" class="card-footer-item">Edit</a>
<a href="#" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
<div class="column is-4">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Component
</p>
<button class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</header>
<div class="card-content">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
<br>
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Save</a>
<a href="#" class="card-footer-item">Edit</a>
<a href="#" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
<div class="column is-4">
<div class="card">
<div class="card-content">
<p class="title">
"There are two hard things in computer science: cache invalidation and naming things."
</p>
<p class="subtitle">
- Phil Karlton
</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<span>
Share on
<a href="#">Twitter</a>
</span>
</p>
</footer>
</div>
</div>
</div>
<!-- Notifications -->
<h2 class="subtitle mt-5">Notifications</h2>
<div class="notification is-primary">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit
</div>
<div class="notification is-link">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit
</div>
<div class="notification is-info">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit
</div>
<div class="notification is-success">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit
</div>
<div class="notification is-warning">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit
</div>
<div class="notification is-danger">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit
</div>
<!-- Tags -->
<h2 class="subtitle mt-5">Tags</h2>
<span class="tag">Tag</span>
<span class="tag is-primary">Primary</span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Success</span>
<span class="tag is-warning">Warning</span>
<span class="tag is-danger">Danger</span>
<div class="field is-grouped mt-3">
<div class="control">
<div class="tags has-addons">
<span class="tag is-link">Programming</span>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Python</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags">
<a class="tag is-link">One</a>
<a class="tag is-link">Two</a>
<span class="tag is-link">Three</span>
</div>
</div>
</div>
<!-- Progress Bars -->
<h2 class="subtitle mt-5">Progress Bars</h2>
<progress class="progress" value="30" max="100">30%</progress>
<progress class="progress is-primary" value="45" max="100">45%</progress>
<progress class="progress is-info" value="60" max="100">60%</progress>
<progress class="progress is-success" value="75" max="100">75%</progress>
<progress class="progress is-warning" value="90" max="100">90%</progress>
<progress class="progress is-danger" value="100" max="100">100%</progress>
<!-- Small Progress -->
<h3 class="title is-4 mt-4">Small Progress</h3>
<progress class="progress is-small is-primary" value="30" max="100">30%</progress>
<!-- Tabs -->
<h2 class="subtitle mt-5">Tabs</h2>
<div class="tabs">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
</ul>
</div>
<div class="tabs is-boxed">
<ul>
<li class="is-active">
<a>Pictures</a>
</li>
<li>
<a>Music</a>
</li>
<li>
<a>Videos</a>
</li>
</ul>
</div>
<div class="tabs is-toggle">
<ul>
<li class="is-active">
<a>Yes</a>
</li>
<li>
<a>Maybe</a>
</li>
<li>
<a>No</a>
</li>
</ul>
</div>
<!-- Breadcrumb -->
<h2 class="subtitle mt-5">Breadcrumb</h2>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Components</a></li>
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
</ul>
</nav>
<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Components</a></li>
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
</ul>
</nav>
<!-- Pagination -->
<h2 class="subtitle mt-5">Pagination</h2>
<nav class="pagination" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
</ul>
</nav>
<!-- Panel -->
<h2 class="subtitle mt-5">Panel</h2>
<nav class="panel">
<p class="panel-heading">
Repositories
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input" type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Public</a>
<a>Private</a>
<a>Sources</a>
<a>Forks</a>
</p>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
bulma
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
marksheet
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
minireset.css
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
jgthms.github.io
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-code-branch" aria-hidden="true"></i>
</span>
danny-css
</a>
<label class="panel-block">
<input type="checkbox">
remember me
</label>
</nav>
<!-- Media Object -->
<h2 class="subtitle mt-5">Media Object</h2>
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="https://bulma.io/images/placeholders/128x128.png" alt="Image">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie, est eget eleifend molestie, nunc dui molestie eros, vel euismod elit quam quis dolor. Proin porttitor neque id consequat tristique.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item" aria-label="like">
<span class="icon is-small"><i class="fas fa-heart" aria-hidden="true"></i></span>
</a>
<a class="level-item" aria-label="retweet">
<span class="icon is-small"><i class="fas fa-retweet" aria-hidden="true"></i></span>
</a>
<a class="level-item" aria-label="reply">
<span class="icon is-small"><i class="fas fa-reply" aria-hidden="true"></i></span>
</a>
</div>
</nav>
</div>
<div class="media-right">
<button class="delete"></button>
</div>
</article>
<!-- Level -->
<h2 class="subtitle mt-5">Level</h2>
<nav class="level">
<div class="level-left">
<div class="level-item">
<p class="subtitle is-5">
<strong>123</strong> posts
</p>
</div>
<div class="level-item">
<div class="field has-addons">
<p class="control">
<input class="input" type="text" placeholder="Find a post">
</p>
<p class="control">
<button class="button">
Search
</button>
</p>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field is-grouped">
<p class="control">
<button class="button">
<i class="fas fa-reply"></i>
</button>
</p>
<p class="control">
<button class="button">
<i class="fas fa-retweet"></i>
</button>
</p>
<p class="control">
<button class="button">
<i class="fas fa-heart"></i>
</button>
</p>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>CódigohtmlIntermediário
Controles de Formulário Bulma
Controles de formulário Bulma incluindo inputs, textareas, selects, checkboxes, radio buttons e helpers de validação
Dificuldade
5/10
Tempo estimado
40 min
Etiquetas
bulma, forms, controls, validation, ui
Pré-requisitos
HTML forms, Bulma basics, CSS basics
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulma Form Controls</title>
<!-- Bulma CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="container mt-4">
<h1 class="title">Bulma Form Controls</h1>
<!-- Basic Form -->
<h2 class="subtitle">Basic Form</h2>
<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="fas fa-user"></i>
</span>
<span class="icon is-small is-right">
<i class="fas 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="email" placeholder="Email input" value="hello@">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-exclamation-triangle"></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 is-grouped">
<div class="control">
<button class="button is-link">Submit</button>
</div>
<div class="control">
<button class="button is-link is-light">Cancel</button>
</div>
</div>
<!-- Normal Sizes -->
<h2 class="subtitle mt-5">Input Sizes</h2>
<div class="field">
<label class="label">Small Input</label>
<div class="control">
<input class="input is-small" type="text" placeholder="Small input">
</div>
</div>
<div class="field">
<label class="label">Normal Input</label>
<div class="control">
<input class="input" type="text" placeholder="Normal input">
</div>
</div>
<div class="field">
<label class="label">Medium Input</label>
<div class="control">
<input class="input is-medium" type="text" placeholder="Medium input">
</div>
</div>
<div class="field">
<label class="label">Large Input</label>
<div class="control">
<input class="input is-large" type="text" placeholder="Large input">
</div>
</div>
<!-- Input States -->
<h2 class="subtitle mt-5">Input States</h2>
<div class="field">
<label class="label">Normal Input</label>
<div class="control">
<input class="input" type="text" placeholder="Normal input">
</div>
</div>
<div class="field">
<label class="label">Hover Input</label>
<div class="control">
<input class="input is-hovered" type="text" placeholder="Hovered input">
</div>
</div>
<div class="field">
<label class="label">Focus Input</label>
<div class="control">
<input class="input is-focused" type="text" placeholder="Focused input">
</div>
</div>
<div class="field">
<label class="label">Loading Input</label>
<div class="control is-loading">
<input class="input" type="text" placeholder="Loading input">
</div>
</div>
<div class="field">
<label class="label">Disabled Input</label>
<div class="control">
<input class="input" type="text" placeholder="Disabled input" disabled>
</div>
</div>
<div class="field">
<label class="label">Readonly Input</label>
<div class="control">
<input class="input" type="text" placeholder="Readonly input" value="Readonly" readonly>
</div>
</div>
<!-- Input Colors -->
<h2 class="subtitle mt-5">Input Colors</h2>
<div class="field">
<label class="label">Primary Input</label>
<div class="control">
<input class="input is-primary" type="text" placeholder="Primary input">
</div>
</div>
<div class="field">
<label class="label">Info Input</label>
<div class="control">
<input class="input is-info" type="text" placeholder="Info input">
</div>
</div>
<div class="field">
<label class="label">Success Input</label>
<div class="control">
<input class="input is-success" type="text" placeholder="Success input">
</div>
</div>
<div class="field">
<label class="label">Warning Input</label>
<div class="control">
<input class="input is-warning" type="text" placeholder="Warning input">
</div>
</div>
<div class="field">
<label class="label">Danger Input</label>
<div class="control">
<input class="input is-danger" type="text" placeholder="Danger input">
</div>
</div>
<!-- Checkboxes and Radios -->
<h2 class="subtitle mt-5">Checkboxes and Radios</h2>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox">
Remember me
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" checked>
I agree to the <a href="#">terms and conditions</a>
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" disabled>
Disabled checkbox
</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">
<div class="control">
<label class="radio">
<input type="radio" name="answer" checked>
Maybe
</label>
<label class="radio">
<input type="radio" name="answer">
Definitely
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="radio">
<input type="radio" name="option" disabled>
Disabled radio
</label>
</div>
</div>
<!-- File Input -->
<h2 class="subtitle mt-5">File Input</h2>
<div class="field">
<div class="file">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</div>
<div class="field">
<div class="file is-primary">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Primary file…
</span>
</span>
</label>
</div>
</div>
<div class="field">
<div class="file is-info has-name">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Info file…
</span>
</span>
<span class="file-name">
Screen Shot 2017-07-29 at 15.54.25.png
</span>
</label>
</div>
</div>
<div class="field">
<div class="file is-boxed is-success">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-cloud-upload-alt"></i>
</span>
<span class="file-label">
Success file…
</span>
</span>
</label>
</div>
</div>
<div class="field">
<div class="file is-medium is-right">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose file…
</span>
</span>
</label>
</div>
</div>
<!-- Addons -->
<h2 class="subtitle mt-5">Form Addons</h2>
<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 class="field has-addons">
<div class="control">
<span class="select">
<select>
<option>$</option>
<option>£</option>
<option>€</option>
</select>
</span>
</div>
<div class="control is-expanded">
<input class="input" type="text" placeholder="Amount of money">
</div>
<div class="control">
<a class="button is-primary">
Transfer
</a>
</div>
</div>
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Your email">
</div>
<div class="control">
<a class="button is-static">
@gmail.com
</a>
</div>
</div>
<div class="field has-addons">
<div class="control">
<button class="button">
<span class="icon is-small">
<i class="fas fa-bold"></i>
</span>
</button>
</div>
<div class="control">
<button class="button">
<span class="icon is-small">
<i class="fas fa-italic"></i>
</span>
</button>
</div>
<div class="control">
<button class="button">
<span class="icon is-small">
<i class="fas fa-underline"></i>
</span>
</button>
</div>
</div>
<div class="field has-addons has-addons-centered">
<div class="control">
<button class="button is-primary is-large">
<span class="icon is-medium">
<i class="fas fa-star"></i>
</span>
<span>Star</span>
</button>
</div>
<div class="control">
<button class="button is-danger is-large">
<span>Delete</span>
<span class="icon is-medium">
<i class="fas fa-trash"></i>
</span>
</button>
</div>
</div>
<div class="field has-addons has-addons-right">
<div class="control">
<button class="button is-info">
<span class="icon is-small">
<i class="fas fa-search"></i>
</span>
</button>
</div>
<div class="control is-expanded">
<input class="input" type="text" placeholder="Search...">
</div>
</div>
<!-- Horizontal Form -->
<h2 class="subtitle mt-5">Horizontal Form</h2>
<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="fas 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="[email protected]">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas 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-grouped">
<div class="control">
<button class="button is-primary">
<span class="icon is-small">
<i class="fas fa-save"></i>
</span>
<span>Save</span>
</button>
</div>
<div class="control">
<button class="button is-light">
Cancel
</button>
</div>
</div>
</div>
</div>
<!-- Help Text -->
<h2 class="subtitle mt-5">Help Text</h2>
<div class="field">
<label class="label">Input with Help</label>
<div class="control">
<input class="input" type="text" placeholder="Text input with help">
</div>
<p class="help">This is a help text</p>
</div>
<div class="field">
<label class="label">Input with Success Help</label>
<div class="control">
<input class="input is-success" type="text" placeholder="Success input">
</div>
<p class="help is-success">This is a success help text</p>
</div>
<div class="field">
<label class="label">Input with Warning Help</label>
<div class="control">
<input class="input is-warning" type="text" placeholder="Warning input">
</div>
<p class="help is-warning">This is a warning help text</p>
</div>
<div class="field">
<label class="label">Input with Danger Help</label>
<div class="control">
<input class="input is-danger" type="text" placeholder="Danger input">
</div>
<p class="help is-danger">This is a danger help text</p>
</div>
<!-- Form Groups -->
<h2 class="subtitle mt-5">Form Groups</h2>
<div class="field is-grouped">
<p class="control">
<a class="button is-primary">
Submit
</a>
</p>
<p class="control">
<button class="button is-light">
Cancel
</button>
</p>
</div>
<div class="field is-grouped is-grouped-centered">
<p class="control">
<a class="button is-primary is-outlined">
Yes
</a>
</p>
<p class="control">
<button class="button is-danger is-outlined">
No
</button>
</p>
</div>
<div class="field is-grouped is-grouped-right">
<p class="control">
<button class="button is-primary">
<span class="icon is-small">
<i class="fas fa-save"></i>
</span>
<span>Save</span>
</button>
</p>
<p class="control">
<button class="button is-info">
<span class="icon is-small">
<i class="fas fa-download"></i>
</span>
<span>Download</span>
</button>
</p>
</div>
<!-- Textarea Sizes -->
<h2 class="subtitle mt-5">Textarea Sizes</h2>
<div class="field">
<label class="label">Small Textarea</label>
<div class="control">
<textarea class="textarea is-small" placeholder="Small textarea"></textarea>
</div>
</div>
<div class="field">
<label class="label">Normal Textarea</label>
<div class="control">
<textarea class="textarea" placeholder="Normal textarea"></textarea>
</div>
</div>
<div class="field">
<label class="label">Medium Textarea</label>
<div class="control">
<textarea class="textarea is-medium" placeholder="Medium textarea"></textarea>
</div>
</div>
<div class="field">
<label class="label">Large Textarea</label>
<div class="control">
<textarea class="textarea is-large" placeholder="Large textarea"></textarea>
</div>
</div>
<!-- Select Sizes -->
<h2 class="subtitle mt-5">Select Sizes</h2>
<div class="field">
<div class="control">
<div class="select is-small">
<select>
<option>Small select</option>
<option>With options</option>
</select>
</div>
</div>
</div>
<div class="field">
<div class="control">
<div class="select">
<select>
<option>Normal select</option>
<option>With options</option>
</select>
</div>
</div>
</div>
<div class="field">
<div class="control">
<div class="select is-medium">
<select>
<option>Medium select</option>
<option>With options</option>
</select>
</div>
</div>
</div>
<div class="field">
<div class="control">
<div class="select is-large">
<select>
<option>Large select</option>
<option>With options</option>
</select>
</div>
</div>
</div>
<!-- Multiple Select -->
<h2 class="subtitle mt-5">Multiple Select</h2>
<div class="field">
<div class="control">
<div class="select is-multiple">
<select multiple size="8">
<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>
<!-- Loading State -->
<h2 class="subtitle mt-5">Loading State</h2>
<div class="field">
<div class="control is-loading">
<input class="input" type="text" placeholder="Loading input">
</div>
</div>
<div class="field">
<div class="control is-loading is-large">
<input class="input is-large" type="text" placeholder="Loading input">
</div>
</div>
<div class="field">
<div class="control is-loading">
<textarea class="textarea" placeholder="Loading textarea"></textarea>
</div>
</div>
</div>
</body>
</html>CódigohtmlIntermediário
Layouts e Heróis Bulma
Componentes de layout Bulma incluindo seções de herói, containers, níveis, footers e padrões de navegação responsivos
Dificuldade
5/10
Tempo estimado
35 min
Etiquetas
bulma, layout, hero, navbar, components
Pré-requisitos
HTML layout, Bulma basics, Responsive design
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulma Layouts and Heroes</title>
<!-- Bulma CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<!-- Basic Hero -->
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">Basic Hero</h1>
<p class="subtitle">Basic hero component with title and subtitle</p>
</div>
</div>
</section>
<!-- Hero with Color Variations -->
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<h1 class="title">Info Hero</h1>
<p class="subtitle">Information hero section</p>
</div>
</div>
</section>
<section class="hero is-success">
<div class="hero-body">
<div class="container">
<h1 class="title">Success Hero</h1>
<p class="subtitle">Success message hero</p>
</div>
</div>
</section>
<section class="hero is-warning">
<div class="hero-body">
<div class="container">
<h1 class="title">Warning Hero</h1>
<p class="subtitle">Warning alert hero</p>
</div>
</div>
</section>
<section class="hero is-danger">
<div class="hero-body">
<div class="container">
<h1 class="title">Danger Hero</h1>
<p class="subtitle">Danger alert hero</p>
</div>
</div>
</section>
<section class="hero is-light">
<div class="hero-body">
<div class="container">
<h1 class="title">Light Hero</h1>
<p class="subtitle">Light colored hero section</p>
</div>
</div>
</section>
<section class="hero is-dark">
<div class="hero-body">
<div class="container">
<h1 class="title">Dark Hero</h1>
<p class="subtitle">Dark themed hero section</p>
</div>
</div>
</section>
<!-- Hero with Gradient -->
<section class="hero is-primary is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">Bold Gradient Hero</h1>
<p class="subtitle">Hero with gradient background</p>
</div>
</div>
</section>
<!-- Hero with Full Height -->
<section class="hero is-info is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title">Full Height Hero</h1>
<p class="subtitle">This hero spans the full viewport height</p>
</div>
</div>
<div class="hero-foot">
<nav class="tabs">
<ul>
<li class="is-active"><a>Overview</a></li>
<li><a>Components</a></li>
<li><a>Layout</a></li>
<li><a>Form</a></li>
<li><a>Elements</a></li>
<li><a>Helpers</a></li>
</ul>
</nav>
</div>
</section>
<!-- Container Examples -->
<div class="container mt-5">
<h1 class="title">Container Examples</h1>
<div class="notification is-info">
This is a normal container (max-width: 1152px)
</div>
</div>
<div class="container is-fluid mt-4">
<div class="notification is-warning">
This is a fluid container (full-width)
</div>
</div>
<div class="container is-widescreen mt-4">
<div class="notification is-success">
This is a widescreen container (max-width: 1344px)
</div>
</div>
<div class="container is-fullhd mt-4">
<div class="notification is-danger">
This is a fullhd container (max-width: 1408px)
</div>
</div>
<!-- Level Examples -->
<div class="container mt-5">
<h1 class="title">Level Examples</h1>
<!-- Basic Level -->
<nav class="level">
<div class="level-left">
<div class="level-item">
<p class="subtitle is-5">
<strong>123</strong> posts
</p>
</div>
<div class="level-item">
<div class="field has-addons">
<p class="control">
<input class="input" type="text" placeholder="Find a post">
</p>
<p class="control">
<button class="button">Search</button>
</p>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field is-grouped">
<p class="control">
<button class="button">
<i class="fas fa-reply"></i>
</button>
</p>
<p class="control">
<button class="button">
<i class="fas fa-retweet"></i>
</button>
</p>
<p class="control">
<button class="button">
<i class="fas fa-heart"></i>
</button>
</p>
</div>
</div>
</div>
</nav>
<!-- Mobile Level -->
<nav class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p class="subtitle is-5">
<strong>Artists</strong>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field has-addons">
<p class="control">
<input class="input" type="text" placeholder="Search artists">
</p>
<p class="control">
<button class="button">Search</button>
</p>
</div>
</div>
</div>
</nav>
<!-- Level with Navigation -->
<nav class="level">
<div class="level-item has-text-centered">
<div>
<p class="heading">Tweets</p>
<p class="title">3,456</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Following</p>
<p class="title">123</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Followers</p>
<p class="title">456K</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Likes</p>
<p class="title">789</p>
</div>
</div>
</nav>
</div>
<!-- Media Object Layout -->
<div class="container mt-5">
<h1 class="title">Media Object Layout</h1>
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="https://bulma.io/images/placeholders/128x128.png" alt="Image">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum eget.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="fas fa-heart"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fas fa-retweet"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fas fa-reply"></i></span>
</a>
</div>
</nav>
</div>
<div class="media-right">
<button class="delete"></button>
</div>
</article>
</div>
<!-- Navigation Layout -->
<div class="container mt-5">
<h1 class="title">Navigation Layout</h1>
<!-- Navbar -->
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
<!-- Breadcrumb -->
<nav class="breadcrumb mt-4" aria-label="breadcrumbs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Components</a></li>
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
</ul>
</nav>
<!-- Tabs -->
<div class="tabs mt-4">
<ul>
<li class="is-active">
<a>Overview</a>
</li>
<li>
<a>Modifiers</a>
</li>
<li>
<a>Grid</a>
</li>
<li>
<a>Elements</a>
</li>
<li>
<a>Components</a>
</li>
<li>
<a>Layout</a>
</li>
</ul>
</div>
</div>
<!-- Footer -->
<footer class="footer mt-6">
<div class="container">
<div class="content has-text-centered">
<p>
<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>.
The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
The website content is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
</p>
</div>
</div>
</footer>
<!-- Complex Hero with Background -->
<section class="hero is-medium is-primary is-bold" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); background-size: cover; background-position: center;">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title is-1 has-text-white">Background Image Hero</h1>
<p class="subtitle is-3 has-text-white">Hero with background image and overlay</p>
<div class="buttons is-centered mt-4">
<button class="button is-large is-primary is-inverted">Get Started</button>
<button class="button is-large is-light">Learn More</button>
</div>
</div>
</div>
</section>
<!-- Split Hero -->
<section class="hero is-medium">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column is-6">
<h1 class="title">Split Layout Hero</h1>
<p class="subtitle">Hero with text on the left and image on the right</p>
<div class="buttons mt-4">
<button class="button is-primary">Primary Action</button>
<button class="button is-light">Secondary Action</button>
</div>
</div>
<div class="column is-6">
<figure class="image is-16by9">
<img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Placeholder image">
</figure>
</div>
</div>
</div>
</div>
</section>
<!-- Minimal Hero -->
<section class="hero is-small">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title is-4">Minimal Hero</h1>
<p class="subtitle is-6">Simple and clean hero section</p>
</div>
</div>
</section>
<!-- Call to Action Hero -->
<section class="hero is-warning">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title is-2">Ready to Get Started?</h1>
<p class="subtitle is-4">Join thousands of developers using Bulma today</p>
<div class="buttons is-centered mt-4">
<button class="button is-large is-primary">Start Free Trial</button>
<button class="button is-large is-light">View Demo</button>
</div>
</div>
</div>
</section>
<!-- Navbar Example -->
<div class="container mt-5">
<h1 class="title">More Navigation Examples</h1>
<!-- Colored Navbar -->
<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="#">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<a class="navbar-item">
Blog
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">
Home
</a>
<a class="navbar-item" href="#">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<input class="input" type="text" placeholder="Find a repository">
</p>
<p class="control">
<button class="button is-info">
Search
</button>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
<!-- Final Footer -->
<footer class="footer">
<div class="container">
<div class="columns">
<div class="column is-4">
<h4 class="title is-4">About Us</h4>
<p>Company description and mission statement goes here.</p>
</div>
<div class="column is-2">
<h4 class="title is-5">Products</h4>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
</ul>
</div>
<div class="column is-2">
<h4 class="title is-5">Resources</h4>
<ul>
<li><a href="#">Documentation</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="column is-4">
<h4 class="title is-5">Contact</h4>
<p>
Email: info@example.com<br>
Phone: (123) 456-7890<br>
Address: 123 Main St, City, State 12345
</p>
<div class="social-icons mt-3">
<a href="#" class="icon"><i class="fab fa-facebook"></i></a>
<a href="#" class="icon"><i class="fab fa-twitter"></i></a>
<a href="#" class="icon"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<hr>
<div class="content has-text-centered">
<p>© 2024 Example Company. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Enable navbar burger toggle for mobile navigation.
document.querySelectorAll('.navbar-burger').forEach((burger) => {
burger.addEventListener('click', () => {
const targetId = burger.dataset.target;
const target = targetId ? document.getElementById(targetId) : null;
burger.classList.toggle('is-active');
if (target) {
target.classList.toggle('is-active');
}
});
});
</script>
</body>
</html>CódigohtmlSimples
Modificadores e Helpers Bulma
Classes de utilidade Bulma para cores, espaçamento, tipografia, tamanho, posicionamento e design responsivo
Dificuldade
4/10
Tempo estimado
30 min
Etiquetas
bulma, modifiers, helpers, utilities, css
Pré-requisitos
CSS basics, Bulma basics
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulma Modifiers and Helpers</title>
<!-- Bulma CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.demo-box {
background-color: #00d1b2;
color: white;
border-radius: 4px;
padding: 1rem;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.demo-box-alt {
background-color: #3273dc;
color: white;
border-radius: 4px;
padding: 1rem;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.spacing-demo {
border: 2px solid #ff3860;
background-color: #fff5f5;
padding: 1rem;
margin-bottom: 1rem;
}
</style>
</head>
<body>
<div class="container mt-4">
<h1 class="title">Bulma Modifiers and Helpers</h1>
<!-- Color Modifiers -->
<h2 class="subtitle">Color Modifiers</h2>
<div class="columns">
<div class="column">
<div class="demo-box has-background-primary">has-background-primary</div>
</div>
<div class="column">
<div class="demo-box has-background-info">has-background-info</div>
</div>
<div class="column">
<div class="demo-box has-background-success">has-background-success</div>
</div>
<div class="column">
<div class="demo-box has-background-warning">has-background-warning</div>
</div>
<div class="column">
<div class="demo-box has-background-danger">has-background-danger</div>
</div>
</div>
<div class="columns mt-3">
<div class="column">
<p class="has-text-primary">Primary text</p>
</div>
<div class="column">
<p class="has-text-info">Info text</p>
</div>
<div class="column">
<p class="has-text-success">Success text</p>
</div>
<div class="column">
<p class="has-text-warning">Warning text</p>
</div>
<div class="column">
<p class="has-text-danger">Danger text</p>
</div>
</div>
<!-- Typography -->
<h2 class="subtitle mt-5">Typography</h2>
<h1 class="title is-1">Title is-1</h1>
<h2 class="title is-2">Title is-2</h2>
<h3 class="title is-3">Title is-3</h3>
<h4 class="title is-4">Title is-4</h4>
<h5 class="title is-5">Title is-5</h5>
<h6 class="title is-6">Title is-6</h6>
<h1 class="subtitle is-1">Subtitle is-1</h1>
<h2 class="subtitle is-2">Subtitle is-2</h2>
<h3 class="subtitle is-3">Subtitle is-3</h3>
<h4 class="subtitle is-4">Subtitle is-4</h4>
<h5 class="subtitle is-5">Subtitle is-5</h5>
<h6 class="subtitle is-6">Subtitle is-6</h6>
<!-- Text Alignment -->
<h3 class="title is-4 mt-5">Text Alignment</h3>
<p class="has-text-left">Left aligned text</p>
<p class="has-text-centered">Center aligned text</p>
<p class="has-text-right">Right aligned text</p>
<p class="has-text-justified">Justified text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum eget.</p>
<!-- Text Transform -->
<h3 class="title is-4 mt-5">Text Transform</h3>
<p class="is-capitalized">capitalized text</p>
<p class="is-lowercase">LOWERCASE TEXT</p>
<p class="is-uppercase">uppercase text</p>
<p class="is-italic">italic text</p>
<p class="has-text-weight-light">Light weight text</p>
<p class="has-text-weight-normal">Normal weight text</p>
<p class="has-text-weight-semibold">Semibold text</p>
<p class="has-text-weight-bold">Bold text</p>
<!-- Text Size -->
<h3 class="title is-4 mt-5">Text Size</h3>
<p class="is-size-1">is-size-1</p>
<p class="is-size-2">is-size-2</p>
<p class="is-size-3">is-size-3</p>
<p class="is-size-4">is-size-4</p>
<p class="is-size-5">is-size-5</p>
<p class="is-size-6">is-size-6</p>
<p class="is-size-7">is-size-7</p>
<!-- Spacing -->
<h2 class="subtitle mt-5">Spacing</h2>
<div class="spacing-demo">
<p class="m-0">No margin (m-0)</p>
</div>
<div class="spacing-demo">
<p class="m-1">Small margin (m-1)</p>
</div>
<div class="spacing-demo">
<p class="m-2">Medium margin (m-2)</p>
</div>
<div class="spacing-demo">
<p class="m-3">Large margin (m-3)</p>
</div>
<div class="spacing-demo">
<p class="m-4">Extra large margin (m-4)</p>
</div>
<div class="spacing-demo">
<p class="m-5">Extra extra large margin (m-5)</p>
</div>
<div class="spacing-demo">
<p class="m-6">Extra extra extra large margin (m-6)</p>
</div>
<h3 class="title is-4 mt-5">Padding</h3>
<div class="spacing-demo p-0">No padding (p-0)</div>
<div class="spacing-demo p-1">Small padding (p-1)</div>
<div class="spacing-demo p-2">Medium padding (p-2)</div>
<div class="spacing-demo p-3">Large padding (p-3)</div>
<div class="spacing-demo p-4">Extra large padding (p-4)</div>
<div class="spacing-demo p-5">Extra extra large padding (p-5)</div>
<div class="spacing-demo p-6">Extra extra extra large padding (p-6)</div>
<!-- Directional Spacing -->
<h3 class="title is-4 mt-5">Directional Spacing</h3>
<div class="spacing-demo mt-0">No top margin</div>
<div class="spacing-demo mb-3">Bottom margin (mb-3)</div>
<div class="spacing-demo ml-3">Left margin (ml-3)</div>
<div class="spacing-demo mr-3">Right margin (mr-3)</div>
<div class="spacing-demo mx-3">Horizontal margin (mx-3)</div>
<div class="spacing-demo my-3">Vertical margin (my-3)</div>
<div class="spacing-demo pt-3">Top padding (pt-3)</div>
<div class="spacing-demo pb-3">Bottom padding (pb-3)</div>
<div class="spacing-demo pl-3">Left padding (pl-3)</div>
<div class="spacing-demo pr-3">Right padding (pr-3)</div>
<div class="spacing-demo px-3">Horizontal padding (px-3)</div>
<div class="spacing-demo py-3">Vertical padding (py-3)</div>
<!-- Display -->
<h2 class="subtitle mt-5">Display</h2>
<div class="block">
<div class="demo-box is-block">Block element</div>
</div>
<div class="demo-box is-inline">Inline element</div>
<div class="demo-box is-inline-block">Inline-block element</div>
<div class="demo-box is-flex">Flex element</div>
<div class="demo-box is-inline-flex">Inline-flex element</div>
<div class="demo-box is-hidden">Hidden element (can't see this)</div>
<!-- Flexbox Helpers -->
<h3 class="title is-4 mt-5">Flexbox Helpers</h3>
<div class="demo-box is-flex is-justify-content-center">Justify content center</div>
<div class="demo-box is-flex is-justify-content-start">Justify content start</div>
<div class="demo-box is-flex is-justify-content-end">Justify content end</div>
<div class="demo-box is-flex is-justify-content-space-between">Justify content space-between</div>
<div class="demo-box is-flex is-justify-content-space-around">Justify content space-around</div>
<div class="demo-box is-flex is-align-items-center">Align items center</div>
<div class="demo-box is-flex is-align-items-start">Align items start</div>
<div class="demo-box is-flex is-align-items-end">Align items end</div>
<div class="demo-box is-flex is-align-items-stretch">Align items stretch</div>
<!-- Direction -->
<div class="demo-box is-flex is-flex-direction-row">Flex direction row</div>
<div class="demo-box is-flex is-flex-direction-row-reverse">Flex direction row-reverse</div>
<div class="demo-box is-flex is-flex-direction-column">Flex direction column</div>
<div class="demo-box is-flex is-flex-direction-column-reverse">Flex direction column-reverse</div>
<!-- Wrap -->
<div class="demo-box is-flex is-flex-wrap-wrap">Flex wrap wrap</div>
<div class="demo-box is-flex is-flex-wrap-nowrap">Flex wrap nowrap</div>
<!-- Position -->
<h3 class="title is-4 mt-5">Position</h3>
<div class="demo-box is-relative" style="height: 150px;">
<div class="demo-box-alt is-absolute" style="top: 10px; left: 10px; width: 80px; height: 40px; background-color: #ff3860;">Absolute positioned</div>
Relative parent
</div>
<div class="demo-box is-fixed" style="top: 20px; right: 20px; width: 100px; background-color: #3298dc;">Fixed positioned</div>
<!-- Border -->
<h3 class="title is-4 mt-5">Border</h3>
<div class="demo-box has-border">has-border</div>
<div class="demo-box is-borderless">is-borderless</div>
<!-- Shadow -->
<h3 class="title is-4 mt-5">Shadow</h3>
<div class="demo-box has-shadow">has-shadow</div>
<div class="demo-box is-shadowless">is-shadowless</div>
<!-- Radius -->
<h3 class="title is-4 mt-5">Radius</h3>
<div class="demo-box is-rounded">is-rounded</div>
<div class="demo-box is-rounded-lg">is-rounded-lg</div>
<!-- Overflow -->
<h3 class="title is-4 mt-5">Overflow</h3>
<div class="demo-box is-clipped" style="height: 60px;">
is-clipped: This text is clipped if it's too long and doesn't fit in the container height of 60px.
</div>
<div class="demo-box is-scrollable" style="height: 60px;">
is-scrollable: This text can be scrolled if it's too long and doesn't fit in the container height of 60px. This allows the user to see all content by scrolling within the container.
</div>
<!-- Sizing -->
<h3 class="title is-4 mt-5">Sizing</h3>
<div class="demo-box is-fullwidth" style="width: 200px; margin: 1rem 0;">is-fullwidth</div>
<div class="demo-box" style="width: 100px; height: 100px;">100x100</div>
<div class="demo-box" style="width: 150px; height: 150px;">150x150</div>
<div class="demo-box" style="width: 200px; height: 200px;">200x200</div>
<!-- Max Widths -->
<h3 class="title is-4 mt-5">Max Widths</h3>
<div class="demo-box is-max-desktop" style="background-color: #ff3860;">is-max-desktop (1152px max)</div>
<div class="demo-box is-max-widescreen" style="background-color: #3273dc;">is-max-widescreen (1344px max)</div>
<div class="demo-box is-max-fullhd" style="background-color: #00d1b2;">is-max-fullhd (1408px max)</div>
<!-- Responsive Helpers -->
<h2 class="subtitle mt-5">Responsive Helpers</h2>
<h3 class="title is-4">Visibility</h3>
<div class="demo-box is-hidden-mobile">Hidden on mobile (is-hidden-mobile)</div>
<div class="demo-box is-hidden-tablet">Hidden on tablet (is-hidden-tablet)</div>
<div class="demo-box is-hidden-desktop">Hidden on desktop (is-hidden-desktop)</div>
<div class="demo-box is-hidden-widescreen">Hidden on widescreen (is-hidden-widescreen)</div>
<div class="demo-box is-hidden-fullhd">Hidden on fullhd (is-hidden-fullhd)</div>
<div class="demo-box is-only-mobile">Only visible on mobile (is-only-mobile)</div>
<div class="demo-box is-only-tablet">Only visible on tablet (is-only-tablet)</div>
<div class="demo-box is-only-desktop">Only visible on desktop (is-only-desktop)</div>
<div class="demo-box is-only-widescreen">Only visible on widescreen (is-only-widescreen)</div>
<div class="demo-box is-only-fullhd">Only visible on fullhd (is-only-fullhd)</div>
<!-- Touch and Desktop -->
<div class="demo-box is-touch">is-touch (visible on mobile and tablet)</div>
<div class="demo-box is-desktop">is-desktop (visible on desktop and up)</div>
<!-- Print -->
<div class="demo-box is-print-hidden">is-print-hidden (hidden when printing)</div>
<div class="demo-box is-print-only">is-print-only (only visible when printing)</div>
<!-- Other Helpers -->
<h2 class="subtitle mt-5">Other Helpers</h2>
<!-- Sr Only -->
<h3 class="title is-4">Screen Reader Only</h3>
<div class="demo-box">
Visible text
<span class="is-sr-only">This text is only visible to screen readers</span>
</div>
<!-- Unselectable -->
<h3 class="title is-4">Unselectable</h3>
<div class="demo-box is-unselectable">is-unselectable (try to select this text)</div>
<!-- Invisible -->
<div class="demo-box">
<span>Visible text</span>
<span class="is-invisible">Invisible text (still takes up space)</span>
<span>More visible text</span>
</div>
<!-- Marginless/Paddingless -->
<h3 class="title is-4">Marginless/Paddingless</h3>
<div class="demo-box is-marginless">is-marginless</div>
<div class="demo-box is-paddingless">is-paddingless</div>
<!-- Fullheight -->
<h3 class="title is-4">Fullheight</h3>
<div class="demo-box is-fullheight" style="height: 200px; background-color: #3298dc;">
is-fullheight (fills parent height)
</div>
<!-- Contextual Colors -->
<h2 class="subtitle mt-5">Contextual Colors</h2>
<div class="demo-box has-text-white has-background-dark">White text on dark background</div>
<div class="demo-box has-text-light has-background-black">Light text on black background</div>
<div class="demo-box has-text-black has-background-white" style="border: 1px solid #ddd;">Black text on white background</div>
<div class="demo-box has-text-primary has-background-light">Primary text on light background</div>
<!-- Combination Examples -->
<h2 class="subtitle mt-5">Combination Examples</h2>
<div class="demo-box is-flex is-justify-content-space-between is-align-items-center p-3 has-background-primary">
<span class="has-text-weight-bold">Flex with multiple modifiers</span>
<span class="is-size-7">Small text</span>
</div>
<div class="demo-box is-rounded-lg has-shadow m-3 has-background-success">
Rounded shadow box with margins
</div>
<div class="demo-box is-hidden-mobile is-only-desktop has-background-danger">
This box is only visible on desktop
</div>
<div class="demo-box is-flex is-flex-direction-column is-align-items-center p-4 has-background-info">
<p class="has-text-weight-bold is-size-4 mb-2">Centered Column Layout</p>
<p class="is-centered">This content is centered using flexbox</p>
<button class="button is-primary mt-3">Action Button</button>
</div>
<!-- Variable Spacing Demo -->
<h3 class="title is-4 mt-5">Variable Spacing</h3>
<div class="columns is-variable is-8">
<div class="column">
<div class="demo-box-alt">Column with gap</div>
</div>
<div class="column">
<div class="demo-box-alt">Column with gap</div>
</div>
<div class="column">
<div class="demo-box-alt">Column with gap</div>
</div>
</div>
<!-- Gapless Columns -->
<h3 class="title is-4 mt-5">Gapless Columns</h3>
<div class="columns is-gapless">
<div class="column">
<div class="demo-box">No gap</div>
</div>
<div class="column">
<div class="demo-box">No gap</div>
</div>
<div class="column">
<div class="demo-box">No gap</div>
</div>
</div>
</div>
</body>
</html>Ferramentas
Ferramentas frequentemente usadas com este exemplo
Relacionado