bulma/docs/alternative-to-bootstrap.html
2024-03-21 16:39:38 +00:00

148 lines
5.5 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
fulltitle: "Bulma: an alternative to Bootstrap"
layout: default
breadcrumb:
- home
- more
- bootstrap
bulma:
- type: "bulma"
icon: "css3"
icon_brand: true
title: "Modern features"
content: "By using the latest CSS3 features such as **Flexbox**, and planning on using **CSS Variables** and **CSS Grid**, Bulma aims to stay on the bleeding edge of browser technology."
- type: "bulma"
icon: "pause"
title: "Simple grid system"
content: "To build a Bulma grid, you only need a single `.columns` container to wrap as many `.column` items as you want."
- type: "bulma"
icon: "heart"
title: "Easy-to-learn syntax"
content: "With simple readable **class names** like `.button` or `.title`, and a straightforward **modifiers system** like `.is-primary` or `.is-large`, it's easy to pick up Bulma in **minutes**.<br>[More about modifiers](/documentation/overview/modifiers/)"
- type: "bulma"
icon: "font-awesome"
icon_brand: true
title: "Font Awesome 5 support"
content: "Bulma is compatible with both [Font Awesome 4](http://fontawesome.io/) and [Font Awesome 5](https://fontawesome.com/) thanks to the `.icon` element."
- type: "bulma"
icon: "plus"
title: "100+ useful CSS helpers"
content: 'Bulma ships with more than **100 helpers** to specify color, display, and spacing.<br>[Responsive helpers](/documentation/helpers/visibility-helpers/) <span class="separator"></span> [Typography helpers](/documentation/helpers/typography-helpers/) <span class="separator"></span> [Other helpers](/documentation/helpers/)'
- type: "bulma"
icon: "code"
title: "No JavaScript"
content: '<p>By focusing only on <strong>CSS</strong>, Bulma provides a lightweight solution that can easily be implemented in <strong>any development context</strong>.</p>'
bootstrap:
- type: "bootstrap"
icon: "plug"
title: "jQuery plugins"
content: "Bootstrap includes useful jQuery plugins to add **interaction** to your website."
- type: "bootstrap"
icon: "users"
title: "Big community"
content: "Considering how long it has been around, Bootstrap has a **larger community** than Bulma. As a result, more tools (like theming and plugins) are available, and more questions are answered around the internet."
- type: "bootstrap"
icon: "internet-explorer"
icon_brand: true
title: "Internet Explorer compatibility"
content: "While 90% of Bulma works in IE11, Bootstrap has better **compatibility** with this browser."
- type: "bootstrap"
icon: "list"
title: "Additional elements"
content: "Bootstrap has some **elements** like [list group](https://getbootstrap.com/components/#list-group), [wells](https://getbootstrap.com/components/#wells), or [page header](https://getbootstrap.com/components/#page-header) that Bulma doesn't have."
- type: "bootstrap"
icon: "universal-access"
title: "Accessibility"
content: "Bulma has introduced some support for accessibility, but Bootstrap has strong and pervasive compatibility with **WCAG 2.0** guidelines."
---
{%
include docs/components/hero.html
color="bootstrap"
icon="fas fa-exchange-alt"
title="Bulma: an **alternative** to Bootstrap"
subtitle="See how Bulma can replace your Bootstrap setup"
%}
{%
include docs/components/call.html
color="primary"
text='Both Bulma and Bootstrap are <strong>CSS frameworks</strong> that allow developers to quickly <strong>build web interfaces</strong> with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that.'
%}
<div class="container">
<div class="bd-bootstrap-table">
<div class="columns is-desktop">
<div class="column is-half-desktop">
<h3 class="subtitle is-3 has-text-centered pros-heading">
Why choose <strong>Bulma</strong>
</h3>
<figure class="bd-pros-icon">
{% include svg/bulma-b.svg %}
</figure>
<div class="bd-pros-list">
{% for pro in page.bulma %}
{%
include docs/content/pro.html
type=pro.type
icon=pro.icon
icon_brand=pro.icon_brand
title=pro.title
content=pro.content
%}
{% endfor %}
</div>
</div>
<div class="column is-half-desktop">
<h3 class="subtitle is-3 has-text-centered pros-heading">
Why choose <strong>Bootstrap</strong>
</h3>
<figure class="bd-pros-icon">
{% include svg/bootstrap-icon.svg %}
</figure>
<div class="bd-pros-list">
{% for pro in page.bootstrap %}
{%
include docs/content/pro.html
type=pro.type
icon=pro.icon
icon_brand=pro.icon_brand
title=pro.title
content=pro.content
%}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="bd-bootstrap-comparison">
<header class="bd-bootstrap-comparison-header has-text-centered">
<h2 class="title">
Comparison table
</h2>
<p class="subtitle">
See which elements of the framework exist (or not) in the other
</p>
</header>
<table class="table is-bordered is-fullwidth">
<thead>
<tr>
<th>{% include svg/bulma-b.svg %}Bulma</th>
<th>{% include svg/bootstrap-icon.svg %}Bootstrap</th>
</tr>
</thead>
<tfoot>
<tr>
<th>{% include svg/bulma-b.svg %}Bulma</th>
<th>{% include svg/bootstrap-icon.svg %}Bootstrap</th>
</tr>
</tfoot>
<tbody>
{% include docs/content/comparison.html %}
</tbody>
</table>
</div>
</div>