Bootstrap Flex
1. What is Bootstrap Flex?
Bootstrap Flex uses Flexbox to arrange items in a container. This helps make layouts flexible, responsive, and easy to align.
2. Basic Flex Container
Example:
<!DOCTYPE html>
<html>
<head>
<title>Basic Flex</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”d-flex”>
<div class=”p-2 bg-primary text-white”>Flex Item 1</div>
<div class=”p-2 bg-success text-white”>Flex Item 2</div>
</div>
</body>
</html>
Output:
Explanation:
• d-flex turns the parent div into a flex container.
• The child div elements become flex items arranged horizontally.
3. Vertical Flex Container
Example:
<!DOCTYPE html>
<html>
<head>
<title>Vertical Flex</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”d-flex flex-column”>
<div class=”p-2 bg-warning”>Item 1</div>
<div class=”p-2 bg-info”>Item 2</div>
<div class=”p-2 bg-light”>Item 3</div>
</div>
</body>
</html>
Output:
Explanation:
• flex-column stacks the items vertically.
• Useful when you want a column layout.
4. Flex Direction
Horizontal (Row)
Example:
<!DOCTYPE html>
<html>
<head>
<title>horizontal flex direction</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”d-flex flex-row”>
<div class=”p-2 bg-danger text-white”>Item 1</div>
<div class=”p-2 bg-dark text-white”>Item 2</div>
<div class=”p-2 bg-secondary text-white”>Item 3</div>
</div>
</body>
</html>
Output:
Explanation:
Items go left to right (default direction).
Vertical-Reverse
Example:
<!DOCTYPE html>
<html>
<head>
<title>Vertical reverse</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”d-flex flex-column-reverse”>
<div class=”p-2 bg-primary”>Item 1</div>
<div class=”p-2 bg-success”>Item 2</div>
<div class=”p-2 bg-warning”>Item 3</div>
</div>
</body>
</html>
Output:
Explanation:
Items are stacked vertically but in reverse order (bottom to top).
5. Flex Wrap
With Wrap
<!DOCTYPE html>
<html>
<head>
<title>Flex wrap</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”d-flex flex-wrap”>
<div class=”p-2 bg-info m-1″>Item 1</div>
<div class=”p-2 bg-info m-1″>Item 2</div>
<div class=”p-2 bg-info m-1″>Item 3</div>
<div class=”p-2 bg-info m-1″>Item 4</div>
<div class=”p-2 bg-info m-1″>Item 5</div>
</div>
</body>
</html>
Output:
Explanation:
flex-wrap allows items to move to the next line if there’s no space.
No Wrap
<!DOCTYPE html>
<html>
<head>
<title>Flex wrap</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<d<div class=”d-flex flex-nowrap”>
<div class=”p-2 bg-danger m-1″>Item 1</div>
<div class=”p-2 bg-danger m-1″>Item 2</div>
<div class=”p-2 bg-danger m-1″>Item 3</div>
<div class=”p-2 bg-danger m-1″>Item 4</div>
</div>
</div>
</body>
</html>
Output:
Explanation:
flex-nowrap forces all items in one line, even if they overflow.
6. Justify Content (Horizontal Alignment)
Center Items
<!DOCTYPE html>
<html>
<head>
<title>Flex wrap</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”d-flex justify-content-center”>
<div class=”p-2 bg-success text-white”>Centered Item</div>
</div>
</div>
</body>
</html>
Output:
Explanation:
justify-content-center centers items horizontally inside the flex container.
Space Between Items
Example:
<!DOCTYPE html>
<html>
<head>
<title>Flex wrap</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”d-flex justify-content-between”>
<div class=”p-2 bg-primary”>Item 1</div>
<div class=”p-2 bg-primary”>Item 2</div>
<div class=”p-2 bg-primary”>Item 3</div>
</div>
</body>
</html>
Output:
Explanation:
justify-content-between puts space between the items.
7. Align Items (Vertical Alignment)
Center Vertically
Example:
<!DOCTYPE html>
<html>
<head>
<title>Flex wrap</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”d-flex align-items-center” style=”height: 100px;”>
<div class=”p-2 bg-warning”>Vertically Centered</div>
</div>
</body>
</html>
Output:
Explanation:
align-items-center centers items vertically inside the container.
Top Aligned
Example:
<html>
<head>
<title>Flex wrap</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”d-flex align-items-start” style=”height: 100px;”>
<div class=”p-2 bg-info”>Top Aligned</div>
</div>
</body>
</html>
Output:
Explanation:
align-items-start aligns items to the top.
8. Align Self (Individual Item Alignment)
Example:
<!DOCTYPE html>
<html>
<head>
<title>Flex wrap</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”d-flex align-items-center” style=”height: 100px;”>
<div class=”p-2 bg-secondary”>Regular Item</div>
<div class=”p-2 bg-danger align-self-end text-white”>Aligned to Bottom</div>
</div>
</body>
</html>
Output:
Explanation:
align-items-start aligns items to the top.
<!DOCTYPE html>
<html>
<head>
<title>Flex wrap</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”d-flex align-items-center” style=”height: 100px;”>
<div class=”p-2 bg-secondary”>Regular Item</div>
<div class=”p-2 bg-danger align-self-end text-white”>Aligned to Bottom</div>
</div>
</body>
</html>
Explanation:
align-self-end aligns that specific item to the bottom, ignoring the container alignment.
Conclusion
Bootstrap Flex utilities use Flexbox features in a simple way using classes. You can:
• Control direction (flex-row, flex-column)
• Allow or prevent wrapping (flex-wrap, flex-nowrap)
• Align items horizontally (justify-content-*)
• Align items vertically (align-items-*)
• Align individual items (align-self-*)
It’s very useful for building responsive layouts without writing custom CSS.
Practice Scenario :1
1: Navigation Menu with Space Between
Objective: Create a horizontal navbar with logo on left and links on right
Expected Output:
Practice Scenario 2:
Card Layout with Vertical Content
Objective: Create a vertical card with title, text, and button
Expected Output:
Practice Scenario 3:
Flex Items with Wrapping
Objective: Make 6 boxes that wrap on small screens
Expected Output:
YouTube Reference :
Bootstrap Flex is a utility that leverages CSS Flexbox to create responsive and flexible layouts for web designs.
Yes, this Bootstrap training is completely free. You can access all tutorials and learn Bootstrap at your own pace without any charges.
You can access free Bootstrap Flex tutorials, including step-by-step video lessons, on Iqra Technology’s website.
Yes, we offer Bootstrap Flex tutorial in Hindi to help Hindi-speaking students understand the concepts easily. Whether you’re a beginner or intermediate, this course is tailored to your needs.
Examples include:
- Aligning items horizontally or vertically.
- Responsive layouts using Flex utilities.
- Wrapping and aligning flex items.
Bootstrap Flex utilities such as .d-flex, .justify-content-center, and .align-items-center help create responsive layouts for various screen sizes.
Common utilities include:
.flex-rowand.flex-columnfor direction..justify-content-*for horizontal alignment..align-items-*for vertical alignment.
Yes, you can use custom CSS to modify Bootstrap Flex utilities for unique designs
Add Bootstrap’s CSS and JavaScript files to your project, then apply Flex utilities to your HTML structure to design responsive layouts.
