Please wait...
Page is loading

Typography

BS4 theme lists typography is a set of content enhancements related to typography .

Getting started

To use BS4 alerts simply include bs4 theme in your bundle file 

//= require vendor/bootstrap-4.4.1-iplan-theme.bundle

Money with currency

when working with currencies you should wrap the amount with .money-with-currency in case it has a symbol right after it.
Doing so will add:

  • direction: ltr
  • display: inline-block
  • white-space: nowrap
Default direction
זה יעלה לכם -
₪ 599
Default direction
this will cost you -
599 $
LTR
this will cost you -
599 $
RTL
זה יעלה לכם -
₪ 599
.row.text-center
  .col
    %h5 Default direction
    ='זה יעלה לכם - '
    .money-with-currency='₪ 599'
  .col
    %h5 Default direction
    this will cost you -
    .money-with-currency='599 $'
%hr
.row.text-center
  .col.ltr
    %h5 LTR
    this will cost you -
    .money-with-currency='599 $'
  .col.rtl
    %h5 RTL
    ='זה יעלה לכם - '
    .money-with-currency='₪ 599'

HR with title

You can use the built in helper hr_title to create an HR with title.
The Helper will accept class and block
* Note that the text background is inherited by default from the line background

HR with title
HR with title
HR with title
HR with title 
=hr_title 'HR with title', class: 'my-3 small bg-white text-muted'
=hr_title 'HR with title', class: 'my-3 bg-white'
=hr_title 'HR with title', class: 'my-3 bg-primary py-2'
=hr_title class: 'my-3' do
  %span.bg-dark.text-white.py-1.px-2='HR with title'

Line height

You can use .lh-* (from 1 to 3) to set line height

.lh-1

this is the first line
this is the second line
this is the third small line

Default

this is the first line
this is the second line
this is the third small line

.lh-2

this is the first line
this is the second line
this is the third small line

.lh-3

this is the first line
this is the second line
this is the third small line
.row.text-center
  .col-12.col-sm-6.mb-4
    %h4.border-bottom.pb-2 .lh-1
    .lh-1
      this is the first line
      %br
      this is the second line
      .small this is the third small line
  .col-12.col-sm-6.mb-4
    %h4.border-bottom.pb-2 Default
    this is the first line
    %br
    this is the second line
    .small this is the third small line
  .col-12.col-sm-6
    %h4.border-bottom.pb-2 .lh-2
    .lh-2
      this is the first line
      %br
      this is the second line
      .small this is the third small line
  .col-12.col-sm-6
    %h4.border-bottom.pb-2 .lh-3
    .lh-3
      this is the first line
      %br
      this is the second line
      .small this is the third small line
On this page