Home >>Bootstrap Tutorial >Bootstrap Flex

Bootstrap Flex

Bootstrap Flex is used to quickly manages the layouts, sizing of Grid columns, alignment. Add class .d-flex in flexbox container. It is easy to apply in your web pages. By using flex you don’t need to use utilities [margin (left, right, top, bottom), padding margin (left, right, top, bottom)].

Let's take Basic example of class flex:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>Flex</h2>
  <div class="d-flex p-3 bg-info text-white">  
    <div class="p-2 bg-danger">Flexbox 1</div>
    <div class="p-2 bg-success">Flexbox 2</div>
    <div class="p-2 bg-warning">Flexbox 3</div>
  </div>
</div>
</body>
</html>

Output:

Flex

Flexbox 1

Flexbox 2

Flexbox 3

Inline flexbox container

Inline flexbox is used to align the inline flexbox container. You have to add class .d-inline-flex.

Let's take an example of inline flexbox container:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>Inline Flex container</h2>
  <div class="d-inline-flex p-3 bg-info text-white">  
    <div class="p-2 bg-danger">Flexbox 1</div>
    <div class="p-2 bg-success">Flexbox 2</div>
    <div class="p-2 bg-warning">Flexbox 3</div>
  </div>
</div>
</body>
</html>

Output:

Inline Flex container

Flexbox 1

Flexbox 2

Flexbox 3

Direction

Bootstrap flex provide predefined classes to align the layout in horizontally and vertically.

Horizontal Direction

For horizontal alignment of layouts, you can use class .flex-row together with the class .d-flex. And, if you want to align layout in right horizontal direction, add class .flex-row-reverse.

Let's take an example of Horizontal direction:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>Flex-Row</h2>
  <div class="d-flex flex-row p-3 bg-info text-white">  
    <div class="p-2 bg-danger">flex-row</div>
    <div class="p-2 bg-success">flex-row</div>
    <div class="p-2 bg-warning">flex-row</div>
  </div>
</div>
<div class="container">
  <h2>flex-row-reverse</h2>
  <div class="d-flex flex-row-reverse p-3 bg-info text-white">  
    <div class="p-2 bg-danger">flex-row-reverse</div>
    <div class="p-2 bg-success">flex-row-reverse</div>
    <div class="p-2 bg-warning">flex-row-reverse</div>
  </div>
</div>
</body>
</html>

Output:

Flex-Row

flex-row

flex-row-reverse

Vertical Direction

If you want to align layout vertical then, use class .flex-column and for reverse the vertical direction add class .flex-column-reverse.

Let's take an example of Vertical direction:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>Flex-column</h2>
  <div class="d-flex flex-column p-3 bg-info text-white">  
    <div class="p-2 bg-danger">flex-column</div>
    <div class="p-2 bg-success">flex-column</div>
    <div class="p-2 bg-warning">flex-column</div>
  </div>
</div>
<div class="container">
  <h2>flex-column-reverse</h2>
  <div class="d-flex flex-column-reverse p-3 bg-info text-white">  
    <div class="p-2 bg-danger">flex-column-reverse</div>
    <div class="p-2 bg-success">flex-column-reverse</div>
    <div class="p-2 bg-warning">flex-column-reverse</div>
  </div>
</div>
</body>
</html>

Output:

Flex-column

flex-column

flex-column-reverse

Order

Bootstrap order are used for ordering of the layouts means by adding the class. Order-* (*- valid numbers are 0-12) you can change the layout display look to your web page. The lowest number has the highest priority.

Let's take an example of class order:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>Order</h2>
  <div class="d-flex p-3 bg-info text-white">  
    <div class="p-2 bg-danger order-3">flexbox-1</div>
    <div class="p-2 bg-success order-1">flexbox-2</div>
    <div class="p-2 bg-warning order-2">flexbox-3</div>
  </div>
</div>
</body>
</html>

Output:

Order

flexbox-1

flexbox-2

flexbox-3

Justify Content

Add class .justify-content-* (*- start, end, center, between and around) to change the alignment of layouts.

