Miscellaneous

Use our utilities to quickly style almost any element. Great for text, images, buttons, or any other element.

Misc Opacity

Preview
HTML

                
                  <!-- 
                    Opacity Classes
                  -->

                  <button type="button" class="btn btn-danger opacity-25">.opacity-25</button>
                  <button type="button" class="btn btn-danger opacity-50">.opacity-50</button>
                  <button type="button" class="btn btn-danger opacity-75">.opacity-75</button>
                  <button type="button" class="btn btn-danger opacity-100">.opacity-100</button>

Misc Verical Align

            
              <div class="align-baseline"> ... </div>
              <div class="align-top"> ... </div>
              <div class="align-middle"> ... </div>
              <div class="align-bottom"> ... </div>
              <div class="align-text-top"> ... </div>
              <div class="align-text-bottom"> ... </div>

              <!-- Table Example -->
              <table style="height: 100px;">
                <tbody>
                  <tr>
                    <td class="align-baseline">baseline</td>
                    <td class="align-top">top</td>
                    <td class="align-middle">middle</td>
                    <td class="align-bottom">bottom</td>
                    <td class="align-text-top">text-top</td>
                    <td class="align-text-bottom">text-bottom</td>
                  </tr>
                </tbody>
              </table>

Table Example

baseline

top

middle

bottom

text-top

text-bottom

Misc Z-Index

            
              <div class="z-index-n1"> ... </div>
              <div class="z-index-0"> ... </div>
              <div class="z-index-1"> ... </div>
              <div class="z-index-2"> ... </div>
              <div class="z-index-3"> ... </div>
              <div class="z-index-100"> ... </div>
              <div class="z-index-9999"> ... </div>

Misc Visibility

            
              <div class="visible"> ... </div>
              <div class="invisible"> ... </div>

              <div class="visually-hidden">Title for screen readers</div>
              <a class="visually-hidden-focusable" href="#content">Skip to main content</a>

              <div class="d-none-important"> used by javascripts, .d-none is overwriten </div>
              <div class="d-none-empty"> hide empty containers </div>
              <div class="d-none-cloaked"> used by switches or elements where browsers ignore elements with display: block </div>

Misc Animation

            
              <div class="animate-slidein"> ... </div>

              <div class="animate-bouncein"> ... </div>
              <div class="animate-bounceinup"> ... </div>

              <div class="animate-fadein"> ... </div>
              <div class="animate-fadein-slow"> ... </div>

              <div class="animate-spin"> ... </div>
              <div class="animate-spin-infinite"> ... </div>

              <div class="animate-pulse"> ... </div>
              <div class="animate-pulse-primary"> ... </div>
              <div class="animate-pulse-danger"> ... </div>
              <div class="animate-pulse-warning"> ... </div>
              <div class="animate-pulse-success"> ... </div>

Pulse animation examples

3 3 3 3 3

Spin animation examples