Category: Bootstrap

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add card images and colors with Bootstrap 5.

Images

We can add images above or below the card content.

For example, we can write:

<div class="card mb-3">  
  <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">  
  <div class="card-body">  
    <h5 class="card-title">Card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>  
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>  
  </div>  
</div>

We have the .card-img-top to put the image at the top of the card and make it flush to the edges of the card.

Likewise, we can put the card image at the bottom by writing:

<div class="card mb-3">  
  <div class="card-body">  
    <h5 class="card-title">Card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>  
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>  
  </div>  
  <img src="http://placekitten.com/200/200" class="card-img-bottom" alt="cat">  
</div>

The .card-img-bottom does similar things to .card-img-top but it works if the image is below the text.

Image Overlays

Images can be added as the background of the card.

For instance, we can write:

<div class="card mb-3">  
  <div class="card-img-overlay">  
    <h5 class="card-title">Card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>  
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>  
  </div>  
  <img src="http://placekitten.com/200/200" class="card-img" alt="cat">  
</div>

We have the .card-img-overlay class to put the text over the image.

Horizontal

The image can be side by side with the text.

For example, we can write:

<div class="card mb-3">  
  <div class="row g-0">  
    <div class="col-md-4">  
      <img src="[http://placekitten.com/200/200](http://placekitten.com/200/200)" alt="cat">  
    </div>  
    <div class="col-md-8">  
      <div class="card-body">  
        <h5 class="card-title">Card title</h5>  
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
      </div>  
    </div>  
  </div>  
</div>

to add the image to the left of the text.

The .col-md-4 and .col-md-8 put the divs side by side.

Card Styles

Cards can have different styles.

We can change the background color with the bg-* classes.

For example, we can write:

<div class="card text-white bg-primary mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Primary card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

<div class="card text-white bg-secondary mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Secondary card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

<div class="card text-white bg-success mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Success card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

<div class="card text-white bg-danger mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Danger card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>  
  </div>  
</div>

<div class="card bg-warning mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Warning card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

<div class="card text-body  bg-info mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Info card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>  
  </div>  
</div>

<div class="card bg-light mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Light card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>  
  </div>  
</div>

<div class="card text-white bg-dark mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Dark card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

to add the bg-* to change the backgrounds.

Border

Bootstrap 5 also provides the border-* classes to add outlined styles.

For example, we can write:

<div class="card border-primary mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body text-primary">  
    <h5 class="card-title">Primary card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>  
  </div>  
</div>

<div class="card border-secondary mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body text-secondary">  
    <h5 class="card-title">Secondary card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>  
  </div>  
</div>

<div class="card border-success mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body text-success">  
    <h5 class="card-title">Success 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>  
  </div>  
</div>

<div class="card border-danger mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body text-danger">  
    <h5 class="card-title">Danger card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

<div class="card border-warning mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Warning card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>  
  </div>  
</div>

<div class="card border-info mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Info card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

<div class="card border-light mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Light card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

<div class="card border-dark mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body text-dark">  
    <h5 class="card-title">Dark card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

to add cards with the outlined styles instead of having a background color.

Conclusion

We can add background colors and borders within cards.

Images can also be positioned in different ways.

Bootstrap 5 is in alpha when this is written and it’s subject to change.*

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add buttons with Bootstrap 5.

Buttons

We can add buttons with Bootstrap 5.

They come in a variety of styles.

For example, we can write:

<button type="button" class="btn btn-primary">button</button>  
<button type="button" class="btn btn-secondary">button</button>  
<button type="button" class="btn btn-success">button</button>  
<button type="button" class="btn btn-danger">button</button>  
<button type="button" class="btn btn-warning">button</button>  
<button type="button" class="btn btn-info">button</button>  
<button type="button" class="btn btn-light">button</button>  
<button type="button" class="btn btn-dark">button</button>  
<button type="button" class="btn btn-link">link</button>

Then we get the buttons in a variety of colors.

