Modules

Alert

Alert Message

.alert.alert-success{role: "alert"} success message
.alert.alert-info{role: "alert"} info message
.alert.alert-warning{role: "alert"}
  warning message
  %a.alert-link{href: "#"} (link)
.alert.alert-danger.alert-dismissible{role: "alert"}
  danger message (dismissible)
  %button.close{"aria-label": "Close", "data-dismiss": "alert", type: "button"}
    %span{"aria-hidden": "true"}
      ×
Haml

Avatar

Standard Avatar

.avatar
  %img.avatar__media.img-circle{src: "http://lorempixel.com/200/200/cats/"}
.avatar
  %img.avatar__media.img-rounded{src: "http://lorempixel.com/200/200/cats/"}
Haml

Avatar with text

I am a cat.
As yet I have no name.
I am a cat.
As yet I have no name.
.avatar
  %img.avatar__media.img-circle{src: "http://lorempixel.com/200/200/cats/"}
  .avatar__body
    .avatar__title
      I am a cat.
    .avatar__detail
      As yet I have no name.
.avatar
  %img.avatar__media.img-rounded{src: "http://lorempixel.com/200/200/cats/"}
  .avatar__body
    .avatar__title
      I am a cat.
    .avatar__detail
      As yet I have no name.
Haml

Sizes

.avatar
  %img.avatar__media.avatar__media--sm.img-circle{src: "http://lorempixel.com/200/200/cats/"}
.avatar
  %img.avatar__media.img-circle{src: "http://lorempixel.com/200/200/cats/"}
.avatar
  %img.avatar__media.avatar__media--lg.img-circle{src: "http://lorempixel.com/200/200/cats/"}
Haml

Badges

Available variations

24 24 24 24 24 24
%span.badge 24
%span.badge.badge-special 24
%span.badge.badge-success 24
%span.badge.badge-info 24
%span.badge.badge-warning 24
%span.badge.badge-danger 24
Haml

Use container

99+
2
%span.badge-container
  %i.fa.fa-2x.fa-envelope-o
  %span.badge.badge-special 99+
%span.badge-container
  .avatar
    %img.avatar__media.img-circle{src: "http://lorempixel.com/200/200/cats/"}
  %span.badge.badge-special 2
Haml

Buttons

Basic

Link button

%p
  %button.btn.btn-default Default
  %button.btn.btn-primary Primary
  %button.btn.btn-special Special
  %a.btn.btn-default{href: '#'} Link button
%p
  %button.btn.btn-default{disabled: 'disabled'} Disabled default
  %button.btn.btn-primary{disabled: 'disabled'} Disabled primary
  %button.btn.btn-special{disabled: 'disabled'} Disabled special
Haml

Stateful

%p
  %button.btn.btn-success Success
  %button.btn.btn-info Info
  %button.btn.btn-warning Warning
  %button.btn.btn-danger Danger
%p
  %button.btn.btn-success{disabled: 'disabled'} Disabled success
  %button.btn.btn-info{disabled: 'disabled'} Disabled info
  %button.btn.btn-warning{disabled: 'disabled'} Disabled warning
  %button.btn.btn-danger{disabled: 'disabled'} Disabled danger
Haml

Ghost

%p
  %button.btn.btn-ghost ghost πŸ‘»
Haml

Unstyled button

%p
  %button.btn.btn-unstyled unstyled
Haml

Socials

%p
  %button.btn.btn-twitter
    %i.fa.fa-fw.fa-twitter
    Twitter
%p
  %button.btn.btn-facebook
    %i.fa.fa-fw.fa-facebook
    Facebook
%p
  %button.btn.btn-github
    %i.fa.fa-fw.fa-github
    Github
Haml

Card

Basic

Card module width depends on grid width.

Card title

I am a cat.
As yet I have no name.

Lorem ipsum

  • list
  • list
  • list

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis tincidunt leo, sed pulvinar ex placerat vitae. Nunc feugiat leo eu dapibus egestas.

