Bootstarp Forms Spinners

Introduction

In our previous blog, we explored important Bootstrap features such as the Affix Plugin, Bootstrap Filters, and the powerful Container system. These components help structure and enhance web layouts, giving your website a strong foundation.

In this part, we’re diving deeper into Bootstrap 4 with practical topics like Form Inputs, Media Objects, the dynamic Carousel Plugin, Colors, Spinners, and Cards. These elements add interactivity, visual style, and organization to your pages.

Bootstrap 4 Colors

Colors help to visually communicate with users. Bootstrap 4 provides various text and background color utility classes. The classes for text colors are:

.text-muted
.text-primary
.text-success
.text-danger
.text-info
.text-warning
.text-secondary
.text-white
.text-dark
.text-body
.text-light

Text Colors

Use text color classes to change the color of text.

<h5 class="text-info">Information Message</h5>

<p class="text-primary">Primary text</p>

<p class="text-success">Success text</p>

<p class="text-danger">Danger text</p>

Contextual Text Classes for Links

These classes work with links and include hover effects:

<a href="#" class="text-warning">Warning Link</a>

50% Opacity Text

Make your text semi-transparent:

<p class="text-black-50">Black with 50% opacity</p>

<p class="text-white-50 bg-dark">White with 50% opacity on dark background</p>

Background Colors

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, .bg-light are the classes for background colors. Change background using contextual classes:

<div class="bg-primary text-white">Primary Background</div>

<div class="bg-warning text-dark">Warning Background</div>

Bootstrap 4 Spinners

Spinners indicate loading or processing status. Bootstrap spinners are lightweight and customizable.

Basic Spinners

Use .spinner-border class, to create a spinner/loader:

<div class="spinner-border" role="status"></div>

Colored Spinners

Add contextual classes to change spinner colors:

<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>

Growing Spinners

Use .spinner-grow to create a growing effect:

<div class="spinner-grow text-info"></div>

Spinner Size

Control spinner size with spinner-border-sm:

<div class="spinner-border spinner-border-sm"></div>

Use custom size with inline CSS:

<div class="spinner-border" style="width: 3rem; height: 3rem;"></div>

Spinner Buttons

Add spinners inside buttons to show progress:

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Loading...
</button>

Bootstrap 4 Cards

Cards are flexible content containers that include options for headers, footers, content, colors, images, and more. They are one of the most powerful components in Bootstrap 4.

Basic Card

The .card class is used to construct a basic card, while the .card-body class is used for the content inside the card.

<div class="card">
  <div class="card-body">
    This is a basic card.
  </div>
</div>

Header and Footer

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

Contextual Cards

Use contextual background colors for cards:

<div class="card bg-primary text-white">
  <div class="card-body">Primary card</div>
</div>

<div class="card bg-success text-white">
  <div class="card-body">Success Card</div>
</div>

<div class="card bg-warning text-white">
  <div class="card-body">Warning card</div>
</div>

<div class="card bg-danger text-white">
  <div class="card-body">Danger card</div>
</div>

<div class="card bg-secondary text-white">
  <div class="card-body">Secondary card</div>
</div>

Titles, Text, and Links

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card Title</h4>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="card-link">Card Link</a>
  </div>
</div>

Card Images

<div class="card">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">Image with content</div>
</div>

Stretched Link

Make a link cover the entire card:

<a href="#" class="stretched-link">Read More</a>

Card Image Overlays

<div class="card bg-dark text-white">
  <img src="image.jpg" class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Overlay Title</h5>
    <p class="card-text">Overlay text</p>
  </div>
</div>

Card Columns

Display cards in a masonry layout:

<div class="card-columns">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

Card Deck

Group cards with equal width and height:

<div class="card-deck">
  <div class="card">Card 1
    More content
    Some more content</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

Card Group

Use card-group to align cards together:

<div class="card-group">
  <div class="card">Card A</div>
  <div class="card">Card B</div>
</div>

Conclusion

Bootstrap 4 simplifies styling with built-in components like form inputs, media objects, carousels, color utilities, spinners, and cards. These features are essential for building user-friendly and visually engaging websites.

In our next blog, we’ll explore more exciting Bootstrap 4 features, including Bootstrap Navs, Input Groups, and more advanced layout techniques to enhance navigation and input customization.

Request more information

Bootstarp Forms Spinners