Select and file upload

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Select and file upload—the ideas, syntax, and habits you need before moving on in Bulma.

Bulma offers a lighter component model when Bootstrap feels too heavy or dated.

You will apply Select and file upload in contexts like: Smaller marketing sites, internal dashboards, and projects that need quick responsive layout with minimal JS.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

Toward the end of the track—use it to consolidate patterns before the capstone or summary lessons.

Wrap native <select> in div.select—add is-fullwidth or size modifiers on the wrapper. For file pickers, Bulma’s file component styles the label while keeping a real input type="file" for accessibility.

File structure

file — root
file-label → file-input (native input) + file-cta (call to action text)
Optional file-name span to show the chosen filename (update with JS in production)

Multi-file and drag-drop UIs still need JavaScript; Bulma covers the baseline button-like appearance.

Self-check

Which element must remain in the DOM for screen readers on uploads?
What wrapper class styles a native select?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

file-cta pattern clear?
Multiple file UX?

No discussion yet. Be the first to ask a question.