--- /dev/null
+
+<tr>
+ <th colspan="2">
+ Grid system
+ </th>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/grid/columns/">
+ columns
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#grid" target="_blank">
+ row
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/grid/columns/">
+ column
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#grid" target="_blank">
+ col
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/grid/tiles/">
+ tile
+ </a>
+ </td>
+ <td class="is-empty">
+ <span>–</span>
+ </td>
+</tr>
+<tr>
+ <th colspan="2">
+ Form
+ </th>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/form/general/">
+ field
+ </a>
+ </td>
+ <td class="is-empty">
+ <span>–</span>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/form/general/">
+ field is-grouped
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#btn-groups" target="_blank">
+ button groups
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/form/general/">
+ field is-grouped
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#input-groups" target="_blank">
+ input groups
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/form/general/">
+ control
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#forms" target="_blank">
+ form-group
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/form/general/">
+ label
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#forms" target="_blank">
+ label
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/form/input/">
+ input
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#forms" target="_blank">
+ form-control
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/form/textarea/">
+ textarea
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#forms" target="_blank">
+ form-control
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/form/select/">
+ select
+ </a>
+ </td>
+ <td class="is-empty">
+ <span>–</span>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/form/checkbox/">
+ checkbox
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#forms" target="_blank">
+ checkbox
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/form/radio/">
+ radio
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#forms" target="_blank">
+ radio
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/form/file/">
+ file
+ </a>
+ </td>
+ <td class="is-empty">
+ <span>–</span>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/elements/button/">
+ button is-static
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#forms" target="_blank">
+ form-control-static
+ </a>
+ </td>
+</tr>
+<tr>
+ <th colspan="2">
+ Elements
+ </th>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/elements/box/">
+ box
+ </a>
+ </td>
+ <td class="is-empty">
+ <span>–</span>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/elements/button/">
+ button
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#buttons" target="_blank">
+ button
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/elements/content/">
+ content
+ </a>
+ </td>
+ <td class="is-empty">
+ <span>–</span>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/elements/delete/">
+ delete
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#helper-classes-close" target="_blank">
+ close
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/elements/icon/">
+ icon
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#glyphicons" target="_blank">
+ glyphicon
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/elements/image/">
+ image
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#thumbnails" target="_blank">
+ thumbnails
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/elements/image/">
+ image is-16by9
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#responsive-embed" target="_blank">
+ responsive embed
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/elements/notification/">
+ notification
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#alerts" target="_blank">
+ alerts
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/elements/progress/">
+ progress
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#progress" target="_blank">
+ progress bars
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/elements/table/">
+ table
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#tables" target="_blank">
+ table
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/elements/tag/">
+ tag
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#labels" target="_blank">
+ labels
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/elements/tag/">
+ tag is-rounded
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#badges" target="_blank">
+ badges
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/elements/title/">
+ title
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#type" target="_blank">
+ h1 .. h6
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/elements/title/">
+ subtitle
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#type" target="_blank">
+ h1 .. h6
+ </a>
+ </td>
+</tr>
+<tr>
+ <td class="is-empty">
+ –
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#type-lists" target="_blank">
+ lists
+ </a>
+ </td>
+</tr>
+<tr>
+ <td class="is-empty">
+ –
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#caret" target="_blank">
+ caret
+ </a>
+ </td>
+</tr>
+<tr>
+ <th colspan="2">
+ Components
+ </th>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/components/breadcrumb/">
+ breadcrumb
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#breadcrumbs" target="_blank">
+ breadcrumbs
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/components/card/">
+ card
+ </a>
+ </td>
+ <td class="is-empty">
+ <span>–</span>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/components/dropdown/">
+ dropdown
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#btn-dropdowns" target="_blank">
+ dropdowns
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/components/level/">
+ level
+ </a>
+ </td>
+ <td class="is-empty">
+ <span>–</span>
+ </td>
+</tr>
+<tr>
+ <td class="is-empty">
+ –
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#list-group" target="_blank">
+ list group
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/components/media-object/">
+ media object
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#media" target="_blank">
+ media object
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/components/menu/">
+ menu
+ </a>
+ </td>
+ <td class="is-empty">
+ <span>–</span>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/components/message/">
+ message
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#panels" target="_blank">
+ panels
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/components/modal/">
+ modal
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/javascript/#modals" target="_blank">
+ modal
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/components/navbar/">
+ navbar
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#navbar" target="_blank">
+ navbar
+ </a>
+ </td>
+</tr>
+<tr>
+ <td class="is-empty">
+ –
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#page-header" target="_blank">
+ page header
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/components/pagination/">
+ pagination
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#pagination" target="_blank">
+ pagination
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/components/panel/">
+ panel
+ </a>
+ </td>
+ <td class="is-empty">
+ <span>–</span>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/components/tabs/">
+ tabs
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#navs" target="_blank">
+ navs
+ </a>
+ </td>
+</tr>
+<tr>
+ <td class="is-empty">
+ –
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#wells" target="_blank">
+ wells
+ </a>
+ </td>
+</tr>
+<tr>
+ <th colspan="2">
+ Layout
+ </th>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/layout/container/">
+ container
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/css/#overview-container" target="_blank">
+ container
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/layout/hero/">
+ hero
+ </a>
+ </td>
+ <td>
+ <a href="http://getbootstrap.com/components/#jumbotron" target="_blank">
+ jumbotron
+ </a>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/layout/section/">
+ section
+ </a>
+ </td>
+ <td class="is-empty">
+ <span>–</span>
+ </td>
+</tr>
+<tr>
+ <td>
+ <a href="{{ site.url }}/documentation/layout/footer/">
+ footer
+ </a>
+ </td>
+ <td class="is-empty">
+ <span>–</span>
+ </td>
+</tr>
\ No newline at end of file
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve">
-<g id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
- <path id="bg" fill="#563D7C" d="M612,510c0,56.1-45.9,102-102,102H102C45.9,612,0,566.1,0,510V102C0,45.9,45.9,0,102,0h408
+<g odipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
+ <path fill="#563D7C" d="M612,510c0,56.1-45.9,102-102,102H102C45.9,612,0,566.1,0,510V102C0,45.9,45.9,0,102,0h408
c56.1,0,102,45.9,102,102V510z"/>
- <g id="B" enable-background="new ">
+ <g enable-background="new">
<path fill="#FFFFFF" d="M166.3,133h173.5c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164L166.3,133L166.3,133z M228.8,282.5h102
</section>
</main>
+ <div class="section notification">
+ <h2 class="subtitle">
+ <div class="container">
+ 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>
+ </h2>
+ </div>
+
<section class="section">
<div class="container">
- <h2 class="subtitle">
- 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.
- </h2>
<div class="columns is-desktop">
<div class="column is-half-desktop">
</div>
</div>
</div>
+
+ </div>
+ </section>
+
+ <hr>
+
+ <section class="section">
+ <div class="container">
+ <div class="comparison">
+ <header class="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 comparison.html %}
+ </tbody>
+ </table>
+ </div>
</div>
</section>