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 2.3 — Display, Flex, and Alignment

Lesson overview
Bootstrap’s display and flex utilities let you control layout behavior without writing CSS. You can switch between block/flex, align items, justify content, and reorder elements responsively.

Learning outcomes

Use d-* utilities to control layout
Build flexible rows with d-flex and gap-*
Align and reorder items across breakpoints

Display utilities

d-none, d-block, d-flex
Responsive: d-none d-md-block (hide on mobile, show on md+)

Flex essentials

d-flex, flex-column, flex-row, responsive variants
Alignment: align-items-center, justify-content-between
Spacing: gap-2, gap-3

Example: responsive header row

<div class=“container py-3“>

<div class=“d-flex flex-column flex-md-row align-items-md-center gap-2“>

<h1 class=“h4 mb-0“>Dashboard</h1>

<div class=“ms-md-auto d-flex gap-2“>

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

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

</div>

</div>

</div>

Ordering

<div class=“row“>

<div class=“col-12 col-md-8 order-2 order-md-1“>Main</div>

<div class=“col-12 col-md-4 order-1 order-md-2“>Sidebar</div>

</div>

Practice tasks

Create a toolbar that stacks on mobile but becomes a single row on tablets.
Reorder sidebar above content on mobile.

Quick check

What does justify-content-between do?
How do you hide an element only on small screens?

Lesson summary

Display and flex utilities give you CSS-like control directly in your markup.

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