Others

Vodi includes bunch of other predefined classes.

Background image hero

Specify the position of a background image:

Background top position:

                
                  <div class="bg-img-hero" style="background-image: url(...); height: 250px;"></div>
                
              

Background bottom position:

                
                  <div class="bg-img-hero-bottom" style="background-image: url(...); height: 250px;"></div>
                
              

Background center position:

                
                  <div class="bg-img-hero-center" style="background-image: url(...); height: 250px;"></div>
                
              

Background fixed position:

                
                  <div class="bg-img-hero-fixed" style="background-image: url(...); height: 250px;"></div>
                
              

Scrollbar

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.

Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

                        
                          <div class="card border shadow-none scrollbar" style="max-height: 15rem;">
                            <div class="card-body">
                              <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.</p>
                              <p>Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                            </div>
                          </div>
                        
                      

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.

Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

                        
                          <div class="card border shadow-none scrollbar-horizontal" style="max-height: 15rem;">
                            <div class="card-body">
                              <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure.</p>
                              <p>Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                            </div>
                          </div>
                        
                      

Z-index

              
                <div class="z-index-n1"></div>
                <div class="z-index-2"></div>
                <div class="z-index-4"></div>
                <div class="z-index-999"></div>
              
            

Opacity

              
                <div class="opacity-xs"></div>
                <div class="opacity-sm"></div>
                <div class="opacity"></div>
                <div class="opacity-lg"></div>