btn-link styles the button as a link.

Disable Text Wrapping

We can add the .text-nowrap class to disable text wrapping.

Button Tags

The .btn class is supposed to be applied to the button elements, but we can also use them on a and input elements.

For instance, we can write:

<a class="btn btn-primary" href="#" role="button">link</a>  
<button class="btn btn-primary" type="submit">button</button>  
<input class="btn btn-primary" type="button" value="Input">  
<input class="btn btn-primary" type="submit" value="Submit">  
<input class="btn btn-primary" type="reset" value="Reset">

We add the .btn class to a and input elements as we do with buttons.

Outline Buttons

Buttons are also available in outline styles.

For example, we can write:

<button type="button" class="btn btn-outline-primary">button</button>  
<button type="button" class="btn btn-outline-secondary">button</button>  
<button type="button" class="btn btn-outline-success">button</button>  
<button type="button" class="btn btn-outline-danger">button</button>  
<button type="button" class="btn btn-outline-warning">button</button>  
<button type="button" class="btn btn-outline-info">button</button>  
<button type="button" class="btn btn-outline-light">button</button>  
<button type="button" class="btn btn-outline-dark">button</button>

We have the btn-outline class to add the outline.

Sizes

The .btn-lg and .btn-sm classes let us make buttons large and small respectively.

To use them, we write:

<button type="button" class="btn btn-primary btn-lg">large button</button>

to make it big.

And we write:

<button type="button" class="btn btn-primary btn-sm">small  button</button>

to make it small.

Disabled State

We can make buttons disabled with the disabled attribute.

For example, we can write:

<button type="button" class="btn btn-lg btn-primary" disabled>disabled button</button>

We just add the attribute to the button.

a tags don’t support the disabled attribute, but we can use the .disabled class to make it appear disabled visually.

pointer-events will also be set to none so that when we click on the link, it won’t do anything.

Toggle States

We can make buttons that we can toggle.

For example, we can write:

<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">Toggle button</button>

<button type="button" class="btn btn-primary active" data-toggle="button" autocomplete="off">Active toggle button</button>

<button type="button" class="btn btn-primary" disabled data-toggle="button" autocomplete="off">Disabled toggle button</button>

We add the data-toggle attribute to make it toggleable.

Now we’ll see effects when we click on them.

It’ll be darker when it’s toggled on and lighter if it’s toggled off.

Methods

We can create a button instance with the button constructor.

For instance, we can write:

<button class="btn btn-primary">button</button>

in our HTML file and:

const button = document.querySelector('button')  
const bsButton = new bootstrap.Button(button)

in our JavaScript file to create a Bootstrap button with the bootstrap.Button constructor.

The button has the toggle method to let us toggle it.

So we can write:

button.toggle()

to toggle it on and off.

Conclusion

Bootstrap 5 comes with various classes for styling buttons.

Also, we can make the toggleable with some attributes.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add button groups with Bootstrap 5.

Button Group

Button groups let us group a series of buttons together on a single line.

To add one, we can write:

<div class="btn-group">  
  <button type="button" class="btn btn-secondary">left</button>  
  <button type="button" class="btn btn-secondary">center</button>  
  <button type="button" class="btn btn-secondary">right</button>  
</div>

We have the .btn-group class to create the button group.

Also, we can use the .active class to highlight a button.

For example, we can write:

<div class="btn-group">  
  <button type="button" class="btn btn-secondary active">left</button>  
  <button type="button" class="btn btn-secondary">center</button>  
  <button type="button" class="btn btn-secondary">right</button>  
</div>

This also works with links:

<div class="btn-group">  
  <a href="#" class="btn btn-secondary active">left</a>  
  <a href="#" class="btn btn-secondary">center</a>  
  <a href="#" class="btn btn-secondary">right</a>  
</div>

The active class works with both buttons and links.

Outlined Styles

The button group can have outlined styles instead of background color.

For example, we can write:

<div class="btn-group">  
  <a href="#" class="btn btn-outline-secondary">left</a>  
  <a href="#" class="btn btn-outline-secondary">center</a>  
  <a href="#" class="btn btn-outline-secondary">right</a>  
</div>

We have the btn-outline-secondary class on each button to make the buttons outlined.

Button Toolbar

To group button groups together, we can add button toolbars.

For example, we can write:

<div class="btn-toolbar">  
  <div class="btn-group mr-2">  
    <button type="button" class="btn btn-primary">1</button>  
    <button type="button" class="btn btn-primary">2</button>  
    <button type="button" class="btn btn-primary">3</button>  
  </div>  
  <div class="btn-group mr-2">  
    <button type="button" class="btn btn-primary">4</button>  
    <button type="button" class="btn btn-primary">5</button>  
    <button type="button" class="btn btn-primary">6</button>  
  </div>  
  <div class="btn-group">  
    <button type="button" class="btn btn-primary">7</button>  
    <button type="button" class="btn btn-primary">8</button>  
  </div>  
</div>

We have the div with the btn-toolbar class to add the button group.

Then we have the button groups inside.

We add mr-2 to add some margins to the right.

Sizing

Button group sizes can be changed.

The btn-group-* classes can let us change the size.

For example, we can write:

<div class="btn-group btn-group-lg">  
  <button type="button" class="btn btn-primary">1</button>  
  <button type="button" class="btn btn-primary">2</button>  
  <button type="button" class="btn btn-primary">3</button>  
</div>

to add a button group with large buttons.

This is done with the btn-group-lg class.

To make a button group with small buttons, we can write:

<div class="btn-group btn-group-sm">  
  <button type="button" class="btn btn-primary">1</button>  
  <button type="button" class="btn btn-primary">2</button>  
  <button type="button" class="btn btn-primary">3</button>  
</div>

This is done with the btn-group-sm class.

Nesting

Button groups can be nested.

For example, we can write:

<div class="btn-group">  
  <button type="button" class="btn btn-secondary">left</button>  
  <button type="button" class="btn btn-secondary">center</button>

  <div class="btn-group">  
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">  
      Dropdown  
    </button>  
    <ul class="dropdown-menu">  
      <li><a class="dropdown-item" href="#">foo</a></li>  
      <li><a class="dropdown-item" href="#">bar</a></li>  
    </ul>  
  </div>  
</div>

We put a button group inside another button group so that we can add a dropdown to our code.

The dropdown is in one button group.

We have a button for the dropdown toggle and a ul for the menu.

Vertical Variation

We can make button groups vertical with the btn-group-vertical class.

Split button dropdowns aren’t supported with vertical button groups.

To add one, we can write:

<div class="btn-group-vertical">  
  <button type="button" class="btn btn-secondary">left</button>  
  <button type="button" class="btn btn-secondary">center</button>

  <div class="btn-group">  
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">  
      Dropdown  
    </button>  
    <ul class="dropdown-menu">  
      <li><a class="dropdown-item" href="#">foo</a></li>  
      <li><a class="dropdown-item" href="#">bar</a></li>  
    </ul>  
  </div>  
</div>

We just add the btn-group-vertical class to make it vertical.

Conclusion

Button groups let us add multiple buttons into one container.

We can nest them and add dropdowns to them.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add badges and breadcrumbs with Bootstrap 5.

Badges

Badges scale to match the size of the immediate parent element by using font sizing and em units.

They no longer have focus or hover style for links in Bootstrap 5.

For example, we can write:

<h1>heading <span class="badge bg-secondary">New</span></h1>  
<h2>heading <span class="badge bg-secondary">New</span></h2>  
<h3>heading <span class="badge bg-secondary">New</span></h3>  
<h4>heading <span class="badge bg-secondary">New</span></h4>  
<h5>heading <span class="badge bg-secondary">New</span></h5>  
<h6>heading <span class="badge bg-secondary">New</span></h6>

to add the badge with the badge class.

They can also be added to the buttons.

For example, we can write:

<button type="button" class="btn btn-primary">  
  Notifications <span class="badge bg-secondary">100</span>  
</button>

We can also add screenreader-only text to disambiguate badge text:

<button type="button" class="btn btn-primary">  
  Notifications <span class="badge bg-secondary">100</span>  
  <span class="sr-only">unread messages</span>  
</button>

We have a span with the sr-only class which is only read by screen readers and isn’t visible on the screen.

Background Colors

The background colors can be changed with various classes.

For example, we can write:

<span class="badge bg-primary">Primary</span>  
<span class="badge bg-secondary">Secondary</span>  
<span class="badge bg-success">Success</span>  
<span class="badge bg-danger">Danger</span>  
<span class="badge bg-warning text-dark">Warning</span>  
<span class="badge bg-info">Info</span>  
<span class="badge bg-light text-dark">Light</span>  
<span class="badge bg-dark">Dark</span>

to add badges with various styles.

The bg-* classes are the styling classes.

Pill Badges

We can also make badges display in pill style.

For example, we can write:

<span class="badge rounded-pill bg-primary">Primary</span>  
<span class="badge rounded-pill bg-secondary">Secondary</span>  
<span class="badge rounded-pill bg-success">Success</span>  
<span class="badge rounded-pill bg-danger">Danger</span>  
<span class="badge rounded-pill bg-warning text-dark">Warning</span>  
<span class="badge rounded-pill bg-info">Info</span>  
<span class="badge rounded-pill bg-light text-dark">Light</span>  
<span class="badge rounded-pill bg-dark">Dark</span>

We add the rounded-pill class to make them display as pills.

Breadcrumb

Breadcrumbs are used to indicate the current page’s location with a navigational hierarchy that automatically adds separators with CSS.

For example, we can write:

<nav>  
  <ol class="breadcrumb">  
    <li class="breadcrumb-item active">Home</li>  
  </ol>  
</nav>

<nav>  
  <ol class="breadcrumb">  
    <li class="breadcrumb-item"><a href="#">Home</a></li>  
    <li class="breadcrumb-item active">Profile</li>  
  </ol>  
</nav>

<nav>  
  <ol class="breadcrumb">  
    <li class="breadcrumb-item"><a href="#">Home</a></li>  
    <li class="breadcrumb-item"><a href="#">Profile</a></li>  
    <li class="breadcrumb-item active">Settings</li>  
  </ol>  
</nav>

We add breadcrumbs with ol and li elements with the breadcrumb class to add the breadcrumbs.

li has the breadcrumb-item class to add them as items.

Changing the Separator of the Breadcrumb

We can change the separator of the breadcrumb with the $breadcrumb-divider SASS variable.

For instance, we can write:

$breadcrumb-divider: quote(">");

to change it to a > .

And we can write:

$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");

to change it to an SVG.

We can remove it with:

$breadcrumb-divider: none;

Conclusion

We can add badges and breadcrumbs easily with Bootstrap 5.

The only change from the previous version is that there’s no hover effects for badges.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add alerts with Bootstrap 5.

Alerts

Alerts give users contextual feedback messages for user actions.

It comes in various styles.

For example, we can write:

<div class="alert alert-primary">  
  primary alert  
</div>  
<div class="alert alert-secondary">  
  secondary alert  
</div>  
<div class="alert alert-success">  
  success alert  
</div>  
<div class="alert alert-danger">  
  danger alert  
</div>  
<div class="alert alert-warning">  
  warning alert  
</div>  
<div class="alert alert-info">  
  info alert  
</div>  
<div class="alert alert-light">  
  light alert  
</div>  
<div class="alert alert-dark">  
  dark alert  
</div>

We add the classes for the alerts with the given classes.

Link Color

The .alert-link class lets us match colored links with any alerts.

For example, we can write:

<div class="alert alert-primary">  
  primary alert <a href="#" class="alert-link">link</a>  
