0
0
Bootsrapmarkup~5 mins

Flex utilities in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Flex utilities help you arrange items easily in a row or column. They make your layout flexible and neat without writing extra CSS.

You want to place buttons side by side with equal spacing.
You need to center content horizontally and vertically inside a box.
You want a navigation menu that adjusts on different screen sizes.
You want to stack items vertically on small screens and horizontally on larger screens.
Syntax
Bootsrap
d-flex
flex-row
flex-column
justify-content-start
justify-content-center
justify-content-end
align-items-start
align-items-center
align-items-end
flex-wrap
flex-nowrap

Use d-flex to make an element a flex container.

Combine with flex-row or flex-column to set direction.

Examples
This arranges buttons in a row and centers them horizontally.
Bootsrap
<div class="d-flex flex-row justify-content-center">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
This stacks items vertically and aligns them to the left.
Bootsrap
<div class="d-flex flex-column align-items-start">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
</div>
This puts boxes in a row and allows them to wrap to the next line if needed.
Bootsrap
<div class="d-flex flex-row flex-wrap">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
</div>
Sample Program

This example shows four blue boxes arranged in a row, centered horizontally and vertically, and wrapping to the next line if the screen is narrow. The boxes grow equally and have some spacing.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Flex Utilities Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    .box {
      background-color: #0d6efd;
      color: white;
      padding: 1rem;
      margin: 0.5rem;
      border-radius: 0.25rem;
      text-align: center;
      flex: 1 1 100px;
    }
  </style>
</head>
<body>
  <main class="container mt-4">
    <h1>Flex Utilities Demo</h1>
    <section class="d-flex flex-row justify-content-center align-items-center flex-wrap">
      <div class="box">Box 1</div>
      <div class="box">Box 2</div>
      <div class="box">Box 3</div>
      <div class="box">Box 4</div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use flex-wrap to allow items to move to the next line if they don't fit.

Combine justify-content-* and align-items-* to control horizontal and vertical alignment.

Remember to include Bootstrap CSS for these utilities to work.

Summary

Flex utilities help arrange items easily in rows or columns.

Use d-flex to start a flex container and add direction and alignment classes.

They make your layout responsive and neat without extra CSS.