Flex box Bootstrap

Flexbox is a powerful layout module in CSS that makes it easier to design flexible and responsive layouts. Bootstrap 4 integrates Flexbox into its grid system to enhance layout control. Here’s a rundown of how Flexbox is used in Bootstrap 4 with examples:

Basics of Flexbox in Bootstrap 4

Flex Containers and Items

Flex Container: A parent element with the class .d-flex that applies Flexbox properties.
Flex Items: Child elements of the flex container.

Example 1: Basic Flexbox Container

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Flexbox Example</title>
    <style>
        .box {
            background-color: #ddd;
            border: 1px solid #ccc;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="d-flex">
            <div class="box mr-2">Item 1</div>
            <div class="box mr-2">Item 2</div>
            <div class="box">Item 3</div>
        </div>
    </div>
</body>
</html>

In this example, .d-flex makes the container a flex container, aligning its child elements horizontally.

Example 2: Flex Direction

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Flex Direction</title>
    <style>
        .box {
            background-color: #ddd;
            border: 1px solid #ccc;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="d-flex flex-column">
            <div class="box mb-2">Item 1</div>
            <div class="box mb-2">Item 2</div>
            <div class="box">Item 3</div>
        </div>
    </div>
</body>
</html>

Here, .flex-column changes the direction of the flex items from row (default) to column.

Example 3: Justify Content and Align Items

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Justify Content and Align Items</title>
    <style>
        .box {
            background-color: #ddd;
            border: 1px solid #ccc;
            padding: 20px;
        }
        .container {
            height: 300px; /* Just for demonstration */
        }
    </style>
</head>
<body>
    <div class="container d-flex justify-content-between align-items-center">
        <div class="box">Item 1</div>
        <div class="box">Item 2</div>
        <div class="box">Item 3</div>
    </div>
</body>
</html>

justify-content-between: Distributes items with space between them.
align-items-center: Centers items vertically in the container.

Example 4: Flex Wrapping

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Flex Wrapping</title>
    <style>
        .box {
            background-color: #ddd;
            border: 1px solid #ccc;
            padding: 20px;
            flex: 1 1 150px; /* Adjust size as needed */
        }
    </style>
</head>
<body>
    <div class="container d-flex flex-wrap">
        <div class="box">Item 1</div>
        <div class="box">Item 2</div>
        <div class="box">Item 3</div>
        <div class="box">Item 4</div>
        <div class="box">Item 5</div>
    </div>
</body>
</html>

flex-wrap: Allows flex items to wrap onto multiple lines if needed.

These examples should give you a good start on using Flexbox with Bootstrap 4. If you have any specific layout challenges or need further details, feel free to ask!

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us