Bootstrap - Placeholders
Getting Started with Placeholders
To start using placeholders in your Bootstrap project, you first need to set up a basic Bootstrap environment. This involves creating a new HTML file and including the necessary Bootstrap CSS and JavaScript files.
Begin by creating a new HTML file and adding the following basic structure:
Example: Basic HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Placeholders</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<!-- Your content goes here -->
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>In the <head> section, include the Bootstrap CSS file. You can either download the CSS file and link it locally or use a CDN link as shown in the example above.
Next, in the <body> section, you can start adding your content where the comment <!-- Your content goes here --> is placed. This is where you'll implement the placeholders in the following sections.
Before the closing </body> tag, include the Bootstrap JavaScript file. Similar to the CSS file, you can either download it locally or use a CDN link.
With the basic Bootstrap project set up and the necessary files included, you're now ready to start using placeholders in your web page.
Placeholder Classes
Bootstrap has placeholder classes that let you add placeholder elements to your web pages. These classes have different styling options and effects to make your placeholders look more engaging and interactive.
The most basic placeholder class is .placeholder. Adding this class to an element gives it a simple placeholder styling. The .placeholder class uses a light gray background color and a rounded border for the element, making it look like a placeholder.
Example: Basic Placeholder
<p class="placeholder">This is a basic placeholder</p>Bootstrap also has .placeholder-* classes for different placeholder sizes. These classes let you make placeholders with different heights and widths. The available size classes are:
| Class | Description |
|---|---|
.placeholder-xs |
Extra Small Placeholder |
.placeholder-sm |
Small Placeholder |
.placeholder-md |
Medium Placeholder |
.placeholder-lg |
Large Placeholder |
.placeholder-xl |
Extra Large Placeholder |
Example: Different Placeholder Sizes
<p class="placeholder placeholder-xs">Extra Small Placeholder</p>
<p class="placeholder placeholder-sm">Small Placeholder</p>
<p class="placeholder placeholder-md">Medium Placeholder</p>
<p class="placeholder placeholder-lg">Large Placeholder</p>
<p class="placeholder placeholder-xl">Extra Large Placeholder</p>To add interactivity to your placeholders, Bootstrap has the .placeholder-glow and .placeholder-wave classes. The .placeholder-glow class makes an animated glow effect around the placeholder, drawing attention to it. The .placeholder-wave class uses an animated wave effect for the placeholder, giving it a more dynamic look.
Example: Interactive Placeholders
<p class="placeholder placeholder-glow">Glowing Placeholder</p>
<p class="placeholder placeholder-wave">Waving Placeholder</p>You can combine these placeholder classes to make many different placeholder styles. Bootstrap helps you if you want a simple placeholder, different sizes, or eye-catching animations.
In the next section, you'll learn how to control the width of placeholders using Bootstrap's utility classes.
Placeholder Width
Bootstrap lets you control the width of placeholders using the .w-* utility classes. These classes let you set the width of placeholders to different percentages, giving you more control over their size and layout.
The .w-* classes range from .w-25 to .w-100, representing widths from 25% to 100% of the parent container. Here are the available width classes:
| Class | Description |
|---|---|
.w-25 |
Sets the placeholder width to 25% |
.w-50 |
Sets the placeholder width to 50% |
.w-75 |
Sets the placeholder width to 75% |
.w-100 |
Sets the placeholder width to 100% |
To use these classes, add them to the placeholder element along with the .placeholder class.
Example: Placeholder with 50% width
<p class="placeholder w-50">This placeholder has a width of 50%</p>You can combine the width classes with other placeholder classes to make placeholders with different sizes and styles.
Example: Large 75% width placeholder with glow
<p class="placeholder placeholder-lg w-75 placeholder-glow">Large 75% Width Placeholder with Glow</p>Here are some more examples of placeholders with different widths:
Example: 25% to 100% width placeholders
<p class="placeholder w-25">25% Width Placeholder</p>
<p class="placeholder w-50">50% Width Placeholder</p>
<p class="placeholder w-75">75% Width Placeholder</p>
<p class="placeholder w-100">100% Width Placeholder</p>By using the .w-* classes, you can adjust the width of your placeholders to fit your design needs. Bootstrap's width utility classes make it simple to achieve the desired layout.
In the next section, you'll explore how to change the color of placeholders using Bootstrap's background color classes.
Placeholder Color
Bootstrap offers a way to change the color of placeholders using the .bg-* background color classes. These classes let you set the background color of placeholders to match your design or indicate different states.
To change the color of a placeholder, add one of the .bg-* classes to the placeholder element along with the .placeholder class. Bootstrap has several background color classes:
| Class | Description |
|---|---|
.bg-primary |
Sets the placeholder background color to the primary color |
.bg-secondary |
Sets the placeholder background color to the secondary color |
.bg-success |
Sets the placeholder background color to the success color |
.bg-danger |
Sets the placeholder background color to the danger color |
.bg-warning |
Sets the placeholder background color to the warning color |
.bg-info |
Sets the placeholder background color to the info color |
.bg-light |
Sets the placeholder background color to a light color |
.bg-dark |
Sets the placeholder background color to a dark color |
Example: Primary background color placeholder
<p class="placeholder bg-primary">Primary Color Placeholder</p>You can combine the color classes with other placeholder classes to make placeholders with different colors, sizes, and effects.
Example: Large success color placeholder with wave effect
<p class="placeholder placeholder-lg bg-success placeholder-wave">Large Success Color Placeholder with Wave Effect</p>Example: Placeholders with different colors
<p class="placeholder bg-secondary">Secondary Color Placeholder</p>
<p class="placeholder bg-danger">Danger Color Placeholder</p>
<p class="placeholder bg-warning">Warning Color Placeholder</p>
<p class="placeholder bg-info">Info Color Placeholder</p>
<p class="placeholder bg-light">Light Color Placeholder</p>
<p class="placeholder bg-dark">Dark Color Placeholder</p>By using the .bg-* classes, you can change the background color of your placeholders to suit your needs. The background color classes make it simple to achieve the desired look.
In the next section, you'll learn how to adjust the size of placeholders using Bootstrap's size classes.
Placeholder Sizing
Bootstrap has classes to change the size of placeholders, letting you make them bigger or smaller based on your needs. The .placeholder-lg and .placeholder-sm classes are used to create bigger and smaller placeholders.
To make a bigger placeholder, add the .placeholder-lg class to the placeholder element along with the .placeholder class. This increases the padding and font size of the placeholder, making it bigger.
Example: Large Placeholder
<p class="placeholder placeholder-lg">Large Placeholder</p>To create a smaller placeholder, use the .placeholder-sm class together with the .placeholder class. This decreases the padding and font size of the placeholder, making it smaller.
Example: Small Placeholder
<p class="placeholder placeholder-sm">Small Placeholder</p>You can also change the size of placeholders using custom CSS. By targeting the placeholder element and changing its padding, font-size, width, or height properties, you can make the size you want.
Example: Custom Sized Placeholder
<p class="placeholder custom-placeholder">Custom Sized Placeholder</p>.custom-placeholder {
padding: 20px;
font-size: 24px;
width: 300px;
height: 100px;
}Here are a few more examples of placeholders with different sizes:
Example: Multiple Placeholders
<p class="placeholder">Default Placeholder</p>
<p class="placeholder placeholder-sm">Small Placeholder</p>
<p class="placeholder placeholder-lg">Large Placeholder</p>
<p class="placeholder custom-placeholder">Custom Sized Placeholder</p>By using the .placeholder-lg and .placeholder-sm classes, along with custom CSS, you can easily change the size of your placeholders to fit your design needs. Bootstrap's sizing classes give you a quick way to make placeholders bigger or smaller, while custom CSS gives you full control over the placeholder's size.
Placeholder Animation
Bootstrap has animated placeholder classes that add animation effects to your placeholders. These classes help draw attention to the placeholder elements and make them visually appealing.
To add a glow animation to a placeholder, use the .placeholder-glow class with the .placeholder class on the element. The .placeholder-glow class applies a glow effect to the placeholder, making it fade in and out.
Example: Glowing Placeholder
<p class="placeholder placeholder-glow">Glowing Placeholder</p>Another animation option is the .placeholder-wave class, which creates a waving effect on the placeholder. The waving animation gives the impression of movement and adds a dynamic touch to the placeholder.
Example: Waving Placeholder
<p class="placeholder placeholder-wave">Waving Placeholder</p>You can customize the placeholder animations using CSS. By targeting the placeholder element and applying CSS animations or transitions, you can create unique effects.
Example: Custom Animated Placeholder
<p class="placeholder custom-animation">Custom Animated Placeholder</p>@keyframes customAnimation {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.custom-animation {
animation: customAnimation 2s infinite;
}Here are more examples of animated placeholders:
Example: Various Animated Placeholders
<p class="placeholder placeholder-glow">Glowing Placeholder</p>
<p class="placeholder placeholder-wave">Waving Placeholder</p>
<p class="placeholder custom-animation">Custom Animated Placeholder</p>By using the .placeholder-glow and .placeholder-wave classes, along with custom CSS animations, you can add animations to your placeholders. These animations can grab the user's attention and make your placeholders engaging.
In the next section, you'll learn how to use placeholders in different Bootstrap components, such as buttons, cards, and list groups.
Placeholders in Different Components
Bootstrap placeholders can be used in various components to show loading states or temporary content. You can add placeholders to buttons, cards, list groups, and other components to provide a visual cue to the user.
Placeholders in buttons can be useful when you want to show that an action is being processed. To add a placeholder to a button, you can use the .placeholder class along with the button classes.
Example: Button with Placeholder
<button class="btn btn-primary" disabled>
<span class="placeholder col-12"></span>
</button>Cards are another component where placeholders can be helpful. When loading card content dynamically, you can use placeholders to indicate that the content is being fetched.
Example: Card with Placeholder
<div class="card">
<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>
<span class="placeholder col-8"></span>
</p>
</div>
</div>List groups can also benefit from placeholders when loading dynamic data. You can use placeholders to represent list items while the actual data is being loaded.
Example: List Group with Placeholders
<ul class="list-group">
<li class="list-group-item">
<span class="placeholder col-12"></span>
</li>
<li class="list-group-item">
<span class="placeholder col-12"></span>
</li>
<li class="list-group-item">
<span class="placeholder col-12"></span>
</li>
</ul>You can use placeholders in many other Bootstrap components:
| Component | Usage |
|---|---|
| Navbars | Use placeholders for menu items or search bars. |
| Forms | Add placeholders to form inputs or labels. |
| Tables | Use placeholders for table rows or cells. |
| Progress bars | Show placeholders while progress is being updated. |
Example: Navbar with Placeholder
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand placeholder col-4"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-2"></span>
</div>
</nav>Example: Form with Placeholders
<form>
<div class="mb-3">
<label class="form-label placeholder col-2"></label>
<input type="text" class="form-control placeholder" disabled>
</div>
<button type="submit" class="btn btn-primary" disabled>
<span class="placeholder col-12"></span>
</button>
</form>Example: Table with Placeholders
<table class="table">
<thead>
<tr>
<th><span class="placeholder col-6"></span></th>
<th><span class="placeholder col-4"></span></th>
<th><span class="placeholder col-2"></span></th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="placeholder col-12"></span></td>
<td><span class="placeholder col-12"></span></td>
<td><span class="placeholder col-12"></span></td>
</tr>
</tbody>
</table>By adding placeholders into different components, you can create a consistent loading experience across your website or application. Placeholders help users understand that content is being loaded and provide a visual representation of what to expect.
In the next section, you'll learn how to customize placeholders further by changing their styles and combining them with other Bootstrap classes.
Customizing Placeholders
While Bootstrap provides placeholder classes with default styles, you can customize placeholders to match your website's design or add unique styles. Customizing placeholders involves overriding the default styles using custom CSS and combining placeholders with other Bootstrap classes and styles.
To override the default placeholder styles, you can target the .placeholder class in your custom CSS and change the properties.
Example: Custom Styled Placeholder
<p class="placeholder custom-placeholder">Custom Styled Placeholder</p>.custom-placeholder {
background-color: #f0f0f0;
border: 2px dashed #999;
padding: 20px;
font-weight: bold;
color: #333;
}In the example above, the .custom-placeholder class is used to apply custom styles to the placeholder. The background color is changed to a light gray (#f0f0f0), the border is set to a dashed style, the padding is increased, and the font weight and color are modified.
You can also combine placeholders with other Bootstrap classes and styles to achieve unique designs.
Example: Placeholder with Bootstrap Classes
<p class="placeholder text-primary border border-3 border-primary shadow-sm">
Placeholder with Bootstrap Classes
</p>In this example, the placeholder is combined with the text-primary class to set the text color to the primary color, the border and border-primary classes to add a border with the primary color, and the shadow-sm class to apply a small box shadow.
You can also use custom CSS classes or inline styles to add more specific styles to placeholders.
Example: Placeholder with Custom CSS Class
<p class="placeholder custom-bg custom-text">Placeholder with Custom CSS Class</p>.custom-bg {
background-color: #e0e0e0;
}
.custom-text {
color: #555;
font-style: italic;
}In this case, the .custom-bg and .custom-text classes are used to apply a custom background color and text styles to the placeholder.
Example: Rounded Placeholder with Gradient
<p class="placeholder rounded-pill custom-gradient">Rounded Placeholder with Gradient</p>.custom-gradient {
background: linear-gradient(to right, #ff0000, #0000ff);
color: #fff;
padding: 10px 20px;
}Example: Placeholder with Custom Font
<p class="placeholder custom-font">
<i class="fas fa-spinner fa-spin me-2"></i>
Loading...
</p>.custom-font {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
}By customizing placeholders with CSS and combining them with Bootstrap classes and styles, you can create placeholders that fit into your website's design. Customization allows you to make the placeholders more visually appealing and consistent with your brand.
Use custom styles wisely and consider the overall user experience when customizing placeholders. Make sure the placeholders are still recognizable as placeholders and provide clear visual feedback to the users.
With the ability to customize placeholders, you have the flexibility to create unique and engaging loading experiences for your website or application.