Placeholders

  1. Bootstrap UI
  2. Placeholders
Customizer
Judia Builder

Choose your themes & layouts etc.

Select Layouts

Choose your layout.

Vertical
Horizontal
Color Scheme

Choose Light or Dark Scheme.

Light
Dark
Brand
Card Layout

Choose borderless or border layout.

Borderless
Border
Layout Width

Choose Fluid or Boxed layout.

Fluid
Boxed
Layout Position

Choose Fixed or Scrollable Layout Position.

Topbar Color

Choose Light, Dark or Brand Topbar Color.

Light
Dark
Brand
Topbar Images

Choose Topbar Images.

Preloader

Choose a preloader.

Enable
Disable
Buy Now

Default Placeholder

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

card img
Card title

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

Go somewhere
HTML Preview
<!-- Base Examples -->
<div class="card">
    <img src="https://img.themesbrand.com/judia/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="https://img.themesbrand.com/judia/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

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

HTML Preview
<!-- 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

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

HTML Preview
<!-- 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

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

HTML Preview
<!-- 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>
© Judia.
Design & Develop by Themesbrand