Bootstrap Additions

Starting in v3.2.0.2, railsstrap includes bootstrap-additions, with future releases containing the appropriate Rails helpers to back them.

In v4.0+ Bootstrap additions have been updated to support Bootstrap 4.

Alert

Exotic placement options like top, top-left, top-right, bottom, bottom-left, bottom-right.

<div class="alert top-left">I'm an alert!</div>

Aside

Extension of modal that allows for modal-like dialogs that slide in from the left, right, top, or bottom. As of 3.3.2 an Aside Helper is included.

<div class="aside fade">
  <div class="aside-dialog">
    <div class="aside-content">
      <div class="aside-header">
        <button type="button" class="close" data-dismiss="aside" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="aside-title">aside title</h4>
      </div>
      <div class="aside-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="aside-footer">
        <button type="button" class="btn btn-default" data-dismiss="aside">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.aside-content -->
  </div><!-- /.aside-dialog -->
</div><!-- /.aside -->

Callout

Not quite alerts, but custom and helpful notes for folks reading the docs. Requires a base and modifier class.

<div class="callout callout-info">
    <h4>Hey!</h4>
    <p>This is a callout box</p>
</div>

Datepicker & Timepicker

V3: A real datepicker element. It is not included by default. Open your application.js & application.css asset manifest file and uncomment the block to include the UI libraries. Use html data attributes to configure the behavior of the date picker element, or you can customize it with Ruby using date_picker_javascript. The helper allows you to use date_picker in your templates to render the input with the appropriate options set.

V4: Date picker is JS API compatible with previous version, with exception to 'language' being named 'locale'. It is based on tempusdominus. The library is small enough that it is included by default now and requires only additional configuration for loading non-english locales in javascript. There is also a helper.

Modal

A modal that stays in the center no matter the scroll state. To set this up, include bootstrap addition's modal.less file and set the center class on the modal container:

<div class="modal center fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Popover

Exotic positioning and arrow placements such as top-left, top-right, bottom-left, & bottom-right.

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top-left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

Tooltip

Tooltips supporting info, warning, danger, and success states. Also supports exotic placements top-right, top-left, bottom-right, bottom-left.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom-left" title="Tooltip on left">Tooltip on bottom left</button>