About Us
Courses
Getting started

Home

See what fits your budget

Become an Instructor

Blog

Contact

Community

Testimonials

Instructors

Events

FAQs

From the blog

The Future of Navigation: Beyond the Top Nav + Hero Pattern

Why standard layouts are losing effectiveness The classic top nav + hero works for simple marketing pages, but it struggles […]

Read More

Building a Content-Driven Site That Scales: Headless CMS, MDX, or Static?

Your decision is mostly about workflow All three approaches can be fast and SEO-friendly. The real question is: who publishes content, […]

Read More
Blog

Sign up

Log In

Home
Courses
Blog
Getting started

Home

See what fits your budget

Blog

Contact

Community

Testimonials

Instructors

Events

FAQs

From the blog

The Future of Navigation: Beyond the Top Nav + Hero Pattern

Why standard layouts are losing effectiveness The classic top nav + hero works for simple marketing pages, but it struggles […]

Read More

Building a Content-Driven Site That Scales: Headless CMS, MDX, or Static?

Your decision is mostly about workflow All three approaches can be fast and SEO-friendly. The real question is: who publishes content, […]

Read More

Lesson 3.1 — Buttons, Button Groups (and icon usage tips)

Lesson overview
Buttons are one of Bootstrap’s most used components. You can apply variants, sizes, states, and group buttons for toolbars. For icons, Bootstrap doesn’t require a built-in icon set; you can add one (like Bootstrap Icons) if desired.

Learning outcomes

Use .btn variants and sizes
Create button groups and toolbars
Understand button states (active/disabled/loading patterns)

Button variants

.btn-primary, .btn-secondary, .btn-outline-primary, etc.

Example: buttons

<button class=“btn btn-primary“>Primary</button>

<button class=“btn btn-outline-secondary“>Secondary</button>

<button class=“btn btn-link“>Link</button>

Sizes and states

<button class=“btn btn-primary btn-sm“>Small</button>

<button class=“btn btn-primary btn-lg“>Large</button>

<button class=“btn btn-primary“ disabled>Disabled</button>

Button groups

<div class=“btn-group“ role=“group“ aria-label=“View switcher“>

<button class=“btn btn-outline-primary active“>List</button>

<button class=“btn btn-outline-primary“>Grid</button>

<button class=“btn btn-outline-primary“>Compact</button>

</div>

Practice tasks

Create a toolbar with a button group plus a separate “Create” button aligned right.
Build outline buttons that switch to solid style on hover (default behavior).

Quick check

What class makes a button outlined?
Why use role="group" on button groups?

Lesson summary

Buttons and groups help standardize actions and control layouts quickly.

Leave a Reply Cancel reply

Explore courses

About us

Blog posts

Subscribe

Get the latest course releases and learning insights delivered straight to your inbox each week.

By subscribing you agree to our Privacy Policy and consent to receive updates from SkillNet.

© 2026 SkillNet. All rights reserved.

Privacy Policy Terms of Service Cookies Settings