Bootstrap 4 User Interfaces


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

Success ! Thank you for messaging us.

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

Success ! Thank you for messaging us. Please visit this link for live chat.

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

Well done!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

× Success ! Thank you for messaging us.

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

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

50%

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

50%

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.

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