</div>  
<div class="alert alert-secondary" role="alert">  
  secondary alert <a href="#" class="alert-link">link</a>  
</div>  
<div class="alert alert-success" role="alert">  
  success alert <a href="#" class="alert-link">link</a>  
</div>  
<div class="alert alert-danger" role="alert">  
  danger alert <a href="#" class="alert-link">link</a>  
</div>  
<div class="alert alert-warning" role="alert">  
  warning alert <a href="#" class="alert-link">link</a>  
</div>  
<div class="alert alert-info" role="alert">  
  info alert <a href="#" class="alert-link">link</a>  
</div>  
<div class="alert alert-light" role="alert">  
  light alert <a href="#" class="alert-link">link</a>  
</div>  
<div class="alert alert-dark" role="alert">  
  dark alert <a href="#" class="alert-link">link</a>  
</div>

We have the .alert-link class to add links that match the style of the alerts.

Additional Content

We can add additional content into our alerts.

A heading can be added with the alert-heading class.

For example, we can write:

<div class="alert alert-success" role="alert">  
  <h4 class="alert-heading">Heading</h4>  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam hendrerit nisl. Nunc efficitur ex id orci lacinia, eget bibendum risus aliquam. Phasellus et ornare nisi, vel lacinia purus. Vivamus mollis cursus magna, quis consectetur justo bibendum vitae. Donec mattis sem non nisi elementum, non sollicitudin massa pretium. Donec ante enim, efficitur vitae pellentesque ac, varius eget purus. Aliquam ac ex sed dui tristique rutrum.</p>  
  <hr>  
  <p class="mb-0">In dictum elit vitae risus mattis sollicitudin non eu massa. Integer pretium pharetra nisi sed maximus. Sed sodales, sapien tristique posuere rhoncus, arcu quam cursus libero, in feugiat diam ante sed eros. Curabitur convallis auctor metus, eget lacinia tortor venenatis et. Praesent ligula metus, consequat sodales mauris fermentum, rhoncus placerat tortor. Cras nec laoreet purus, nec dictum erat. Quisque ac accumsan odio, non finibus urna.  </p>  
</div>

to add the alert-heading class to the heading.

And then the paragraphs below it have the main content.

Dismissing Alerts

We can add the .alert-dismissible class to add a close button to the alert.

On the close button, we’ve to add the data-dismiss="alert" attribute to let us close it.

The .fade and .show classes let us add transition effects when dismissing them.

For example, we can write:

<div class="alert alert-warning alert-dismissible fade show">  
  <strong>alert</strong>  
  <button type="button" class="close" data-dismiss="alert">  
    <span>&times;</span>  
  </button>  
</div>

We add the button with the close class to add a close button.

And we have the data-dismiss attribute to let us close the alert with it.

Also, we have the alert-dismissible class to make the alert dismissible.

fade showgives us a fade transition effect when the alert is shown.

The Bootstrap JavaScript files are required for this to work.

JavaScript Behavior

We can trigger the dismissal of an alert with JavaScript by writing:

const alertList = document.querySelectorAll('.alert')  
alertList.forEach((alert) => {  
  new bootstrap.Alert(alert)  
})

The alert HTML can then be written as:

<div class="alert alert-warning alert-dismissible fade show" >  
  <strong>alert</strong>  
  <button type="button" class="close" data-dismiss="alert" >  
    <span>&times;</span>  
  </button>  
</div>

We can then get an existing alert and close it programmatically:

setTimeout(() => {  
  const alertNode = document.querySelector('.alert');    
  const alert = new bootstrap.Alert(alertNode)  
  alert.close()  
}, 3000)

We created the alert object with the bootstrap.Alert constructor so that we can call close on it to close it.

Events

Alerts also emit events, we can listen to the close.bs.alert and closed.bs.alert events and do what we want.

Conclusion

We can add alerts and style them with Bootstrap 5.

They can be added programmatically and closed programmatically.