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">](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">](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">](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">](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!

Written by Shaikh Abdul Shahid

A Full-Stack Developer with experience in PHP, Laravel, JavaScript, and React.
Founder of Online Learner, sharing practical knowledge and programming tutorials.
Building and maintaining real-world web applications since 2017.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Sizing

Next: Dropdowns

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.