Placeholders | Velzon - Admin & Dashboard Template

#### Are you sure ?

Are you sure you want to remove this Notification ?

#### Placeholders

#### Default Placeholder

Show Code

In the example below, we take a typical card component and recreate it with placeholders applied to create a “loading card”.

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

#####

    <!-- Base Examples -->
    <div class="card">
        <img src="assets/images/small/img-1.jpg" class="card-img-top" alt="card img">

        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>

    <div class="card" aria-hidden="true">
        <img src="assets/images/small/img-2.jpg" class="card-img-top" alt="card dummy img">
        <div class="card-body">
          <h5 class="card-title placeholder-glow">
            <span class="placeholder col-6"></span>
          </h5>
          <p class="card-text placeholder-glow">
            <span class="placeholder col-7"></span>
            <span class="placeholder col-4"></span>
            <span class="placeholder col-4"></span>
            <span class="placeholder col-6"></span>
          </p>
          <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
        </div>
    </div>

#### Width

Show Code

Use `w-25,w-50,w-75` or `w-100` class to placeholder class to set different widths to the placeholder.

    <!-- Width Sizing-->
    <div class="live-preview">
        <span class="placeholder col-6"></span>
        <span class="placeholder w-75"></span>
        <span class="placeholder" style="width: 25%;"></span>
    </div>

#### Sizing

Show Code

Use `placeholder-lg`, `placeholder-sm`, or `placeholder-xs` class to placeholder class to set different size placeholder.

    <!-- Sizing -->
    <span class="placeholder col-12 placeholder-lg"></span>

    <span class="placeholder col-12"></span>

    <span class="placeholder col-12 placeholder-sm"></span>

    <span class="placeholder col-12 placeholder-xs"></span>

#### Color

Show Code

Use `bg-` class with the below-mentioned color variation to set a custom color.

    <!-- Color -->
    <span class="placeholder col-12 mb-3"></span>

    <span class="placeholder col-12 mb-3 bg-primary"></span>

    <span class="placeholder col-12 mb-3 bg-secondary"></span>

    <span class="placeholder col-12 mb-3 bg-success"></span>

    <span class="placeholder col-12 mb-3 bg-danger"></span>

    <span class="placeholder col-12 mb-3 bg-warning"></span>

    <span class="placeholder col-12 mb-3 bg-info"></span>

    <span class="placeholder col-12 mb-3 bg-light"></span>

    <span class="placeholder col-12 mb-3 bg-dark"></span>

Loading...

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

##### Semi Box

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark

###### Background Image

Choose a body background image.

##### None

##### One

##### Two

##### Three