Bootstrap 4 User Interfaces Tweet

Alerts

Boostrap 4 alerts are basically contextual feedback messages which are displayed to a user when he performs certain action. You can use any of the contextual classes to add style to alerts.

<div class="alert alert-success">
  <strong>Success !</strong> Thank you for messaging us. 
</div>

Result

Alert Link

Add class alert-link to add matching contextual color to the links inside an alert.

<div class="alert alert-success">
  <strong>Success !</strong> Thank you for messaging us. Please visit <a href="#" class="alert-link">this link</a> for live chat. 
</div>

Result

Additional Content

You can also add a header using alert-heading as well as paragraphs and dividers within an alert.

<div class="alert alert-success">
  <h4 class="alert-heading">Well done!</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr>
  <p class="mb-0">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</div>

Result

Dismiss Alert

Add class alert-dismissable to the alert to make the alert dismissable. Add a button with class close for styling and attribute data-dismiss="alert" to make the alert dismisssable on click of the button. Button element works properly across all browsers while a link is also supported on most of them.

<div class="alert alert-success alert-dismissable">
  <a href="#" class="close" data-dismiss="alert">×</a>
  <strong>Success !</strong> Thank you for messaging us. 
</div>

Result

Badges

Bootstrap badges are components used for labeling or counting. Add class badge along with contextual color classes like badge-primary to change their appearance.

<p>Notifications <span class="badge badge-danger">3</span></p>

Result

Notifications 3

Badge in Buttons

You can also add badge to buttons or links.

<button class="btn btn-primary">Messages <span class="badge badge-light">5</span></button>
<a href="#" class="btn btn-primary">Messages <span class="badge badge-light">5</span></a>

Result

Messages 5
Messages 5

Pill Badges

Border radius of badges can be modified using class badge-pill.

<a href="#" class="badge badge-pill badge-success">Example</a>

Result

Example

Progress Bars

Adding progress bars to web pages is made easy with bootstrap. Simply add class progress to the wrapper container and add class progress-bar to the child. Define the width and it's done.

<div class="progress">
  <div class="progress-bar w-50"></div>
</div>

Result

Progress Bar Labels

Add content inside the progress-bar container to add labels on the progress bar.

<div class="progress">
  <div class="progress-bar w-50">50%</div>
</div>

Result

Progress Bar Contextual Backgrounds

Add contextual class bg-* to the progress bar for contextual backgrounds.

<div class="progress">
  <div class="progress-bar bg-danger w-50">50%</div>
</div>

Result

Progress Bar Group

You can add multiple progress-bar element inside a single progress element to display them as a single component.

<div class="progress">
  <div class="progress-bar bg-success w-50"></div>
  <div class="progress-bar bg-warning w-25"></div>
  <div class="progress-bar bg-danger w-25"></div>
</div>

Result

Striped Progress Bar

Add class progress-bar-striped to any progress-bar to add stripes to progress bars.

<div class="progress">
  <div class="progress-bar progress-bar-striped w-50"></div>
</div>

Result

Animated Stripes

Add class progress-bar-animated to the progress-bar-striped to add animation to the striped progress bar.

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated w-50"></div>
</div>

Result

Spinners

Bootstrap spinners can be used to display loading state of a component. They are light weight pure HTML and CSS built elements.

Border Spinner

Use class spinner-border to display a loading spinner.

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

Contextual Colors For Spinners

You can use contextual text color classes to add styles to spinners.

<div class="spinner-border text-danger"></div>

Spinner Grow

Spinners are available as growing spinners too. Use class spinner-grow to add a growing spinner to your web page.

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

Spinner Size

Add class spinner-border-sm or spinner-grow-sm to make the spinner smaller.

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

Spinner in Buttons

You can also add spinner to buttons.

Loading...

<button class="btn btn-success">
  <span class="spinner-border spinner-border-sm"></span> Loading...
</button>