Bullet list
Bootstrap 5 Bullet list component
Responsive Bullet list built with the latest Bootstrap 5. Bullet lists are responsive components for displaying a series of content. Many examples and tutorials.
Basic example
Here's a basic example of bullet list.
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
Split
Split bullet list into multiple column using column classes.
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
<div class="row">
<div class="col col-md-4">
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
<div class="col col-md-4">
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
<div class="col col-md-4">
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
Secondary bullets
Here's an example of list with secondary bullets.
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
<ul>
<li>Lorem ipsum</li>
<ul>
<li>Lorem ipsum</li>
</ul>
<li>Lorem ipsum</li>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
<li>Lorem ipsum</li>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</ul>
Square bullets
Add list-style-type: square; to change the bullets shape to square.
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
ul {
list-style-type: square;
}
Without bullets
Add .list-unstyled to hide bullets.
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
<ul class="list-unstyled">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
Color of bullets
Here's an example of list with red bullets. You'll find more information about colors in Bootstrap here.
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
ul {
list-style: none;
}
ul li::before {
content: "•";
color: red;
font-weight: bold;
display: inline-block;
width: 15px;
}
Icons
Here's an example of bullet list with icons.
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
<ul class="list-unstyled">
<li><i class="fas fa-laptop-code"></i></i>Lorem ipsum</li>
<li><i class="fas fa-arrow-circle-down"></i>Lorem ipsum</li>
<li><i class="fas fa-book-open"></i>Lorem ipsum</li>
<li><i class="fas fa-cloud"></i>Lorem ipsum</li>
</ul>
i {
display: inline-block;
width: 30px;
}