Get up to 80 % extra points for free! More info:

Lesson 24 - Bootstrap - Flex utilities 2

In the previous lesson, Bootstrap - Flex utilities, we started the description of flex utilities. In today's tutorial of the Bootstrap CSS framework, we're going to continue and finish this topic.

Wrapping

We can also make the flexbox items wrap. In case of a row container it means that when the row is full, all the following items are wrapped to the next rows. In case of a column container, the items are wrapped to the next columns. The available classes follow:

  • .flex-nowrap - The items are never wrapped and if they can't fit to the container, they just overflow. This is the default behavior.
  • .flex-wrap - The items wraps.
  • .flex-wrap-reverse - The items wraps in reverse, the next row is above the previous one, the next column is before the previous one.

The responsive classes are:

  • .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

Let's have a look at the usage on a row container, the usage on a column one would be similar:

<div class="d-flex bg-warning">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
    <div class="bg-success p-2 m-1 text-white">Item 4</div>
    <div class="bg-success p-2 m-1 text-white">Item 5</div>
    <div class="bg-success p-2 m-1 text-white">Item 6</div>
    <div class="bg-success p-2 m-1 text-white">Item 7</div>
    <div class="bg-success p-2 m-1 text-white">Item 8</div>
    <div class="bg-success p-2 m-1 text-white">Item 9</div>
    <div class="bg-success p-2 m-1 text-white">Item 10</div>
    <div class="bg-success p-2 m-1 text-white">Item 11</div>
    <div class="bg-success p-2 m-1 text-white">Item 12</div>
    <div class="bg-success p-2 m-1 text-white">Item 13</div>
</div>
<br />
<div class="d-flex bg-warning flex-wrap">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
    <div class="bg-success p-2 m-1 text-white">Item 4</div>
    <div class="bg-success p-2 m-1 text-white">Item 5</div>
    <div class="bg-success p-2 m-1 text-white">Item 6</div>
    <div class="bg-success p-2 m-1 text-white">Item 7</div>
    <div class="bg-success p-2 m-1 text-white">Item 8</div>
    <div class="bg-success p-2 m-1 text-white">Item 9</div>
    <div class="bg-success p-2 m-1 text-white">Item 10</div>
    <div class="bg-success p-2 m-1 text-white">Item 11</div>
    <div class="bg-success p-2 m-1 text-white">Item 12</div>
    <div class="bg-success p-2 m-1 text-white">Item 13</div>
</div>
<br />
<div class="d-flex bg-warning flex-wrap-reverse">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
    <div class="bg-success p-2 m-1 text-white">Item 4</div>
    <div class="bg-success p-2 m-1 text-white">Item 5</div>
    <div class="bg-success p-2 m-1 text-white">Item 6</div>
    <div class="bg-success p-2 m-1 text-white">Item 7</div>
    <div class="bg-success p-2 m-1 text-white">Item 8</div>
    <div class="bg-success p-2 m-1 text-white">Item 9</div>
    <div class="bg-success p-2 m-1 text-white">Item 10</div>
    <div class="bg-success p-2 m-1 text-white">Item 11</div>
    <div class="bg-success p-2 m-1 text-white">Item 12</div>
    <div class="bg-success p-2 m-1 text-white">Item 13</div>
</div>

The result:

Flex utilities in Bootstrap
flex_align_item­s.html

Order

If we wanted an item in a container to be placed in a position other than the position defined in the HTML code, we can do so by assigning a class. This behavior is very useful for creating responsive layouts based on flexbox because we can simply change the order of the elements based on the size of the viewport, just by assigning a class to these elements.

Bootstrap provides 12 basic classes:

  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12

Next to these, there are also:

  • .order-first - Always the first, regardless of the order of the other elements
  • .order-last - Always the last, regardless of the order of the other elements
  • .order-unordered - Unordered

In this case, we'll be more interested in the responsive classes which change the order of the element when a certain viewport size or larger is reached:

  • .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
<div class="d-flex align-content-start">
    <div class="bg-success p-2 m-1 text-white order-3">Item 1</div>
    <div class="bg-success p-2 m-1 text-white order-1">Item 2</div>
    <div class="bg-success p-2 m-1 text-white order-2">Item 3</div>
</div>

The result in the browser:

Flex utilities in Bootstrap
flex_align_item­s.html

Align content

Yes, we have the fourth alignment here, I promise that's the last one. In this case, it's the alignment of all the rows or columns in a container when its contents wrap. If the container is higher than the space taken by all its rows or wider than the space take by all its columns, a free space is created. We can distribute this space in different ways and, of course, we have several classes available:

  • .align-content-start - The items are placed to the start of the container, the empty space is created at the end. This is the default behavior if no class is assigned.
  • .align-content-end - The items are placed to the end of the container, the empty space is created at the start.
  • .align-content-center - The items are placed to the center of the container, the empty space is created at the start.
  • .align-content-between - The empty space is distributed equally between the rows/columns so that the gaps won't be at the sides of the container.
  • .align-content-around - The empty space is distributed equally between the rows/columns so that the gaps are at the sides of the container as well.
  • .align-content-stretch - The items are stretched so that the whole container is filled and no empty space is created.

The related responsive classes are:

  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch
