Bootstrap 4 helpers for Phoenix framework

This package is designed to minimize repetitive code and the amount of HTML markup in your project's source code

Alerts

Dismissible alert with context


  <%= bh_alert "Alert text", dismissible: true %>
  

    <div class="alert alert-info alert-dismissible fade in" role="alert">
      <button aria-label="Close" class="close" data-dismiss="alert" type="button"><span aria-hidden="true">×</span>
      </button>
      Alert text
    </div>

Alert with id, extra class and context


  <%= bh_alert "Alert text", id: :one, class: :extra, context: :danger %>
  

    <div class="alert alert-danger extra" id="one" role="alert">Alert text</div>

Alert with id, extra class and complex markup block


  <%= bh_alert context: :success, id: :one, class: :extra do %>
    <b>Alert</b> is <u>very important</u>
  <% end %>
  

    <div class="alert alert-success extra" id="one" role="alert">
      <b>Alert</b> is <u>very important</u>
    </div>

Dismissible alert with id, extra class and complex markup block


  <%= bh_alert context: :warning, id: :one, class: :extra, dismissible: true do %>
    <b>Dismissible alert</b> is <u>very important</u>
  <% end %>
  

    <div class="alert alert-warning extra alert-dismissible fade in" id="one" role="alert">
      <button aria-label="Close" class="close" data-dismiss="alert" type="button"><span aria-hidden="true">×</span>
      </button>
      <b>Dismissible alert</b> is <u>very important</u>
    </div>

Buttons

Simple button


  <%= bh_button "Button" %>
  

    <button class="btn btn-primary" type="button">Button</button>

Button with context


  <%= bh_button "Button", context: :primary %>
  <%= bh_button "Button", context: :secondary %>
  <%= bh_button "Button", context: :success %>
  <%= bh_button "Button", context: :info %>
  <%= bh_button "Button", context: :warning %>
  <%= bh_button "Button", context: :danger %>
  <%= bh_button "Button", context: :link %>
  

    <button class="btn btn-primary" type="button">Button</button>
    <button class="btn btn-secondary" type="button">Button</button>
    <button class="btn btn-success" type="button">Button</button>
    <button class="btn btn-info" type="button">Button</button>
    <button class="btn btn-warning" type="button">Button</button>
    <button class="btn btn-danger" type="button">Button</button>
    <button class="btn btn-link" type="button">Button</button>

Buttons with different sizes


  <%= bh_button "Button", size: :small %>
  <%= bh_button "Button" %>
  <%= bh_button "Button", size: :large %>
  

    <button class="btn btn-primary btn-sm" type="button">Button</button>
    <button class="btn btn-primary" type="button">Button</button>
    <button class="btn btn-primary btn-lg" type="button">Button</button>

Buttons with different layout


  <%= bh_button "Button", size: :large, layout: :block %>
  

    <button class="btn btn-primary btn-lg btn-block" type="button">Button</button>

Buttons with multiple options


  <%= bh_button "Button", id: "my_id", size: :large, context: :warning, class: "extra classes", data: [val: "value", other_val: "other_value"] %>
  

    <button class="btn btn-warning btn-lg extra classes" data-other-val="other_value" data-val="value" id="my_id" type="button">Button</button>

Buttons with complex markup


  <%= bh_button context: :success do %>
    <span><b>Bold</b> and <i>italics</i> in button text</span>
  <% end %>
  

    <button class="btn btn-success" type="button"><span><b>Bold</b> and <i>italics</i> in button text</span></button>

Simple outline button


  <%= bh_button_outline "Button" %>
  

    <button class="btn btn-primary-outline" type="button">Button</button>

Outline buttons with context


  <%= bh_button_outline "Button", context: :primary %>
  <%= bh_button_outline "Button", context: :secondary %>
  <%= bh_button_outline "Button", context: :success %>
  <%= bh_button_outline "Button", context: :info %>
  <%= bh_button_outline "Button", context: :warning %>
  <%= bh_button_outline "Button", context: :danger %>
  

    <button class="btn btn-primary-outline" type="button">Button</button>
    <button class="btn btn-secondary-outline" type="button">Button</button>
    <button class="btn btn-success-outline" type="button">Button</button>
    <button class="btn btn-info-outline" type="button">Button</button>
    <button class="btn btn-warning-outline" type="button">Button</button>
    <button class="btn btn-danger-outline" type="button">Button</button>

Outline buttons with different sizes


  <%= bh_button_outline "Button", size: :small %>
  <%= bh_button_outline "Button" %>
  <%= bh_button_outline "Button", size: :large %>
  

    <button class="btn btn-primary-outline btn-sm" type="button">Button</button>
    <button class="btn btn-primary-outline" type="button">Button</button>
    <button class="btn btn-primary-outline btn-lg" type="button">Button</button>

Labels

Default label


  <%= bh_label "Label" %>
Label 

    <span class="label label-default">Label</span>

Labels with different contexts


  <%= bh_label "Label", context: :default %>
  <%= bh_label "Label", context: :primary %>
  <%= bh_label "Label", context: :success %>
  <%= bh_label "Label", context: :info %>
  <%= bh_label "Label", context: :warning %>
  <%= bh_label "Label", context: :danger %>
Label Label Label Label Label Label 

    <span class="label label-default">Label</span>
    <span class="label label-primary">Label</span>
    <span class="label label-success">Label</span>
    <span class="label label-info">Label</span>
    <span class="label label-warning">Label</span>
    <span class="label label-danger">Label</span>