.card
  .card__header
    %h3.card__title Card title
  .card__body
    .row
      .col-sm-4
        .thumbnail
          %img{src: "http://lorempixel.com/1200/900/"}
        .avatar
          %img.avatar__media.img-circle{src: "http://lorempixel.com/200/200/cats/"}
          .avatar__body
            .avatar__title
              I am a cat.
            .avatar__detail
              As yet I have no name.
      .col-sm-8
        %h4 Lorem ipsum
        %ul.list-inline
          %li
            %i.fa.fa-star
            list
          %li
            %i.fa.fa-check
            list
          %li
            %i.fa.fa-check
            list
        %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis tincidunt leo, sed pulvinar ex placerat vitae. Nunc feugiat leo eu dapibus egestas.
  .card__footer
    .text-right
      %button.btn.btn-unstyled Button
      %button.btn.btn-default Button
Haml

Multiple Body

Card title

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis tincidunt leo, sed pulvinar ex placerat vitae. Nunc feugiat leo eu dapibus egestas.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis tincidunt leo, sed pulvinar ex placerat vitae. Nunc feugiat leo eu dapibus egestas.

.card
  .card__header
    %h3.card__title Card title
  .card__body
    %h4 Lorem ipsum
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis tincidunt leo, sed pulvinar ex placerat vitae. Nunc feugiat leo eu dapibus egestas.
  .card__body
    %h4 Lorem ipsum
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis tincidunt leo, sed pulvinar ex placerat vitae. Nunc feugiat leo eu dapibus egestas.
  .card__footer
    .text-right
      %button.btn.btn-unstyled Button
      %button.btn.btn-default Button
Haml

Divider

Thin Divider

Title


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...
%h4 Title
%hr.hr-thin
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...
Haml

Inverse


%hr.hr-inverse
Haml

Form section

Separated form controls.

%form
  .form-section
    .row
      .col-sm-2
        %label.control-label{for: "example-form-section-1"} Input 1
      .col-sm-10
        %input#example-form-section-1.form-control{type: "text"}
  .form-section
    .row
      .col-sm-2
        %label.control-label{for: "example-input-email-2"}  Input 2
      .col-sm-10
        %input#example-input-email-2.form-control{type: "text"}
  .form-section.text-right
    %button.btn.btn-unstyled Cancel
    %button.btn.btn-primary Submit
Haml

Forms

Plese check Bootstrap#forms for details.

$
.00
Legend

Example block-level help text here.

%form
  .form-group
    %label{for: "example-input-email-1"} Email address
    %input#example-input-email-1.form-control{placeholder: "Email", type: "email"}
  .form-group
    %label{for: "example-input-password-1"} Password
    %input#example-input-password-1.form-control{placeholder: "Password", type: "password", disabled: "disabled"}
  .form-group
    %label{for: "example-input-amount-1"} Amount
    .input-group
      .input-group-addon $
      %input#example-input-amount-1.form-control{placeholder: "Amount", type: "text"}
      .input-group-addon .00
  .form-group
    %label{for: "example-input-combined-1"} Combined
    .form-combined
      %input#example-input-combined-1.form-control{placeholder: "Combined1", type: "text"}
      %input#example-input-combined-2.form-control{placeholder: "Combined2", type: "text"}
      %button.btn.btn-primary{type: "submit"} Submit
  %fieldset
    %legend Legend
    .form-group
      %label{for: "example-input-fieldset-1"} Fieldset controls
      %input#example-input-fieldset-1.form-control{placeholder: "Address", type: "text"}
  .form-group
    %label{for: "example-input-file-1"} File input
    %input#example-input-file-1{type: "file"}
    %p.help-block Example block-level help text here.
  .checkbox
    %label
      %input{type: "checkbox"}
      Check me out
  .checkbox
    %label
      %input{type: "checkbox"}
      Check me out
  .radio
    %label
      %input#example-radio-1{checked: "checked", name: "options", type: "radio", value: "option1"}
      Option 1
  .radio
    %label
      %input#example-radio-2{name: "options", type: "radio", value: "option2"}
      Option 2
  .radio.disabled
    %label
      %input#example-radio-3{disabled: "disabled", name: "options", type: "radio", value: "option3"}
      Disabled option
  .radio.radio-image
    %label.radio-inline
      %input{:name => "imageRadioOptions", :type => "radio", :value => "option1", checked: ""}
      .radio-image__button
        .avatar
          %img.radio-image__media.avatar__media.img-circle{src: "http://lorempixel.com/200/200/cats/"}
      Avatar
    %label.radio-inline
      %input{:name => "imageRadioOptions", :type => "radio", :value => "option1", checked: ""}
      .radio-image__button
        %img.radio-image__media.img-circle{src: "http://lorempixel.com/40/40/animals/"}
      No avatar
  .form-group
    %select.form-control
      %option 1
      %option 2
      %option 3
      %option 4
      %option 5
  .form-group
    %textarea.form-control{rows: "3"}
  %button.btn.btn-primary{type: "submit"} Submit