<p>align-content-start:</p>
<div class="d-flex bg-warning align-content-start flex-wrap" style="height: 150px">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
    <div class="bg-success p-2 m-1 text-white">Item 4</div>
    <div class="bg-success p-2 m-1 text-white">Item 5</div>
    <div class="bg-success p-2 m-1 text-white">Item 6</div>
    <div class="bg-success p-2 m-1 text-white">Item 7</div>
    <div class="bg-success p-2 m-1 text-white">Item 8</div>
    <div class="bg-success p-2 m-1 text-white">Item 9</div>
    <div class="bg-success p-2 m-1 text-white">Item 10</div>
    <div class="bg-success p-2 m-1 text-white">Item 11</div>
    <div class="bg-success p-2 m-1 text-white">Item 12</div>
    <div class="bg-success p-2 m-1 text-white">Item 13</div>
</div>
<p>align-content-end:</p>
<div class="d-flex bg-warning align-content-end flex-wrap" style="height: 150px">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
    <div class="bg-success p-2 m-1 text-white">Item 4</div>
    <div class="bg-success p-2 m-1 text-white">Item 5</div>
    <div class="bg-success p-2 m-1 text-white">Item 6</div>
    <div class="bg-success p-2 m-1 text-white">Item 7</div>
    <div class="bg-success p-2 m-1 text-white">Item 8</div>
    <div class="bg-success p-2 m-1 text-white">Item 9</div>
    <div class="bg-success p-2 m-1 text-white">Item 10</div>
    <div class="bg-success p-2 m-1 text-white">Item 11</div>
    <div class="bg-success p-2 m-1 text-white">Item 12</div>
    <div class="bg-success p-2 m-1 text-white">Item 13</div>
</div>
<p>align-content-center:</p>
<div class="d-flex bg-warning align-content-center flex-wrap" style="height: 150px">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
    <div class="bg-success p-2 m-1 text-white">Item 4</div>
    <div class="bg-success p-2 m-1 text-white">Item 5</div>
    <div class="bg-success p-2 m-1 text-white">Item 6</div>
    <div class="bg-success p-2 m-1 text-white">Item 7</div>
    <div class="bg-success p-2 m-1 text-white">Item 8</div>
    <div class="bg-success p-2 m-1 text-white">Item 9</div>
    <div class="bg-success p-2 m-1 text-white">Item 10</div>
    <div class="bg-success p-2 m-1 text-white">Item 11</div>
    <div class="bg-success p-2 m-1 text-white">Item 12</div>
    <div class="bg-success p-2 m-1 text-white">Item 13</div>
</div>
<p>align-content-between:</p>
<div class="d-flex bg-warning align-content-between flex-wrap" style="height: 150px">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
    <div class="bg-success p-2 m-1 text-white">Item 4</div>
    <div class="bg-success p-2 m-1 text-white">Item 5</div>
    <div class="bg-success p-2 m-1 text-white">Item 6</div>
    <div class="bg-success p-2 m-1 text-white">Item 7</div>
    <div class="bg-success p-2 m-1 text-white">Item 8</div>
    <div class="bg-success p-2 m-1 text-white">Item 9</div>
    <div class="bg-success p-2 m-1 text-white">Item 10</div>
    <div class="bg-success p-2 m-1 text-white">Item 11</div>
    <div class="bg-success p-2 m-1 text-white">Item 12</div>
    <div class="bg-success p-2 m-1 text-white">Item 13</div>
</div>
<p>align-content-around:</p>
<div class="d-flex bg-warning align-content-around flex-wrap" style="height: 150px">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
    <div class="bg-success p-2 m-1 text-white">Item 4</div>
    <div class="bg-success p-2 m-1 text-white">Item 5</div>
    <div class="bg-success p-2 m-1 text-white">Item 6</div>
    <div class="bg-success p-2 m-1 text-white">Item 7</div>
    <div class="bg-success p-2 m-1 text-white">Item 8</div>
    <div class="bg-success p-2 m-1 text-white">Item 9</div>
    <div class="bg-success p-2 m-1 text-white">Item 10</div>
    <div class="bg-success p-2 m-1 text-white">Item 11</div>
    <div class="bg-success p-2 m-1 text-white">Item 12</div>
    <div class="bg-success p-2 m-1 text-white">Item 13</div>
</div>
<p>align-content-stretch:</p>
<div class="d-flex bg-warning align-content-stretch flex-wrap" style="height: 150px">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
    <div class="bg-success p-2 m-1 text-white">Item 4</div>
    <div class="bg-success p-2 m-1 text-white">Item 5</div>
    <div class="bg-success p-2 m-1 text-white">Item 6</div>
    <div class="bg-success p-2 m-1 text-white">Item 7</div>
    <div class="bg-success p-2 m-1 text-white">Item 8</div>
    <div class="bg-success p-2 m-1 text-white">Item 9</div>
    <div class="bg-success p-2 m-1 text-white">Item 10</div>
    <div class="bg-success p-2 m-1 text-white">Item 11</div>
    <div class="bg-success p-2 m-1 text-white">Item 12</div>
    <div class="bg-success p-2 m-1 text-white">Item 13</div>
</div>

The live demo:

Flex utilities in Bootstrap
flex_align_item­s.html

That's all for flexbox. See you in the next lesson, Bootstrap - Multimedia objects and containers, we'll discuss media objects and containers.


 

Previous article
Bootstrap - Flex utilities
All articles in this section
Bootstrap
Skip article
(not recommended)
Bootstrap - Multimedia objects and containers
Article has been written for you by David Capka Hartinger
Avatar
User rating:
No one has rated this quite yet, be the first one!
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn university David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.
Activities