Please wait...
Page is loading

List

BS4 theme lists adds several classes to native dom ul & ol that enhances their functionality .

Getting started

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

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

Will add x.x.xx numbering to an OL.

  • To achieve this effect just place an OL nested inside a list time of parent OL
  • The Support for x.x.x.x.x... nesting is infinite
  • All numbers will have the same width so stuff will be aligned
  • Will work on RTL
Unset Direction
  1. this is the first list item with really really long line.... long... long... long... long... long... long... long...
  2. this is the second list item -
    1. this is the first nested list item with really really long line.... long... long... long... long... long... long... long...
    2. this is the second nested list item -
      1. this is the first 2 level nested item
      2. this is the second 2 level nested item
    3. this is the third nested item
    4. this is the fourth nested item with

      this is a paragraph

  3. this is the third item
  4. this is the fourth item
  5. this is the fifth item
  6. this is the sixth item
  7. this is the seventh item
  8. this is the eigth item
  9. this is the nineth item
  10. this is the tenth item
  11. this is the eleventh item
  12. this is the twelveth item
RTL with 'text-align: right'
  1. זאת השורה הראשונה עם טקסט מאוד מאוד ארוך...ארוך... ארוך... ארוך... ארוך... ארוך... ארוך...
  2. זאת השורה השנייה -
    1. זאת השורה הראשונה הפנימית עם טקסט מאוד מאוד ארוך...ארוך... ארוך... ארוך... ארוך... ארוך... ארוך...
    2. זאת השורה הפנימית השניה -
      1. זאת השורה הפנימית פנימית הראשונה
      2. זאת השורה הפנימית פנימית ההשניה
    3. זאת השורה הפנימית השלישית

    4. זאת השורה הפנימית הרביעית עם פרגרף עם <p dir=rtl> כמו שמייצר tinymce

  3. זאת השורה השלישית
  4. זאת השורה הרביעית
  5. זאת השורה החמישית
  6. זאת השורה השישית
  7. זאת השורה השביעית
  8. זאת השורה השמינית
  9. זאת השורה התשיעית
  10. זאת השורה העשירית
  11. זאת השורה האחד עשר
  12. זאת השורה השניים עשר
.row
  .col-24.col-md-12
    %h5 Unset Direction
    .list-legal.text-muted
      %ol
        %li='this is the first list item with really really long line.... long... long... long... long... long... long... long...'
        %li<>
          ='this is the second list item -'
          %ol
            %li<>
              this is the first nested list item with really really long line....
              long... long... long... long... long... long... long...
            %li<>
              this is the second nested list item -
              %ol
                %li this is the first 2 level nested item
                %li this is the second 2 level nested item
            %li this is the third nested item
            %li<>
              this is the fourth nested item with <P>
              %p
                this is a paragraph
        %li this is the third item
        %li this is the fourth item
        %li this is the fifth item
        %li this is the sixth item
        %li this is the seventh item
        %li this is the eigth item
        %li this is the nineth item
        %li this is the tenth item
        %li this is the eleventh item
        %li this is the twelveth item

  .col-24.col-md-12.mt-2.mt-md-0
    %h5 RTL with 'text-align: right'
    .list-legal.text-muted.rtl{style: 'text-align: right'}
      %ol
        %li<>
          ='זאת השורה הראשונה עם טקסט מאוד מאוד ארוך...'
          ='ארוך... ארוך... ארוך... ארוך... ארוך... ארוך...'
        %li<>
          ='זאת השורה השנייה -'
          %ol
            %li<>
              ='זאת השורה הראשונה הפנימית עם טקסט מאוד מאוד ארוך...'
              ='ארוך... ארוך... ארוך... ארוך... ארוך... ארוך...'
            %li<>
              ='זאת השורה הפנימית השניה -'
              %ol
                %li='זאת השורה הפנימית פנימית הראשונה'
                %li='זאת השורה הפנימית פנימית ההשניה'
            %li='זאת השורה הפנימית השלישית'
            %li<>
              %p{dir: 'rtl'}
                ='זאת השורה הפנימית הרביעית עם פרגרף עם'
                ="<p dir=rtl>"
                ='כמו שמייצר'
                ='tinymce'
        %li='זאת השורה השלישית'
        %li='זאת השורה הרביעית'
        %li='זאת השורה החמישית'
        %li='זאת השורה השישית'
        %li='זאת השורה השביעית'
        %li='זאת השורה השמינית'
        %li='זאת השורה התשיעית'
        %li='זאת השורה העשירית'
        %li='זאת השורה האחד עשר'
        %li='זאת השורה השניים עשר'

Steps list

Adding .steps-list will add a circle and number to each step

Unset Direction
  1. this is the first item
  2. this is the second item
  3. this is the third item
  4. this is the third item
  5. this is the fourth item
  6. this is the fifth item
RTL
  1. this is the first item
  2. this is the second item
  3. this is the third item
  4. this is the third item
  5. this is the fourth item
  6. this is the fifth item
.row
  .col-24.col-md-12
    %h5 Unset Direction
    %ol.list-steps
      %li this is the first item
      %li this is the second item
      %li this is the third item
      %li this is the third item
      %li this is the fourth item
      %li this is the fifth item

  .col-24.col-md-12.mt-2.mt-md-0{dir: 'rtl'}
    %h5 RTL
    %ol.list-steps
      %li this is the first item
      %li this is the second item
      %li this is the third item
      %li this is the third item
      %li this is the fourth item
      %li this is the fifth item
On this page