Haml

Hero Layout

εΎθΌ©γ―ηŒ«γ§γ‚γ‚‹

εε‰γ―γΎγ η„‘γ„γ€‚γ©γ“γ§η”Ÿγ‚ŒγŸγ‹γ¨γ‚“γ¨θ¦‹ε½“γŒγ€γ‹γ¬γ€‚

.hero{style: "background-image:url('http://lorempixel.com/1900/1000/city');"}
  %nav.navbar.navbar-static-top.navbar-unstyled
    .container-fluid
      .navbar-header
        %button.navbar-toggle.collapsed{"aria-expanded" => "false", "data-target" => "#js-navbar-collapse-3", "data-toggle" => "collapse", :type => "button"}
          %span.sr-only Toggle navigation
          %span.icon-bar
          %span.icon-bar
          %span.icon-bar
        %a.navbar-brand{href: '#'} Forkwell Jobs
      #js-navbar-collapse-3.collapse.navbar-collapse
        %ul.nav.navbar-nav
          %li.active
            %a{href: '#'} Link
          %li
            %a{href: '#'} Link
        %ul.nav.navbar-nav.navbar-right
          %li.dropdown
            %a.dropdown-toggle{href: '#', data: {toggle: "dropdown"}, role: "button", aria: {haspopup: "true", expanded: "false"}}
              %img.img-circle.navbar-img{src: 'http://lorempixel.com/32/32/cats/'}
              %span.caret
            %ul.dropdown-menu
              %li
                %a{href: '#'} Menu
              %li
                %a{href: '#'} Menu
              %li.divider
              %li
                %a{href: '#'} Menu
          %li.dropdown
            %a.dropdown-toggle{href: '#', data: {toggle: "dropdown"}, role: "button", aria: {haspopup: "true", expanded: "false"}}
              %i.fa.fa-lg.fa-envelope-o
              %span.caret
            %ul.dropdown-menu
              %li
                %a{href: '#'} Menu
              %li
                %a{href: '#'} Menu
              %li.divider
              %li
                %a{href: '#'} Menu
          %li
            %a{href: '#'}
              %button.btn.btn-sm.btn-special Button

  .hero__overlay
  .hero__body
    .jumbotron
      .container
        .hero__section.text-center
          %h1.hero__title εΎθΌ©γ―ηŒ«γ§γ‚γ‚‹
          %p εε‰γ―γΎγ η„‘γ„γ€‚γ©γ“γ§η”Ÿγ‚ŒγŸγ‹γ¨γ‚“γ¨θ¦‹ε½“γŒγ€γ‹γ¬γ€‚
        .hero__section.text-center
          %form
            .form-group.form-group-lg
              .form-combined
                %input#example-input-combined-1.form-control{placeholder: "Combined1", type: "text"}
                %button.btn.btn-primary{type: "submit"} Submit
        .hero__section.text-center
          %button.btn.btn-ghost Button
Haml

Image Cover

.image-cover{data: {label: "Hello"}, style: "width:300px;height:200px;"}
  %img{src: 'http://lorempixel.com/300/200/transport'}
Haml

Images

Resize image to fit container height

%div(style="height: 100px;")
  %img.img-fit-height{src: 'http://lorempixel.com/400/300/transport'}
Haml

Labels

Available variations

Default Primary Special Success Info Warning Danger
%span.label.label-default Default
%span.label.label-primary Primary
%span.label.label-special Special
%span.label.label-success Success
%span.label.label-info Info
%span.label.label-warning Warning
%span.label.label-danger Danger
Haml

Message Bubble

Thank you, Mr...
The name's Bond. James Bond.
.text-left
  .message-bubble
    .message-bubble__avatar
      .avatar
        %img.avatar__media.img-circle{src: "http://lorempixel.com/40/40/animals/"}
    .message-bubble__bubble
      Thank you, Mr...
.text-right
  .message-bubble.message-bubble--flip
    .message-bubble__avatar
      .avatar
        %img.avatar__media.img-circle{src: "http://lorempixel.com/40/40/cats/"}
    .message-bubble__bubble.message-bubble__bubble--primary
      The name's Bond. James Bond.
Haml

Available variations

Default bubble
Primary bubble
Special bubble
.message-bubble
  .message-bubble__bubble
    Default bubble

.message-bubble
  .message-bubble__bubble.message-bubble__bubble--primary
    Primary bubble

.message-bubble
  .message-bubble__bubble.message-bubble__bubble--special
    Special bubble
Haml

Block level bubble

Block level bubble
.message-bubble.message-bubble--block
  .message-bubble__avatar
    .avatar
      %img.avatar__media.img-circle{src: "http://lorempixel.com/40/40/cats/"}
  .message-bubble__bubble
    Block level bubble
Haml

Modal

Modal

%button.btn.btn-primary.btn-lg{"data-target": "#sampleModal", "data-toggle": "modal", type: "button"}
  Launch demo modal

#sampleModal.modal.fade{role: "dialog", tabindex: "-1"}
  .modal-dialog
    .modal-content
      .modal-header
        %h3.modal-title.text-center Modal title
      .modal-body
        %h4 header
        %p Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        %p Nunc laoreet nisi quis eros luctus, feugiat tincidunt elit posuere. Suspendisse in sem eu diam vestibulum luctus non quis arcu.
        %h4 header
        %p Nam malesuada placerat dictum. Quisque lacinia lacus vulputate leo rhoncus, sed consequat velit aliquam.
        .text-center
          %button.btn.btn-special{type: "button"} Click Me!
      .modal-footer
        %button.btn.btn-unstyled{"data-dismiss": "modal", type: "button"} Close
        %button.btn.btn-primary{type: "button"} Action!
Haml

Navbar

Standard navbar

Default

%nav.navbar.navbar-default
  .container-fluid
    .navbar-header
      %button.navbar-toggle.collapsed{"aria-expanded" => "false", "data-target" => "#js-navbar-collapse-1", "data-toggle" => "collapse", :type => "button"}
        %span.sr-only Toggle navigation
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar
      %a.navbar-brand{href: '#'} Forkwell Jobs
    #js-navbar-collapse-1.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li.active
          %a{href: '#'} Link
        %li
          %a{href: '#'} Link
      %form.navbar-form.navbar-left{:role => "search"}
        .form-group
          %input.form-control{:placeholder => "Search", :type => "text"}/
        %button.btn.btn-default{:type => "submit"} Submit
      %ul.nav.navbar-nav.navbar-right
        %li.dropdown
          %a.dropdown-toggle{href: '#', data: {toggle: "dropdown"}, role: "button", aria: {haspopup: "true", expanded: "false"}}
            %img.img-circle.navbar-img{src: 'http://lorempixel.com/32/32/cats/'}
            %span.caret
          %ul.dropdown-menu
            %li.dropdown-header
              Section
            %li
              %a{href: '#'} Menu
            %li.active
              %a{href: '#'} Menu
            %li.divider
            %li.disabled
              %a{href: '#'} Menu
        %li.disabled
          %a{href: '#'} Disabled link
