Can I use "Bootstrap blog snippets" 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.

Bootstrap blog snippets — Free Utilities Snippet (Bootstrap 5)

Loading…

Bootstrap blog snippets — Free Utilities Snippet (Bootstrap 5) | GoSnippets

Source Code

1<section class="pt-5 pb-5">
2    <div class="container">
3          <div class="row">
4            <div class="col-lg-7 mb-4">
5              <img class="img-fluid rounded mb-3" src="https://via.placeholder.com/730x400/5fa9f8/60a7f3" alt="A guide to building your online presence"><a href="#" class="mt-4 h2 text-dark">How to Inspire and Motivate Your Team...</a>
6<p class="mt-4">Cras in fringilla egestas condimentum morbi ut urna nec nunc.Cras in fringilla egestas condimentum morbi ut urna nec nunc.Cras in fringilla egestas condimentum morbi ut urna nec nunc.Cras in fringilla egestas condimentum morbi ut urna nec nunc.</p>
7
8<div class="d-flex text-small">
9                    <a href="#">Business</a>
10                    <span class="text-muted ms-1">29th November</span>
11                  </div>
12
13            </div>
14            <div class="col-lg-5 ">
15              <ul class="list-unstyled">
16              <li class="row mb-4">
17                <a href="#" class="col-3">
18                  <img src="https://via.placeholder.com/300x300/5fa9f8/ffffff" alt="Image" class="rounded img-fluid">
19                </a>
20                <div class="col-9">
21                  <a href="#">
22                    <h6 class="mb-3 h5 text-dark">Cras in fringilla egestas condimentum morbi ut urna.</h6>
23                  </a>
24                  <div class="d-flex text-small">
25                    <a href="#">Business</a>
26                    <span class="text-muted ms-1">29th November</span>
27                  </div>
28                </div>
29              </li>
30              <li class="row mb-4">
31                <a href="#" class="col-3">
32                  <img src="https://via.placeholder.com/300x300/5fa9f8/ffffff" alt="Image" class="rounded img-fluid">
33                </a>
34                <div class="col-9">
35                  <a href="#">
36                    <h6 class="mb-3 h5 text-dark">How to Inspire and Motivate Your Team...</h6>
37                  </a>
38                  <div class="d-flex text-small">
39                    <a href="#">Design</a>
40                    <span class="text-muted ms-1">27th November</span>
41                  </div>
42                </div>
43              </li>
44              <li class="row mb-4">
45                <a href="#" class="col-3">
46                  <img src="https://via.placeholder.com/300x300/5fa9f8/ffffff" alt="Image" class="rounded img-fluid">
47                </a>
48                <div class="col-9">
49                  <a href="#">
50                    <h6 class="mb-3 text-dark h5">Securing your Series A</h6>
51                  </a>
52                  <div class="d-flex text-small">
53                    <a href="#">Business</a>
54                    <span class="text-muted ms-1">23rd November</span>
55                  </div>
56                </div>
57              </li>
58<li class="row mb-4">
59                <a href="#" class="col-3">
60                  <img src="https://via.placeholder.com/300x300/5fa9f8/ffffff" alt="Image" class="rounded img-fluid">
61                </a>
62                <div class="col-9">
63                  <a href="#">
64                    <h6 class="mb-3 h5 text-dark">Cras in fringilla egestas condimentum morbi ut urna.</h6>
65                  </a>
66                  <div class="d-flex text-small">
67                    <a href="#">Business</a>
68                    <span class="text-muted ms-1">29th November</span>
69                  </div>
70                </div>
71              </li><li class="row mb-4">
72                <a href="#" class="col-3">
73                  <img src="https://via.placeholder.com/300x300/5fa9f8/ffffff" alt="Image" class="rounded img-fluid">
74                </a>
75                <div class="col-9">
76                  <a href="#">
77                    <h6 class="mb-3 h5 text-dark">Cras in fringilla egestas condimentum morbi ut urna.</h6>
78                  </a>
79                  <div class="d-flex text-small">
80                    <a href="#">Business</a>
81                    <span class="text-muted ms-1">29th November</span>
82                  </div>
83                </div>
84              </li>
85            </ul>
86            </div>
87          </div>
88        </div>
89      </section>

Bootstrap blog snippets

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Utilities 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

Bootstrap blog snippets

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Utilities 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