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
RTL with 'text-align: right'
.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='זאת השורה השניים עשר'
On this page