Haml

Inversed

%nav.navbar.navbar-inverse
  .container-fluid
    .navbar-header
      %button.navbar-toggle.collapsed{"aria-expanded" => "false", "data-target" => "#js-navbar-collapse-2", "data-toggle" => "collapse", :type => "button"}
        %span.sr-only Toggle navigation
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar
      %a.navbar-brand{href: '#'} Forkwell Jobs
    #js-navbar-collapse-2.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li.active
          %a{href: '#'} Link
        %li
          %a{href: '#'} Link
      %form.navbar-form.navbar-left{:role => "search"}
        .form-group
          %input.form-control{:placeholder => "Search", :type => "text"}
        %button.btn.btn-default{:type => "submit"} Submit
      %ul.nav.navbar-nav.navbar-right
        %li.dropdown
          %a.dropdown-toggle{href: '#', data: {toggle: "dropdown"}, role: "button", aria: {haspopup: "true", expanded: "false"}}
            %img.img-circle.navbar-img{src: 'http://lorempixel.com/32/32/cats/'}
            %span.caret
          %ul.dropdown-menu
            %li.dropdown-header
              Section
            %li
              %a{href: '#'} Menu
            %li.active
              %a{href: '#'} Menu
            %li.divider
            %li.disabled
              %a{href: '#'} Menu
        %li.disabled
          %a{href: '#'} Disabled link
Haml

Unstyled

For use in big background image.

%nav.navbar.navbar-unstyled
  .container-fluid
    .navbar-header
      %button.navbar-toggle.collapsed{"aria-expanded" => "false", "data-target" => "#js-navbar-collapse-3", "data-toggle" => "collapse", :type => "button"}
        %span.sr-only Toggle navigation
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar
      %a.navbar-brand{href: '#'} Forkwell Jobs
    #js-navbar-collapse-3.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li.active
          %a{href: '#'} Link
        %li
          %a{href: '#'} Link
      %form.navbar-form.navbar-left{:role => "search"}
        .form-group
          %input.form-control{:placeholder => "Search", :type => "text"}
        %button.btn.btn-default{:type => "submit"} Submit
      %ul.nav.navbar-nav.navbar-right
        %li.dropdown
          %a.dropdown-toggle{href: '#', data: {toggle: "dropdown"}, role: "button", aria: {haspopup: "true", expanded: "false"}}
            %img.img-circle.navbar-img{src: 'http://lorempixel.com/32/32/cats/'}
            %span.caret
          %ul.dropdown-menu
            %li.dropdown-header
              Section
            %li
              %a{href: '#'} Menu
            %li.active
              %a{href: '#'} Menu
            %li.divider
            %li.disabled
              %a{href: '#'} Menu
        %li.disabled
          %a{href: '#'} Disabled link
Haml

Notice bar

Use to give notice globally (e.g. with Header).

Basic

notice text
notice text with link
.notice-bar notice text
.notice-bar
  notice text
  %a.notice-bar__link{href: "#"} with link
Haml

Pagination

Pagination

%nav
  %ul.pagination.pagination-lg
    %li
      %a{"aria-label" => "Previous", :href => "#"}
        %span{"aria-hidden" => "true"} prev
    %li
      %a{:href => "#"} 1
    %li.active
      %a{:href => "#"} 2
    %li.disabled
      %a{:href => "#"} 3
    %li
      %a{:href => "#"} 4
    %li
      %a{"aria-label" => "Next", :href => "#"}
        %span{"aria-hidden" => "true"} next
%nav
  %ul.pagination
    %li
      %a{"aria-label" => "Previous", :href => "#"}
        %span{"aria-hidden" => "true"} prev
    %li
      %a{:href => "#"} 1
    %li.active
      %a{:href => "#"} 2
    %li.disabled
      %a{:href => "#"} 3
    %li
      %a{:href => "#"} 4
    %li
      %a{"aria-label" => "Next", :href => "#"}
        %span{"aria-hidden" => "true"} next
%nav
  %ul.pagination.pagination-sm
    %li
      %a{"aria-label" => "Previous", :href => "#"}
        %span{"aria-hidden" => "true"} prev
    %li
      %a{:href => "#"} 1
    %li.active
      %a{:href => "#"} 2
    %li.disabled
      %a{:href => "#"} 3
    %li
      %a{:href => "#"} 4
    %li
      %a{"aria-label" => "Next", :href => "#"}
        %span{"aria-hidden" => "true"} next
Haml

Panel

Basic panel

panel header
panel body
.panel.panel-primary
  .panel-heading
    panel header
  .panel-body
    panel body
  .panel-footer
    panel footer
Haml

Panel include list

panel header
.panel.panel-default
  .panel-heading
    panel header
  .list-group
    %a.list-group-item item1
    %a.list-group-item item2
    %a.list-group-item item3
    %a.list-group-item item4
Haml

Sub Navigation

Basic

%nav.subnav
  %ul.subnav__list
    %li.subnav__item.active{role: "presentation"}
      %a.subnav__link{href: "#"} Home
    %li.subnav__item{role: "presentation"}
      %a.subnav__link{href: "#"} Menu
    %li.subnav__item{role: "presentation"}
      %a.subnav__link{href: "#"} Messages
    %li.subnav__item{role: "presentation"}
      %a.subnav__link{href: "#"}
        %button.btn.btn-primary.btn-sm Button
Haml

Inverse and justify

%nav.subnav.subnav--inverse
  %ul.subnav__list.subnav__list--justify
    %li.subnav__item.active{role: "presentation"}
      %a.subnav__link{href: "#"} Home
    %li.subnav__item{role: "presentation"}
      %a.subnav__link{href: "#"} Menu
    %li.subnav__item{role: "presentation"}
      %a.subnav__link{href: "#"} Menu
    %li.subnav__item{role: "presentation"}
      %a.subnav__link{href: "#"} Menu
    %li.subnav__item{role: "presentation"}
      %a.subnav__link{href: "#"} Menu
    %li.subnav__item{role: "presentation"}
      %a.subnav__link{href: "#"} Menu
    %li.subnav__item{role: "presentation"}
      %a.subnav__link{href: "#"} Menu
    %li.subnav__item{role: "presentation"}
      %a.subnav__link{href: "#"}
        %button.btn.btn-primary.btn-sm Button
Haml

Tables

Feature table

title1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...

title2
  • Aliquam dignissim
  • Quis quis erat
  • Duis
  • Id diam sed libero tempor viverra
  • Sed vehicula
  • Scelerisque massa
.feature-table
  .row
    .feature-table__title.col-md-2 title1
    .feature-table__desc.col-md-10
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id...
  %hr.feature-table__divider
  .row
    .feature-table__title.col-md-2 title2
    .feature-table__desc.col-md-10
      %ul.list-inline
        %li Aliquam dignissim
        %li Quis quis erat
        %li Duis
        %li Id diam sed libero tempor viverra
        %li Sed vehicula
        %li Scelerisque massa
Haml

Tags

Basic

Ruby C# Amazon Web Services
%span.tag Ruby
%span.tag C#
%span.tag Amazon Web Services
Haml

Link Tag

%a.tag{href: '#'} Ruby
%a.tag{href: '#'} C#
%a.tag{href: '#'} Amazon Web Services
Haml

Thumbnails

Linked thumbnail

.row
  .col-sm-4
    %a.thumbnail{:href => "#"}
      %img{:src => 'http://loremflickr.com/700/300/people', alt: 'thumbnail'}
      .caption
        %p Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Haml