Bootstrap List Styles - Component Snippets
Bootstrap's standard list styles are too boring? Easily style your lists with the most comprehensive and up-to-date list of bootstrap list styles. With List Styles, you can: - View and compare different styles - Quickly copy the code of any list.
Order List
<div class="list-style">
<div class="list-style-one">
<ul>
<li><span>1</span> Lorem ipsum dolor sit amet</li>
<li><span>2</span> Lorem ipsum dolor sit amet dolor sit</li>
<li><span>3</span> Lorem ipsum dolor</li>
<li><span>4</span> Lorem ipsum dolor sit</li>
</ul>
</div>
</div>
<!-- list-style-one -->.list-style .list-style-one ul li {
font-size: 16px;
line-height: 24px;
margin-top: 13px;
color: var(--black);
}
.list-style .list-style-one ul li span {
font-size: 16px;
font-weight: 600;
color: var(--black);
line-height: 25px;
margin-right: 13px;
}Check List
<div class="list-style">
<div class="list-style-two">
<ul>
<li>
<i class="lni lni-check-box"></i> Lorem ipsum dolor sit amet
</li>
<li>
<i class="lni lni-check-box"></i> Lorem ipsum dolor sit amet
dolor sit
</li>
<li><i class="lni lni-check-box"></i> Lorem ipsum dolor</li>
<li>
<i class="lni lni-check-box"></i> Lorem ipsum dolor sit
</li>
</ul>
</div>
</div>
<!-- list-style-two -->.list-style .list-style-two ul li {
font-size: 16px;
line-height: 24px;
margin-top: 13px;
color: var(--black);
}
.list-style .list-style-two ul li i {
font-size: 16px;
font-weight: 600;
color: var(--primary);
line-height: 25px;
margin-right: 7px;
}Info List
<div class="list-style">
<div class="list-style-three">
<ul>
<li>
<i class="lni lni-information"></i> Lorem ipsum dolor sit
amet
</li>
<li>
<i class="lni lni-information"></i> Lorem ipsum dolor sit
amet dolor sit
</li>
<li><i class="lni lni-information"></i> Lorem ipsum dolor</li>
<li>
<i class="lni lni-information"></i> Lorem ipsum dolor sit
</li>
</ul>
</div>
</div>
<!-- list-style-three -->.list-style .list-style-three ul li {
font-size: 16px;
line-height: 24px;
margin-top: 13px;
color: var(--black);
}
.list-style .list-style-three ul li i {
font-size: 16px;
font-weight: 600;
color: var(--info);
line-height: 25px;
margin-right: 6px;
}Warning List
<div class="list-style">
<div class="list-style-four">
<ul>
<li>
<i class="lni lni-warning"></i> Lorem ipsum dolor sit amet
</li>
<li>
<i class="lni lni-warning"></i> Lorem ipsum dolor sit amet
dolor sit
</li>
<li><i class="lni lni-warning"></i> Lorem ipsum dolor</li>
<li><i class="lni lni-warning"></i> Lorem ipsum dolor sit</li>
</ul>
</div>
</div>
<!-- list-style-four -->.list-style .list-style-four ul li {
font-size: 16px;
line-height: 24px;
margin-top: 13px;
color: var(--black);
}
.list-style .list-style-four ul li i {
font-size: 16px;
font-weight: 600;
color: var(--caution);
line-height: 25px;
margin-right: 6px;
}Success List
<div class="list-style">
<div class="list-style-five">
<ul>
<li>
<i class="lni lni-checkmark-circle"></i> Lorem ipsum dolor
sit amet
</li>
<li>
<i class="lni lni-checkmark-circle"></i> Lorem ipsum dolor
sit amet dolor sit
</li>
<li>
<i class="lni lni-checkmark-circle"></i> Lorem ipsum dolor
</li>
<li>
<i class="lni lni-checkmark-circle"></i> Lorem ipsum dolor
sit
</li>
</ul>
</div>
</div>
<!-- list-style-four -->.list-style .list-style-five ul li {
font-size: 16px;
line-height: 24px;
margin-top: 13px;
color: var(--black);
}
.list-style .list-style-five ul li i {
font-size: 16px;
font-weight: 600;
color: var(--success);
line-height: 25px;
margin-right: 7px;
}Error List
<div class="list-style">
<div class="list-style-six">
<ul>
<li>
<i class="lni lni-cross-circle"></i> Lorem ipsum dolor sit
amet
</li>
<li>
<i class="lni lni-cross-circle"></i> Lorem ipsum dolor sit
amet dolor sit
</li>
<li>
<i class="lni lni-cross-circle"></i> Lorem ipsum dolor
</li>
<li>
<i class="lni lni-cross-circle"></i> Lorem ipsum dolor sit
</li>
</ul>
</div>
</div>
<!-- list-style-six-->.list-style .list-style-six ul li {
font-size: 16px;
line-height: 24px;
margin-top: 13px;
color: var(--black);
}
.list-style .list-style-six ul li i {
font-size: 16px;
font-weight: 600;
color: var(--error);
line-height: 25px;
margin-right: 7px;
}Arrow List 1
<div class="list-style">
<div class="list-style-seven">
<ul>
<li>
<i class="lni lni-arrow-right-circle"></i> Lorem ipsum dolor
sit amet
</li>
<li>
<i class="lni lni-arrow-right-circle"></i> Lorem ipsum dolor
sit amet dolor sit
</li>
<li>
<i class="lni lni-arrow-right-circle"></i> Lorem ipsum dolor
</li>
<li>
<i class="lni lni-arrow-right-circle"></i> Lorem ipsum dolor
sit
</li>
</ul>
</div>
</div>
<!-- list-style-seven-->.list-style .list-style-seven ul li {
font-size: 16px;
line-height: 24px;
margin-top: 13px;
color: var(--black);
}
.list-style .list-style-seven ul li i {
font-size: 16px;
font-weight: 600;
color: var(--success);
line-height: 25px;
margin-right: 7px;
}Arrow List 2
<div class="list-style">
<div class="list-style-eight">
<ul>
<li>
<i class="lni lni-angle-double-right"></i> Lorem ipsum dolor
sit amet
</li>
<li>
<i class="lni lni-angle-double-right"></i> Lorem ipsum dolor
sit amet dolor sit
</li>
<li>
<i class="lni lni-angle-double-right"></i> Lorem ipsum dolor
</li>
<li>
<i class="lni lni-angle-double-right"></i> Lorem ipsum dolor
sit
</li>
</ul>
</div>
</div>
<!-- list-style-eight-->.list-style .list-style-eight ul li {
font-size: 16px;
line-height: 24px;
margin-top: 13px;
color: var(--black);
}
.list-style .list-style-eight ul li i {
font-size: 16px;
font-weight: 600;
color: var(--info);
line-height: 25px;
margin-right: 7px;
}Arrow List 3
<div class="list-style">
<div class="list-style-nine">
<ul>
<li>
<i class="lni lni-arrow-right"></i> Lorem ipsum dolor sit
amet
</li>
<li>
<i class="lni lni-arrow-right"></i> Lorem ipsum dolor sit
amet dolor sit
</li>
<li><i class="lni lni-arrow-right"></i> Lorem ipsum dolor</li>
<li>
<i class="lni lni-arrow-right"></i> Lorem ipsum dolor sit
</li>
</ul>
</div>
</div>
<!-- list-style-nine-->.list-style .list-style-nine ul li {
font-size: 16px;
line-height: 24px;
margin-top: 13px;
color: var(--black);
}
.list-style .list-style-nine ul li i {
font-size: 16px;
font-weight: 600;
color: var(--primary);
line-height: 25px;
margin-right: 7px;
}Social List
<div class="list-style">
<div class="list-style-ten">
<ul>
<li>
<i class="lni lni-facebook-original"></i> Lorem ipsum dolor
sit amet
</li>
<li>
<i class="lni lni-facebook-messenger"></i> Lorem ipsum dolor
sit amet dolor sit
</li>
<li>
<i class="lni lni-twitter-original"></i> Lorem ipsum dolor
</li>
<li>
<i class="lni lni-instagram-original"></i> Lorem ipsum dolor
sit
</li>
</ul>
</div>
</div>
<!-- list-style-ten-->.list-style .list-style-ten ul li {
font-size: 16px;
line-height: 24px;
margin-top: 13px;
color: var(--black);
}
.list-style .list-style-ten ul li i {
font-size: 16px;
font-weight: 600;
color: var(--primary);
line-height: 25px;
margin-right: 6px;
}Styled List
<div class="list-style">
<div class="list-style-eleven">
<ul>
<li>
<i class="lni lni-star"></i> Lorem ipsum dolor sit amet
</li>
<li>
<i class="lni lni-star"></i> Lorem ipsum dolor sit amet
dolor sit
</li>
<li><i class="lni lni-star"></i> Lorem ipsum dolor</li>
<li><i class="lni lni-star"></i> Lorem ipsum dolor sit</li>
</ul>
</div>
</div>
<!-- list-style-eleven-->.list-style .list-style-eleven ul li {
font-size: 16px;
line-height: 24px;
margin-top: 13px;
color: var(--black);
}
.list-style .list-style-eleven ul li i {
font-size: 16px;
font-weight: 600;
color: var(--primary);
line-height: 25px;
margin-right: 6px;
}Unordered List
<div class="list-style">
<div class="list-style-twelve">
<ul>
<li><span></span> Lorem ipsum dolor sit amet</li>
<li><span></span> Lorem ipsum dolor sit amet dolor sit</li>
<li><span></span> Lorem ipsum dolor</li>
<li><span></span> Lorem ipsum dolor sit</li>
</ul>
</div>
</div>
<!-- list-style-twelve-->.list-style .list-style-twelve ul li {
font-size: 16px;
line-height: 24px;
margin-top: 13px;
color: var(--black);
}
.list-style .list-style-twelve ul li span {
width: 12px;
height: 12px;
display: inline-block;
border-radius: 50%;
background-color: var(--black);
margin-right: 6px;
}