Default label pill


  <%= bh_label_pill "Label" %>
Label 

    <span class="label label-pill label-default">Label</span>

Label pills with different contexts


  <%= bh_label_pill "Label", context: :default %>
  <%= bh_label_pill "Label", context: :primary %>
  <%= bh_label_pill "Label", context: :success %>
  <%= bh_label_pill "Label", context: :info %>
  <%= bh_label_pill "Label", context: :warning %>
  <%= bh_label_pill "Label", context: :danger %>
Label Label Label Label Label Label 

    <span class="label label-pill label-default">Label</span>
    <span class="label label-pill label-primary">Label</span>
    <span class="label label-pill label-success">Label</span>
    <span class="label label-pill label-info">Label</span>
    <span class="label label-pill label-warning">Label</span>
    <span class="label label-pill label-danger">Label</span>

Modals

Note: helpers do not generate trigger buttons. Trigger buttons should be added separately.

With simple content and default footer


  <%= bh_modal "Modal dialog content" %> # default id is "myModal"
  <%= bh_modal "Modal dialog content", id: "myModalEx1" %>
  

    <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade in" id="myModal" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <p>Modal dialog content</p>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" data-dismiss="modal" type="button">
              Close
            </button>
          </div>
        </div>
      </div>
    </div>

Custom size modals


  <%= bh_modal "Small modal dialog content", size: :small, id: "myModalEx2" %>
  

    <div aria-hidden="true" aria-labelledby="myModalEx2Label" class="modal fade in" id="myModalEx2" role="dialog" tabindex="-1">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <p>Small modal dialog content</p>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
          </div>
        </div>
      </div>
    </div>

Modals with custom titles


  <%= bh_modal "Modal content", title: "Modal title" %>
  

    <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade in" id="myModal" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            <p>Modal content</p>
          </div>
        </div>
      </div>
    </div>

Modals with complex content markup


  <%= bh_modal title: "Modal title", size: :small do %>
    <p>Just any content can be used here.</p>
    <p>You can use buttons:<br />
    <%= bh_button_outline "Button" %>
    <%= bh_button "Success", context: :success %></p>
    <p><%= bh_label "E.g." %> <b>bold</b> and <i>italic</i> text etc.</p>
  <% end %>
  

    <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade in" id="myModal" role="dialog" tabindex="-1">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            <p>Just any content can be used here.</p>
            <p>You can use buttons:<br>
              <button class="btn btn-primary-outline" type="button">Button</button>
              <button class="btn btn-success" type="button">Success</button>
            </p>
            <p><span class="label label-default">E.g.</span> <b>bold</b> and <i>italic</i> text etc.</p>
          </div>
        </div>
      </div>
    </div>

Progress bars

Basic progress bars


  <%= bh_progress %>
  <%= bh_progress percentage: 50 %>
0% % 

    <progress class="progress" max="100" value="0">0%</progress>
    <progress class="progress" max="100" value="50">%</progress>

Contextual progress bars


  <%= bh_progress percentage: 10 %>
  <%= bh_progress percentage: 30, context: :success %>
  <%= bh_progress percentage: 50, context: :info %>
  <%= bh_progress percentage: 70, context: :warning %>
  <%= bh_progress percentage: 90, context: :danger %>
10% 30% 50% 70% 90% 

    <progress class="progress" max="100" value="10">10%</progress>
    <progress class="progress progress-success" max="100" value="30">30%</progress>
    <progress class="progress progress-info" max="100" value="50">50%</progress>
    <progress class="progress progress-warning" max="100" value="70">70%</progress>
    <progress class="progress progress-danger" max="100" value="90">90%</progress>

Striped progress bars


  <%= bh_progress percentage: 10, striped: :true %>
  <%= bh_progress percentage: 30, context: :success, striped: true %>
  <%= bh_progress percentage: 50, context: :info, striped: true %>
  <%= bh_progress percentage: 70, context: :warning, striped: true %>
  <%= bh_progress percentage: 90, context: :danger, striped: true %>
10% 30% 50% 70% 90% 

    <progress class="progress progress-striped" max="100" value="10">10%</progress>
    <progress class="progress progress-striped progress-success" max="100" value="30">30%</progress>
    <progress class="progress progress-striped progress-info" max="100" value="50">50%</progress>
    <progress class="progress progress-striped progress-warning" max="100" value="70">70%</progress>
    <progress class="progress progress-striped progress-danger" max="100" value="90">90%</progress>

Animated progress bars


  <%= bh_progress percentage: 10, striped: true, animated: true %>
  <%= bh_progress percentage: 30, context: :success, striped: true, animated: true %>
  <%= bh_progress percentage: 50, context: :info, striped: true, animated: true %>
  <%= bh_progress percentage: 70, context: :warning, striped: true, animated: true %>
  <%= bh_progress percentage: 90, context: :danger, striped: true, animated: true %>
10% 30% 50% 70% 90% 

    <progress class="progress progress-striped progress-animated" max="100" value="10">10%</progress>
    <progress class="progress progress-striped progress-success progress-animated" max="100" value="30">30%</progress>
    <progress class="progress progress-striped progress-info progress-animated" max="100" value="50">50%</progress>
    <progress class="progress progress-striped progress-warning progress-animated" max="100" value="70">70%</progress>
    <progress class="progress progress-striped progress-danger progress-animated" max="100" value="90">90%</progress>