Bootstrap 4 Flex, How To Learn Bootstrap 4 Flex Tutorial

Bootstrap 4 Tutorial

Bootstrap 4 Flex

Bootstrap 4 flex quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

Enable flex behaviors

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

<div class="d-flex p-2 bg-info">Flexbox container!</div>

<div class="d-inline-flex p-2 bg-info">Inline flexbox container!</div>

Responsive variations also exist for .d-flex and .d-inline-flex.

.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex

Flex Directions

Set the direction of flex items in a flex container with direction utilities. Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-warning">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-warning">Flex item 3</div>
</div>
<br />
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-warning">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-warning">Flex item 3</div>
</div>

Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side.

<div class="d-flex flex-column bg-secondary">
  <div class="p-2 bg-warning">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-warning">Flex item 3</div>
</div>
<br />
<div class="d-flex flex-column-reverse bg-secondary">
  <div class="p-2 bg-warning">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-warning">Flex item 3</div>
</div>

Responsive variations also exist for .flex-direction.

.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse

Justify content

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if .flex-direction : column). Choose from start (browser default), end, center, between, or around.

<div class="d-flex justify-content-start bg-secondary">
	<div class="p-2 bg-warning">Flex item 1</div>
	<div class="p-2 bg-warning">Flex item 2</div>
	<div class="p-2 bg-warning">Flex item 3</div>
</div>
<br />
<div class="d-flex justify-content-end bg-secondary">
	<div class="p-2 bg-warning">Flex item 1</div>
	<div class="p-2 bg-warning">Flex item 2</div>
	<div class="p-2 bg-warning">Flex item 3</div>
</div>
<br />
<div class="d-flex justify-content-center bg-secondary">
	<div class="p-2 bg-warning">Flex item 1</div>
	<div class="p-2 bg-warning">Flex item 2</div>
	<div class="p-2 bg-warning">Flex item 3</div>
</div>
<br />
<div class="d-flex justify-content-between bg-secondary">
	<div class="p-2 bg-warning">Flex item 1</div>
	<div class="p-2 bg-warning">Flex item 2</div>
	<div class="p-2 bg-warning">Flex item 3</div>
</div>
<br />
<div class="d-flex justify-content-around bg-secondary">
	<div class="p-2 bg-warning">Flex item 1</div>
	<div class="p-2 bg-warning">Flex item 2</div>
	<div class="p-2 bg-warning">Flex item 3</div>
</div>

Responsive variations also exist for .justify-content.

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around

Align Flex items

Yse .align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if .flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

<style type="text/css">
.box{
	height:80px;
}
</style>
<div class="d-flex align-items-start box bg-secondary">
	<div class="p-2 bg-warning">Flex item 1</div>
	<div class="p-2 bg-warning">Flex item 2</div>
	<div class="p-2 bg-warning">Flex item 3</div>
</div>
<br />
<div class="d-flex align-items-end box bg-secondary">
	<div class="p-2 bg-warning">Flex item 1</div>
	<div class="p-2 bg-warning">Flex item 2</div>
	<div class="p-2 bg-warning">Flex item 3</div>
</div>
<br />
<div class="d-flex align-items-center box bg-secondary">
	<div class="p-2 bg-warning">Flex item 1</div>
	<div class="p-2 bg-warning">Flex item 2</div>
	<div class="p-2 bg-warning">Flex item 3</div>
</div>
<br />
<div class="d-flex align-items-baseline box bg-secondary">
	<div class="p-2 bg-warning">Flex item 1</div>
	<div class="p-2 bg-warning">Flex item 2</div>
	<div class="p-2 bg-warning">Flex item 3</div>
</div>
<br />
<div class="d-flex align-items-stretch box bg-secondary">
	<div class="p-2 bg-warning">Flex item 1</div>
	<div class="p-2 bg-warning">Flex item 2</div>
	<div class="p-2 bg-warning">Flex item 3</div>
</div>

Output :

Responsive variations also exist for .align-items.

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch

Auto margins

The below three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (.mr-auto), and pushing two items to the left (.ml-auto).

<div class="d-flex bg-secondary">
  <div class="p-2 bg-warning">Flex item</div>
  <div class="p-2 bg-warning">Flex item</div>
  <div class="p-2 bg-warning">Flex item</div>
</div>
<br />
<div class="d-flex bg-secondary">
  <div class="mr-auto p-2 bg-warning">Flex item</div>
  <div class="p-2 bg-warning">Flex item</div>
  <div class="p-2 bg-warning">Flex item</div>
</div>
<br />
<div class="d-flex bg-secondary">
  <div class="p-2 bg-warning">Flex item</div>
  <div class="p-2 bg-warning">Flex item</div>
  <div class="ml-auto p-2 bg-warning">Flex item</div>
</div>

Flex Wrap

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .flex-nowrap, wrapping with .flex-wrap, or reverse wrapping with .flex-wrap-reverse.

<style type="text/css">
	.box{ border:1px solid #000;}
</style>

<div class="d-flex flex-nowrap">
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
</div>
<br />
<div class="d-flex flex-wrap">
    <div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
</div>
<br />
<div class="d-flex flex-wrap-reverse">
    <div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
	<div class="p-2 box bg-warning">Flex item</div>
</div>

Responsive variations also exist for .flex-wrap.

.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse

Flex Order

Change the visual order of specific flex items with a handful of order utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order.

<style type="text/css">
	.box{ border:1px solid #000;}
</style>

<div class="d-flex flex-nowrap bg-secondary">
  <div class="order-3 p-2 box bg-warning">First flex item</div>
  <div class="order-2 p-2 box bg-warning">Second flex item</div>
  <div class="order-1 p-2 box bg-warning">Third flex item</div>
</div>

Responsive variations also exist for order.

.order-1
.order-2
.order-3
.order-4
.order-5
.order-6
.order-7
.order-8
.order-9
.order-10
.order-11
.order-12
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-sm-6
.order-sm-7
.order-sm-8
.order-sm-9
.order-sm-10
.order-sm-11
.order-sm-12
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-md-6
.order-md-7
.order-md-8
.order-md-9
.order-md-10
.order-md-11
.order-md-12
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-6
.order-lg-7
.order-lg-8
.order-lg-9
.order-lg-10
.order-lg-11
.order-lg-12
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xl-6
.order-xl-7
.order-xl-8
.order-xl-9
.order-xl-10
.order-xl-11
.order-xl-12

Bootstrap 4 Tutorial

S/W RELATED LINKS

Practice Templates
Practice(PHP) Projects
Quiz (OR) MCQ
Interview Questions
- Computer Science
- Civil Engineering

COMPETITIVE EXAMS