Bootstrap 4 Flex

---

Bootstrap 4 Flex

Use flex classes to control the layout of Bootstrap 4 components.

---

Flexbox

The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats, to handle the layout.

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. If you are new to flex, you can read about it in our CSS Flexbox Tutorial.

To create a flexbox container and to transform direct children into flex items, use the d-flex class:

To create an inline flexbox container, use the d-inline-flex class:

---

Horizontal Direction

Use .flex-row to display the flex items
horizontally (side by side). This is default.

Tip: Use .flex-row-reverse
to right-align the horizontal direction:

---

Vertical Direction

Use .flex-column to display the flex items vertically (on top of each other), or .flex-column-reverse
to reverse the vertical direction:

---

---

Justify Content

Use the .justify-content-* classes to change the alignment of flex items. Valid classes are start (default), end, center, between or around:

---

Fill / Equal Widths

Use .flex-fill on flex items to force them into equal widths:

---

Grow

Use .flex-grow-1 on a flex item to take up the rest of the space. In the example below, the first two flex items take up their necessary space, while the last item takes up the rest of the available space:

Tip: Use .flex-shrink-1 on a flex item to make it shrink if necessary.

---

Order

Change the visual order of a specific flex item(s) with the .order classes. Valid classes are from 0 to 12, where the lowest number has highest priority (order-1 is shown before order-2, etc..):

---

Auto Margins

Easily add auto margins to flex items with .mr-auto (push items to the right), or by using .ml-auto (push items to the left):

---

Wrap

Control how flex items wrap in a flex container with .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse.

Click on the buttons below to see the difference between the three classes,
by changin the wrapping of the flex items in the example box:

// Add active class to the current button (highlight it)
var header = document.getElementById("wrapDiv");
var btns = header.getElementsByClassName("wrapbtn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("wrapbtnactive");
current[0].className = current[0].className.replace(" wrapbtnactive", "");
this.className += " wrapbtnactive";
});
}

function wrapFunc() {
document.getElementById("myFlexDIV").className = "d-flex flex-wrap bg-light";
}
function wrapRevFunc() {
document.getElementById("myFlexDIV").className = "d-flex flex-wrap-reverse bg-light";
}

function nowrapFunc() {
document.getElementById("myFlexDIV").className = "d-flex flex-nowrap bg-light";
}

---

Align Content

Control the vertical alignment of gathered flex items with the .align-content-*
classes. Valid classes are .align-content-start (default), .align-content-end, .align-content-center, .align-content-between, .align-content-around and .align-content-stretch.

Note: These classes have no effect on single rows of flex items.

Click on the buttons below to see the difference between the five classes,
by changing the vertical alignment of the flex items in the example box:

// Add active class to the current button (highlight it)
var header = document.getElementById("alignDiv");
var btns = header.getElementsByClassName("alignbtn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("alignactive");
current[0].className = current[0].className.replace(" alignactive", "");
this.className += " alignactive";
});
}

function alignStartFunc() {
document.getElementById("myAlignDIV").className = "d-flex align-content-start bg-light flex-wrap mb-2 mt-2";
}
function alignEndFunc() {
document.getElementById("myAlignDIV").className = "d-flex align-content-end bg-light flex-wrap mb-2 mt-2";
}

function alignCenterFunc() {
document.getElementById("myAlignDIV").className = "d-flex align-content-center bg-light flex-wrap mb-2 mt-2";
}
function alignAroundFunc() {
document.getElementById("myAlignDIV").className = "d-flex align-content-around bg-light flex-wrap mb-2 mt-2";
}
function alignStretchFunc() {
document.getElementById("myAlignDIV").className = "d-flex align-content-stretch bg-light flex-wrap mb-2 mt-2";
}

---

Align Items

Control the vertical alignment of single rows of flex items with the .align-items-*
classes. Valid classes are .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch
(default).

Click on the buttons below to see the difference between the five classes:

// Add active class to the current button (highlight it)
var header = document.getElementById("alignitDiv");
var btns = header.getElementsByClassName("alignitbtn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("alignitactive");
current[0].className = current[0].className.replace(" alignitactive", "");
this.className += " alignitactive";
});
}

function alignitStartFunc() {
document.getElementById("myAlignitDIV").className = "d-flex align-items-start bg-light mb-2 mt-2";
}
function alignitEndFunc() {
document.getElementById("myAlignitDIV").className = "d-flex align-items-end bg-light mb-2 mt-2";
}

function alignitCenterFunc() {
document.getElementById("myAlignitDIV").className = "d-flex align-items-center bg-light mb-2 mt-2";
}
function alignitBaseFunc() {
document.getElementById("myAlignitDIV").className = "d-flex align-items-baseline bg-light mb-2 mt-2";
}
function alignitStretchFunc() {
document.getElementById("myAlignitDIV").className = "d-flex align-items-stretch bg-light mb-2 mt-2";
}

---

Align Self

Control the vertical alignment of a specified flex item with the .align-self-*
classes. Valid classes are .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, and .align-self-stretch
(default).

Click on the buttons below to see the difference between the five classes:

// Add active class to the current button (highlight it)
var header = document.getElementById("alignselfDiv");
var btns = header.getElementsByClassName("alignselfbtn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("alignselfactive");
current[0].className = current[0].className.replace(" alignselfactive", "");
this.className += " alignselfactive";
});
}

function alignselfStartFunc() {
document.getElementById("myAlignselfDIV").className = "align-self-start p-2 border";
}
function alignselfEndFunc() {
document.getElementById("myAlignselfDIV").className = "align-self-end p-2 border";
}

function alignselfCenterFunc() {
document.getElementById("myAlignselfDIV").className = "align-self-center p-2 border";
}
function alignselfBaseFunc() {
document.getElementById("myAlignselfDIV").className = "align-self-baseline p-2 border";
}
function alignselfStretchFunc() {
document.getElementById("myAlignselfDIV").className = "align-self-stretch p-2 border";
}

---

function myFilterFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myFilterInput");
filter = input.value.toUpperCase();
table = document.getElementById("myFilterTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

Responsive Flex Classes

All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.

The * symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.