Category: HTML

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 customize cards with Bootstrap 5.

Sizing

We can change a card’s width with the column classes.

For example, we can write:

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">title</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>

  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">title</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

We have 2 cards with the col-sm-6 classes to make them take half the width of the viewport if hits the sm breakpoint or wider.

Using Utilities

Also, we can use the utility classes to change the width of a card.

For instance, we can write:

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

to make a card 75% of the screen’s width.

w-75 is the class that makes it so.

Using Custom CSS

To change sizes, we can also use custom CSS.

For example, we can write:

<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

to make the width of the card 20rem.

Text Alignment

The alignment of the text can change.

For instance, we can write:

<div class="card text-center" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

to make the text center with the .text-center class.

We can also use the .text-right class to right-align the text:

<div class="card text-right" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Navigation

We can add navigation to the top of the card.

For example, we can write:

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

We add a ul with the nav classes applied to it.

And we have the li s with the nav-item classes.

Now we have a nav bar at the top of the page displayed as a tab.

.card-header-tab and .nav-tabs make the links display as tabs.

The nav is added in the card header to show it on top.

We can make the links displayed as pills with the .card-header-pills class.

For instance, we can write:

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

to display links as tabs.

Images

We can add images inside cards.

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>

The image is added above the body.

We make it flush with the edges with the .card-img-top class.

Conclusion

We can change the size with built-in classes or CSS.

Also, we can add navigation and images to cards.

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 cards with Bootstrap 5.

Cards

Cards are containers that can hold a variety of content.

It can include headers and footers.

Background colors and other display options can also be changed.

They replace the panels, wells, and thumbnails in Bootstrap 3.

For instance, we can add a card by writing:

<div class="card" style="width: 18rem;">  
  <img src="[http://placekitten.com/200/200](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">Phasellus iaculis sed orci sit amet tempus. In odio ipsum, porttitor vel odio id, pulvinar lacinia risus. Donec a fringilla lectus. Aenean vitae ante erat. Vestibulum pharetra tellus sit amet tortor eleifend rhoncus. Aliquam sagittis sem justo, vitae convallis erat facilisis eget. Nunc id viverra neque, ac bibendum nisl.</p>  
    <a href="#" class="btn btn-primary">Go somewhere</a>  
  </div>  
</div>

We have an image with the img-top class to place the image on top and make it flush with the edges.

Then we have the content within the div with the card-body class.

At the bottom, we have a link that looks like a button.

Content Types

We can place a variety of content on our cards.

Body

The main content is in the card body, which is denoted by the .card-body class.

For example, we can write:

<div class="card">  
  <div class="card-body">  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac ante enim. Donec ullamcorper feugiat dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur eget diam vulputate, commodo lectus non, luctus tortor. Nam rhoncus porta rutrum. Sed non leo at lorem vehicula aliquam id a libero. Aliquam aliquet augue suscipit vulputate vulputate. Aliquam suscipit mauris eu lectus porta fringilla id quis nulla.  
  </div>  
</div>

to add our card with some body text.

Titles, Text, and Links

Card titles can be added by adding an elemnt with the .card-title to a h* tag.

Subtitles can be added by adding the .card-subtitle class to a h* tag.

For example, we can write:

<div class="card">  
  <div class="card-body">  
    <h5 class="card-title">Card title</h5>  
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>  
    <div class="card-text">  
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac ante enim. Donec ullamcorper feugiat dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur eget diam vulputate, commodo lectus non, luctus tortor. Nam rhoncus porta rutrum. Sed non leo at lorem vehicula aliquam id a libero. Aliquam aliquet augue suscipit vulputate vulputate. Aliquam suscipit mauris eu lectus porta fringilla id quis nulla.  
    </div>  
  </div>  
</div>

We add our h5 and h6 tags with those classes to add the title and subtitle.

.card-text has the main text.

Images

Images can be added to cards.

The .card-img-top places the image on the top of the card.

For example, we can write:

<div class="card" style="width: 18rem;">  
  <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">  
  <div class="card-body">  
    <p class="card-text">Phasellus iaculis sed orci sit amet tempus. In odio ipsum, porttitor vel odio id, pulvinar lacinia risus. Donec a fringilla lectus. Aenean vitae ante erat. Vestibulum pharetra tellus sit amet tortor eleifend rhoncus. Aliquam sagittis sem justo, vitae convallis erat facilisis eget. Nunc id viverra neque, ac bibendum nisl.</p>  
  </div>  
</div>

to add an image above the text.

List Groups

List groups can be added to a card.

It’ll be flush to the edges.

For example, we can write:

<div class="card" style="width: 18rem;">  
  <ul class="list-group list-group-flush">  
    <li class="list-group-item">Lorem ipsum dolor sit amet,</li>  
    <li class="list-group-item">Ut ac ante enim</li>  
    <li class="list-group-item">Phasellus ullamcorper tellus vitae magna vulputate egestas.</li>  
  </ul>  
</div>

We have a ul with the .list-group and .list-group-flush classes to add the list group and make it flush to the card’s edges.

Also, we can add a header to it with the .card-header class:

<div class="card" style="width: 18rem;">  
  <div class="card-header">  
    Featured  
  </div>  
  <ul class="list-group list-group-flush">  
    <li class="list-group-item">Lorem ipsum dolor sit amet,</li>  
    <li class="list-group-item">Ut ac ante enim</li>  
    <li class="list-group-item">Phasellus ullamcorper tellus vitae magna vulputate egestas.</li>  
  </ul>  
</div>

The .card-header class will have a gray background color so we can see it easily.

Conclusion

We can add cards to hold content, including list groups, buttons, and images.

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 layouts with Bootstrap 5.

Mixins Utilities

We can remove the background of the header and footer with the .bg-transparent class.

For example, we can write:

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, .</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

We have the .bg-transparent class on the .card-header div and .card-footer div to remove their background color.

Card Layout

Cards can be laid out in a group.

To do that, we can put the cards inside the div with the .card-group class.

For example, we can write:

<div class="card-group">
  <div class="card">
    <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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. 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>

  <div class="card">
    <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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. 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>

  <div class="card">
    <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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. 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>
</div>

We have 3 cards that are inside a container div to put them side by side.

They’re arranged responsively.

Grid Cards

We can also place them in a grid with the .row and .col classes.

For example, we can write:

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card">
      <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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card">
      <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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card">
      <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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
      </div>
    </div>
  </div>
</div>

The container div with the cards have .row and .row-col-1 classes to keep them in the container.

Then we add the .row-cols-md-2 class to show 2 of them side by side if the breakpoint is md or wider.

g-4 has the gutter to add some margins for the card.

We can make them equal height by setting the height with the .h-* classes.

For instance, we can use the .h-100 class on the cards:

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card h-100">
      <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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card h-100">
      <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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card h-100">
      <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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card h-100">
      <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. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
      </div>
    </div>
  </div>
</div>

We add the .h-100 class to the cards to set the height to be the same.

Conclusion

We can remove the backgrounds of headers and footers.

Also, we add layouts to the cards and set the heights.

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.