Lesson 6 – Bootstrap Flex

Bootstrap offers yet another but a better method to manage the sizing, alignment, and layout of the grid columns. In addition, different flex utilities or classes enable you to properly manage components and website navigation as well.

First of all, you have to enable flex behavior by including d-flex display property as shown in the following example.

    <div class="d-flex">This is a flex container</div>

Now, you can use different flex utilities to perform different types of tasks such as setting the direction of flex items, aligning items, justifying content, and individually changing the alignment of each item using the align-self property.

In the following example, we set the direction of flex items as row which will horizontally position them in their parent element.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Flex</title>
</head>
<body>
    <div class="d-flex flex-row">
        <div class="p-3 bg-secondary text-light">First Flex item</div>
        <div class="p-3 bg-primary">Second Flex item</div>
        <div class="p-3 bg-success">Third Flex item</div>
    </div>    
    
    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    http://bootstrap.min.js
</body>
</html>

The output of the above code will be as under.

Now, we will position the same elements vertically using the flex-columns class.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Flex</title>
</head>
<body>
    <div class="d-flex flex-column">
        <div class="p-3 bg-secondary text-light">First Flex item</div>
        <div class="p-3 bg-primary">Second Flex item</div>
        <div class="p-3 bg-success">Third Flex item</div>
    </div>    
    
    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    http://bootstrap.min.js
</body>
</html>

The output of the above code is as below.

We can also justify content to the center, left or right with the help of bootstrap flex. Take a look at the example below.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Layout</title>
</head>
<body>
        <div class="d-flex justify-content-start">First flex item</div>
        <div class="d-flex justify-content-end">Second flex item</div>
        <div class="d-flex justify-content-center">Third flex item</div>
        <div class="d-flex justify-content-between">Fourth flex item</div>
        <div class="d-flex justify-content-around">Fifth flex item</div>  
    
    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
    http://bootstrap.min.js
</body>
</html>

Here is the output.

In the next lesson, we will discuss Bootstrap Helper classes.