Let's take an example of justify content:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>justify content end</h2>
  <div class="d-flex justify-content-end p-3 bg-info text-white">  
    <div class="p-2 bg-danger order-3">flexbox-1</div>
    <div class="p-2 bg-success order-1">flexbox-2</div>
    <div class="p-2 bg-warning order-2">flexbox-3</div>
  </div>
</div>
</body>
</html>

Output:

justify content end

flexbox-1

flexbox-2

flexbox-3

Grow/ shrink

If necessary you can also use classes .flex-grow-1(it takes up all the available space) and .flex-shrink-1(it make shrink).

Let's take an example of Grow/ shrink:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>flex Grow</h2>
  <div class="d-flex p-3 bg-info text-white">  
    <div class="p-2 bg-danger">flexbox-1</div>
    <div class="p-2 bg-success flex-grow-1 ">flexbox-2</div>
    <div class="p-2 bg-warning ">flexbox-3</div>
  </div>
</div>
</body>
</html>

Output:

flex Grow

flexbox-1

flexbox-2

flexbox-3

Align Items

By using class .align-items -*, you can easily control the vertical alignment of layouts. *- valid classes are- align-items-start, align-items-baseline, .align-items-end, .align-items-center, and .align-items-stretch (default).

Let's take an example of align items:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>Align items</h2>
<div class="container">
  <p>Align items End</p>
  <div class="d-flex align-items-end p-3 bg-info text-white" style="height:120px;">  
    <div class="p-2 bg-danger">flexbox-1</div>
    <div class="p-2 bg-success ">flexbox-2</div>
    <div class="p-2 bg-warning ">flexbox-3</div>
  </div>
</div>
</body>
</html>

Output:

Align items

Align items End

flexbox-1

flexbox-2

flexbox-3

Align Self

Use the classes .align-self-* (align-self-start, align- self -baseline, .align- self -end, .align- self -center, and .align- self -stretch (default)) for the vertical alignment of the individual rows of layouts.

Let's take an example of align-self:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
<h2>Align Self</h2>
  <p>Align self End</p>
  <div class="d-flex p-3 bg-info text-white" style="height:120px;">  
    <div class="p-2 bg-danger">flexbox-1</div>
    <div class="p-2 align-self-end  bg-success ">flexbox-2</div>
    <div class="p-2 bg-warning ">flexbox-3</div>
  </div>
</div>
</body>
</html>

Output:

Align Self

Align self End

flexbox-1

flexbox-2

flexbox-3

Flex-wrap

You can add the classes of flex-wrap property together with the class d-flex to control the flex items are wrapped into a single row or multiple row in a flex container. The flex wrap valid classes are-flex-wrap, .flex- nowrap, .flex-wrap-reverse.

Let's take an example of flex wrap:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Flex</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>Flex Wrap</h2>
  <div class="d-flex flex-wrap flex-wrap p-3 bg-info text-white" >  
    <div class="p-2 bg-danger border">flexbox-1</div>
    <div class="p-2 bg-success border ">flexbox-2</div>
    <div class="p-2 bg-warning border">flexbox-3</div>
	 <div class="p-2 bg-danger border">flexbox-4</div>
    <div class="p-2 bg-success border">flexbox-5</div>
    <div class="p-2 bg-warning border">flexbox-6</div>
	 <div class="p-2 bg-danger border">flexbox-7</div>
    <div class="p-2 bg-success border">flexbox-8</div>
    <div class="p-2 bg-warning border">flexbox-9</div>
	 <div class="p-2 bg-danger border">flexbox-10</div>
    <div class="p-2 bg-success border">flexbox-11</div>
    <div class="p-2 bg-warning border">flexbox-12</div>
	 <div class="p-2 bg-danger border">flexbox-13</div>
    <div class="p-2 bg-success border">flexbox-14</div>
    <div class="p-2 bg-warning border">flexbox-15</div>
  </div>
</div>
</body>
</html>

Output:

Flex Wrap

flexbox-1

flexbox-2

flexbox-3

flexbox-4

flexbox-5

flexbox-6

flexbox-7

flexbox-8

flexbox-9

flexbox-10

flexbox-11

flexbox-12

flexbox-13

flexbox-14

flexbox-15

« Previous Next »

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads