Bootstrap Flex Utilities

Bootstrap has a class for almost every flexbox property. You can make a flexible layout without writing CSS. First add .d-flex to the container, and then use the other classes.

Direction

<div class="d-flex flex-row mb-3 bg-body-tertiary"><div class="p-2 border">1</div><div class="p-2 border">2</div><div class="p-2 border">3</div></div>
<div class="d-flex flex-column bg-body-tertiary"><div class="p-2 border">1</div><div class="p-2 border">2</div><div class="p-2 border">3</div></div>

Justify content (horizontal)

<div class="d-flex justify-content-start mb-2 bg-body-tertiary"><div class="p-2 border">start</div><div class="p-2 border">start</div></div>
<div class="d-flex justify-content-center mb-2 bg-body-tertiary"><div class="p-2 border">center</div><div class="p-2 border">center</div></div>
<div class="d-flex justify-content-end mb-2 bg-body-tertiary"><div class="p-2 border">end</div><div class="p-2 border">end</div></div>
<div class="d-flex justify-content-between mb-2 bg-body-tertiary"><div class="p-2 border">between</div><div class="p-2 border">between</div><div class="p-2 border">between</div></div>
<div class="d-flex justify-content-around bg-body-tertiary"><div class="p-2 border">around</div><div class="p-2 border">around</div></div>

Align items (vertical)

<div class="d-flex align-items-start mb-2 bg-body-tertiary" style="height: 80px"><div class="p-2 border">start</div><div class="p-2 border">start</div></div>
<div class="d-flex align-items-center mb-2 bg-body-tertiary" style="height: 80px"><div class="p-2 border">center</div><div class="p-2 border">center</div></div>
<div class="d-flex align-items-end bg-body-tertiary" style="height: 80px"><div class="p-2 border">end</div><div class="p-2 border">end</div></div>

Wrap, grow and order

<div class="d-flex flex-wrap mb-2" style="max-width: 300px">
  <div class="p-2 border">Wrap 1</div><div class="p-2 border">Wrap 2</div><div class="p-2 border">Wrap 3</div><div class="p-2 border">Wrap 4</div>
</div>
<div class="d-flex mb-2">
  <div class="p-2 border">Fixed</div>
  <div class="p-2 border flex-grow-1">flex-grow-1 (takes the rest)</div>
  <div class="p-2 border">Fixed</div>
</div>
<div class="d-flex">
  <div class="p-2 border order-3">order-3</div>
  <div class="p-2 border order-1">order-1</div>
  <div class="p-2 border order-2">order-2</div>
</div>

Common layouts

A header with the logo on the left and a button on the right, a vertically centered box, and an equal height row of cards are all made with these classes.

<div class="d-flex justify-content-between align-items-center border rounded p-3">
  <span class="fw-bold">Logo</span>
  <button class="btn btn-primary btn-sm">Sign in</button>
</div>

Responsive flex classes

The classes can have a breakpoint: flex-column flex-md-row means a column on a phone and a row from 768px. Also d-md-flex, justify-content-lg-between and so on.

Class	CSS
d-flex	display: flex
flex-row, flex-column	flex-direction
justify-content-*	justify-content
align-items-*, align-self-*	align-items, align-self
flex-wrap, flex-nowrap	flex-wrap
flex-grow-1, flex-shrink-1, flex-fill	flex-grow, flex-shrink, flex 1 1 auto
order-*	order

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.