Can I use "Buttons and icons - Bootstrap 5.1.3" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Buttons and icons - Bootstrap 5.1.3 — Free Buttons Snippet (Bootstrap 5)

Loading…

Buttons and icons - Bootstrap 5.1.3 — Free Buttons Snippet (Bootstrap 5) | GoSnippets

Source Code

1<!DOCTYPE html>
2<html lang="pt-br" dir="ltr">
3<head>
4  <meta charset="utf-8">
5  <title></title>
6  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
8  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
9  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
10</head>
11<body>
12  <!-- created by @BrCodeSnippets -->
13  <div class="container-full mt-3">
14    <div class="row g-5 mx-0">
15      <div class="col-12">
16        <button type="button" class="btn btn-info text-start w-100 my-1 shadow"><i class="bi bi-search text-white me-3"></i> text for button info </button>
17        <button type="button" class="btn btn-lg btn-success text-start w-100 my-1"><i class="bi bi-arrow-repeat text-white me-3"></i> text for button info </button>
18        <button type="button" class="btn btn-danger text-start w-100 my-1"><i class="bi bi-at text-white me-3"></i> text for button info </button>
19        <button type="button" class="btn btn-warning text-start w-100 my-1"><i class="bi bi-balloon text-white me-3"></i> text for button info </button>
20        <button type="button" class="btn btn-secondary text-start w-100 my-1"><i class="bi bi-bar-chart-line-fill text-white me-3"></i> text for button info </button>
21        <button type="button" class="btn btn-dark text-start w-100 my-1"><i class="bi bi-battery-half text-white me-3"></i> text for button info </button>
22      </div>
23    </div>
24  </div>
25</body>
26</html>
27

Buttons and icons - Bootstrap 5.1.3

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Buttons snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection

Buttons and icons - Bootstrap 5.1.3

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Buttons snippets

Working in Tailwind? Explore our Tailwind gallery

Trending Bootstrap snippets

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection