src/scss/bootstrap-4.0.0-alpha.6/docs/utilities/flexbox.md

   1 ---
   2 layout: docs
   3 title: Flexbox
   4 group: utilities
   5 ---
   6
   7 Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
   8
   9 ## Contents
  10
  11 * Will be replaced with the ToC, excluding the "Contents" header
  12 {:toc}
  13
  14 ## Enable flex behaviors
  15
  16 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.
  17
  18 {% example html %}
  19 <div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
  20 {% endexample %}
  21
  22 {% example html %}
  23 <div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
  24 {% endexample %}
  25
  26 Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
  27
  28 {% for bp in site.data.breakpoints %}
  29 - `.d{{ bp.abbr }}-flex`
  30 - `.d{{ bp.abbr }}-inline-flex`{% endfor %}
  31
  32 ## Direction
  33
  34 Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).
  35
  36 Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-row-reverse` to start the horizontal direction from the opposite side.
  37
  38 {% example html %}
  39 <div class="d-flex flex-row bd-highlight mb-3">
  40   <div class="p-2 bd-highlight">Flex item 1</div>
  41   <div class="p-2 bd-highlight">Flex item 2</div>
  42   <div class="p-2 bd-highlight">Flex item 3</div>
  43 </div>
  44 <div class="d-flex flex-row-reverse bd-highlight">
  45   <div class="p-2 bd-highlight">Flex item 1</div>
  46   <div class="p-2 bd-highlight">Flex item 2</div>
  47   <div class="p-2 bd-highlight">Flex item 3</div>
  48 </div>
  49 {% endexample %}
  50
  51 Use `.flex-column` to set a vertical direction, or `.flex-column-reverse`  to start the vertical direction from the opposite side.
  52
  53 {% example html %}
  54 <div class="d-flex flex-column bd-highlight mb-3">
  55   <div class="p-2 bd-highlight">Flex item 1</div>
  56   <div class="p-2 bd-highlight">Flex item 2</div>
  57   <div class="p-2 bd-highlight">Flex item 3</div>
  58 </div>
  59 <div class="d-flex flex-column-reverse bd-highlight">
  60   <div class="p-2 bd-highlight">Flex item 1</div>
  61   <div class="p-2 bd-highlight">Flex item 2</div>
  62   <div class="p-2 bd-highlight">Flex item 3</div>
  63 </div>
  64 {% endexample %}
  65
  66 Responsive variations also exist for `flex-direction`.
  67
  68 {% for bp in site.data.breakpoints %}
  69 - `.flex{{ bp.abbr }}-row`
  70 - `.flex{{ bp.abbr }}-row-reverse`
  71 - `.flex{{ bp.abbr }}-column`
  72 - `.flex{{ bp.abbr }}-column-reverse`{% endfor %}
  73
  74 ## Justify content
  75
  76 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`.
  77
  78 <div class="bd-example">
  79   <div class="d-flex justify-content-start bd-highlight mb-3">
  80     <div class="p-2 bd-highlight">Flex item</div>
  81     <div class="p-2 bd-highlight">Flex item</div>
  82     <div class="p-2 bd-highlight">Flex item</div>
  83   </div>
  84   <div class="d-flex justify-content-end bd-highlight mb-3">
  85     <div class="p-2 bd-highlight">Flex item</div>
  86     <div class="p-2 bd-highlight">Flex item</div>
  87     <div class="p-2 bd-highlight">Flex item</div>
  88   </div>
  89   <div class="d-flex justify-content-center bd-highlight mb-3">
  90     <div class="p-2 bd-highlight">Flex item</div>
  91     <div class="p-2 bd-highlight">Flex item</div>
  92     <div class="p-2 bd-highlight">Flex item</div>
  93   </div>
  94   <div class="d-flex justify-content-between bd-highlight mb-3">
  95     <div class="p-2 bd-highlight">Flex item</div>
  96     <div class="p-2 bd-highlight">Flex item</div>
  97     <div class="p-2 bd-highlight">Flex item</div>
  98   </div>
  99   <div class="d-flex justify-content-around bd-highlight">
 100     <div class="p-2 bd-highlight">Flex item</div>
 101     <div class="p-2 bd-highlight">Flex item</div>
 102     <div class="p-2 bd-highlight">Flex item</div>
 103   </div>
 104 </div>
 105
 106 {% highlight html %}
 107 <div class="d-flex justify-content-start">...</div>
 108 <div class="d-flex justify-content-end">...</div>
 109 <div class="d-flex justify-content-center">...</div>
 110 <div class="d-flex justify-content-between">...</div>
 111 <div class="d-flex justify-content-around">...</div>
 112 {% endhighlight %}
 113
 114 Responsive variations also exist for `justify-content`.
 115
 116 {% for bp in site.data.breakpoints %}
 117 - `.justify-content{{ bp.abbr }}-start`
 118 - `.justify-content{{ bp.abbr }}-end`
 119 - `.justify-content{{ bp.abbr }}-center`
 120 - `.justify-content{{ bp.abbr }}-between`
 121 - `.justify-content{{ bp.abbr }}-around`{% endfor %}
 122
 123 ## Align items
 124
 125 Use `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).
 126
 127 <div class="bd-example">
 128   <div class="d-flex align-items-start bd-highlight mb-3" style="height: 100px">
 129     <div class="p-2 bd-highlight">Flex item</div>
 130     <div class="p-2 bd-highlight">Flex item</div>
 131     <div class="p-2 bd-highlight">Flex item</div>
 132   </div>
 133   <div class="d-flex align-items-end bd-highlight mb-3" style="height: 100px">
 134     <div class="p-2 bd-highlight">Flex item</div>
 135     <div class="p-2 bd-highlight">Flex item</div>
 136     <div class="p-2 bd-highlight">Flex item</div>
 137   </div>
 138   <div class="d-flex align-items-center bd-highlight mb-3" style="height: 100px">
 139     <div class="p-2 bd-highlight">Flex item</div>
 140     <div class="p-2 bd-highlight">Flex item</div>
 141     <div class="p-2 bd-highlight">Flex item</div>
 142   </div>
 143   <div class="d-flex align-items-baseline bd-highlight mb-3" style="height: 100px">
 144     <div class="p-2 bd-highlight">Flex item</div>
 145     <div class="p-2 bd-highlight">Flex item</div>
 146     <div class="p-2 bd-highlight">Flex item</div>
 147   </div>
 148   <div class="d-flex align-items-stretch bd-highlight" style="height: 100px">
 149     <div class="p-2 bd-highlight">Flex item</div>
 150     <div class="p-2 bd-highlight">Flex item</div>
 151     <div class="p-2 bd-highlight">Flex item</div>
 152   </div>
 153 </div>
 154
 155 {% highlight html %}
 156 <div class="d-flex align-items-start">...</div>
 157 <div class="d-flex align-items-end">...</div>
 158 <div class="d-flex align-items-center">...</div>
 159 <div class="d-flex align-items-baseline">...</div>
 160 <div class="d-flex align-items-stretch">...</div>
 161 {% endhighlight %}
 162
 163 Responsive variations also exist for `align-items`.
 164
 165 {% for bp in site.data.breakpoints %}
 166 - `.align-items{{ bp.abbr }}-start`
 167 - `.align-items{{ bp.abbr }}-end`
 168 - `.align-items{{ bp.abbr }}-center`
 169 - `.align-items{{ bp.abbr }}-baseline`
 170 - `.align-items{{ bp.abbr }}-stretch`{% endfor %}
 171
 172 ## Align self
 173
 174 Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
 175
 176 <div class="bd-example">
 177   <div class="d-flex bd-highlight mb-3" style="height: 100px">
 178     <div class="p-2 bd-highlight">Flex item</div>
 179     <div class="align-self-start p-2 bd-highlight">Aligned flex item</div>
 180     <div class="p-2 bd-highlight">Flex item</div>
 181   </div>
 182   <div class="d-flex bd-highlight mb-3" style="height: 100px">
 183     <div class="p-2 bd-highlight">Flex item</div>
 184     <div class="align-self-end p-2 bd-highlight">Aligned flex item</div>
 185     <div class="p-2 bd-highlight">Flex item</div>
 186   </div>
 187   <div class="d-flex bd-highlight mb-3" style="height: 100px">
 188     <div class="p-2 bd-highlight">Flex item</div>
 189     <div class="align-self-center p-2 bd-highlight">Aligned flex item</div>
 190     <div class="p-2 bd-highlight">Flex item</div>
 191   </div>
 192   <div class="d-flex bd-highlight mb-3" style="height: 100px">
 193     <div class="p-2 bd-highlight">Flex item</div>
 194     <div class="align-self-baseline p-2 bd-highlight">Aligned flex item</div>
 195     <div class="p-2 bd-highlight">Flex item</div>
 196   </div>
 197   <div class="d-flex bd-highlight" style="height: 100px">
 198     <div class="p-2 bd-highlight">Flex item</div>
 199     <div class="align-self-stretch p-2 bd-highlight">Aligned flex item</div>
 200     <div class="p-2 bd-highlight">Flex item</div>
 201   </div>
 202 </div>
 203
 204 {% highlight html %}
 205 <div class="align-self-start">Aligned flex item</div>
 206 <div class="align-self-end">Aligned flex item</div>
 207 <div class="align-self-center">Aligned flex item</div>
 208 <div class="align-self-baseline">Aligned flex item</div>
 209 <div class="align-self-stretch">Aligned flex item</div>
 210 {% endhighlight %}
 211
 212 Responsive variations also exist for `align-self`.
 213
 214 {% for bp in site.data.breakpoints %}
 215 - `.align-self{{ bp.abbr }}-start`
 216 - `.align-self{{ bp.abbr }}-end`
 217 - `.align-self{{ bp.abbr }}-center`
 218 - `.align-self{{ bp.abbr }}-baseline`
 219 - `.align-self{{ bp.abbr }}-stretch`{% endfor %}
 220
 221 ## Auto margins
 222
 223 Flexbox can do some pretty awesome things when you mix flex alignments with auto margins.
 224
 225 ### With justify-content
 226
 227 Easily move all flex items to one side, but keep another on the opposite end by mixing `justify-content` with `margin-right: auto` or `margin-left: auto`.
 228
 229 {% example html %}
 230 <div class="d-flex justify-content-end bd-highlight mb-3">
 231   <div class="mr-auto p-2 bd-highlight">Flex item</div>
 232   <div class="p-2 bd-highlight">Flex item</div>
 233   <div class="p-2 bd-highlight">Flex item</div>
 234 </div>
 235
 236 <div class="d-flex justify-content-start bd-highlight">
 237   <div class="p-2 bd-highlight">Flex item</div>
 238   <div class="p-2 bd-highlight">Flex item</div>
 239   <div class="ml-auto p-2 bd-highlight">Flex item</div>
 240 </div>
 241 {% endexample %}
 242
 243 ### With align-items
 244
 245 Similarly, move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`.
 246
 247 {% example html %}
 248 <div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
 249   <div class="mb-auto p-2 bd-highlight">Flex item</div>
 250   <div class="p-2 bd-highlight">Flex item</div>
 251   <div class="p-2 bd-highlight">Flex item</div>
 252 </div>
 253
 254 <div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
 255   <div class="p-2 bd-highlight">Flex item</div>
 256   <div class="p-2 bd-highlight">Flex item</div>
 257   <div class="mt-auto p-2 bd-highlight">Flex item</div>
 258 </div>
 259 {% endexample %}
 260
 261 ## Wrap
 262
 263 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`.
 264
 265 <div class="bd-example">
 266   <div class="d-flex flex-nowrap bd-highlight">
 267     <div class="p-2 bd-highlight">Flex item</div>
 268     <div class="p-2 bd-highlight">Flex item</div>
 269     <div class="p-2 bd-highlight">Flex item</div>
 270     <div class="p-2 bd-highlight">Flex item</div>
 271     <div class="p-2 bd-highlight">Flex item</div>
 272     <div class="p-2 bd-highlight">Flex item</div>
 273     <div class="p-2 bd-highlight">Flex item</div>
 274     <div class="p-2 bd-highlight">Flex item</div>
 275     <div class="p-2 bd-highlight">Flex item</div>
 276     <div class="p-2 bd-highlight">Flex item</div>
 277     <div class="p-2 bd-highlight">Flex item</div>
 278     <div class="p-2 bd-highlight">Flex item</div>
 279     <div class="p-2 bd-highlight">Flex item</div>
 280     <div class="p-2 bd-highlight">Flex item</div>
 281     <div class="p-2 bd-highlight">Flex item</div>
 282   </div>
 283 </div>
 284 {% highlight html %}
 285 <div class="d-flex flex-nowrap">
 286   ...
 287 </div>
 288 {% endhighlight %}
 289
 290 <div class="bd-example">
 291   <div class="d-flex flex-wrap bd-highlight">
 292     <div class="p-2 bd-highlight">Flex item</div>
 293     <div class="p-2 bd-highlight">Flex item</div>
 294     <div class="p-2 bd-highlight">Flex item</div>
 295     <div class="p-2 bd-highlight">Flex item</div>
 296     <div class="p-2 bd-highlight">Flex item</div>
 297     <div class="p-2 bd-highlight">Flex item</div>
 298     <div class="p-2 bd-highlight">Flex item</div>
 299     <div class="p-2 bd-highlight">Flex item</div>
 300     <div class="p-2 bd-highlight">Flex item</div>
 301     <div class="p-2 bd-highlight">Flex item</div>
 302     <div class="p-2 bd-highlight">Flex item</div>
 303     <div class="p-2 bd-highlight">Flex item</div>
 304     <div class="p-2 bd-highlight">Flex item</div>
 305     <div class="p-2 bd-highlight">Flex item</div>
 306     <div class="p-2 bd-highlight">Flex item</div>
 307   </div>
 308 </div>
 309 {% highlight html %}
 310 <div class="d-flex flex-wrap">
 311   ...
 312 </div>
 313 {% endhighlight %}
 314
 315 <div class="bd-example">
 316   <div class="d-flex flex-wrap-reverse bd-highlight">
 317     <div class="p-2 bd-highlight">Flex item</div>
 318     <div class="p-2 bd-highlight">Flex item</div>
 319     <div class="p-2 bd-highlight">Flex item</div>
 320     <div class="p-2 bd-highlight">Flex item</div>
 321     <div class="p-2 bd-highlight">Flex item</div>
 322     <div class="p-2 bd-highlight">Flex item</div>
 323     <div class="p-2 bd-highlight">Flex item</div>
 324     <div class="p-2 bd-highlight">Flex item</div>
 325     <div class="p-2 bd-highlight">Flex item</div>
 326     <div class="p-2 bd-highlight">Flex item</div>
 327     <div class="p-2 bd-highlight">Flex item</div>
 328     <div class="p-2 bd-highlight">Flex item</div>
 329     <div class="p-2 bd-highlight">Flex item</div>
 330     <div class="p-2 bd-highlight">Flex item</div>
 331     <div class="p-2 bd-highlight">Flex item</div>
 332   </div>
 333 </div>
 334 {% highlight html %}
 335 <div class="d-flex flex-wrap-reverse">
 336   ...
 337 </div>
 338 {% endhighlight %}
 339
 340
 341 {% example html %}
 342 {% endexample %}
 343
 344 Responsive variations also exist for `flex-wrap`.
 345
 346 {% for bp in site.data.breakpoints %}
 347 - `.flex{{ bp.abbr }}-nowrap`
 348 - `.flex{{ bp.abbr }}-wrap`
 349 - `.flex{{ bp.abbr }}-wrap-reverse`{% endfor %}
 350
 351 ## Order
 352
 353 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. As `order` takes any integer value (e.g., `5`), add custom CSS for any additional values needed.
 354
 355 {% example html %}
 356 <div class="d-flex flex-nowrap bd-highlight">
 357   <div class="flex-last p-2 bd-highlight">First flex item</div>
 358   <div class="p-2 bd-highlight">Second flex item</div>
 359   <div class="flex-first p-2 bd-highlight">Third flex item</div>
 360 </div>
 361 {% endexample %}
 362
 363 Responsive variations also exist for `order`.
 364
 365 {% for bp in site.data.breakpoints %}
 366 - `.order{{ bp.abbr }}-first`
 367 - `.order{{ bp.abbr }}-last`
 368 - `.order{{ bp.abbr }}-unordered`{% endfor %}
 369
 370 ## Align content
 371
 372 Use `align-content` utilities on flexbox containers to align flex items *together* on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items.
 373
 374 **Heads up!** This property has no affect on single rows of flex items.
 375
 376 <div class="bd-example">
 377   <div class="d-flex align-content-start flex-wrap bd-highlight mb-3" style="height: 200px">
 378     <div class="p-2 bd-highlight">Flex item</div>
 379     <div class="p-2 bd-highlight">Flex item</div>
 380     <div class="p-2 bd-highlight">Flex item</div>
 381     <div class="p-2 bd-highlight">Flex item</div>
 382     <div class="p-2 bd-highlight">Flex item</div>
 383     <div class="p-2 bd-highlight">Flex item</div>
 384     <div class="p-2 bd-highlight">Flex item</div>
 385     <div class="p-2 bd-highlight">Flex item</div>
 386     <div class="p-2 bd-highlight">Flex item</div>
 387     <div class="p-2 bd-highlight">Flex item</div>
 388     <div class="p-2 bd-highlight">Flex item</div>
 389     <div class="p-2 bd-highlight">Flex item</div>
 390     <div class="p-2 bd-highlight">Flex item</div>
 391     <div class="p-2 bd-highlight">Flex item</div>
 392     <div class="p-2 bd-highlight">Flex item</div>
 393   </div>
 394 </div>
 395 {% highlight html %}
 396 <div class="d-flex align-content-start flex-wrap">
 397   ...
 398 </div>
 399 {% endhighlight %}
 400
 401 <div class="bd-example">
 402   <div class="d-flex align-content-end flex-wrap bd-highlight mb-3" style="height: 200px">
 403     <div class="p-2 bd-highlight">Flex item</div>
 404     <div class="p-2 bd-highlight">Flex item</div>
 405     <div class="p-2 bd-highlight">Flex item</div>
 406     <div class="p-2 bd-highlight">Flex item</div>
 407     <div class="p-2 bd-highlight">Flex item</div>
 408     <div class="p-2 bd-highlight">Flex item</div>
 409     <div class="p-2 bd-highlight">Flex item</div>
 410     <div class="p-2 bd-highlight">Flex item</div>
 411     <div class="p-2 bd-highlight">Flex item</div>
 412     <div class="p-2 bd-highlight">Flex item</div>
 413     <div class="p-2 bd-highlight">Flex item</div>
 414     <div class="p-2 bd-highlight">Flex item</div>
 415     <div class="p-2 bd-highlight">Flex item</div>
 416     <div class="p-2 bd-highlight">Flex item</div>
 417     <div class="p-2 bd-highlight">Flex item</div>
 418   </div>
 419 </div>
 420 {% highlight html %}
 421 <div class="d-flex align-content-end flex-wrap">...</div>
 422 {% endhighlight %}
 423
 424 <div class="bd-example">
 425   <div class="d-flex align-content-center flex-wrap bd-highlight mb-3" style="height: 200px">
 426     <div class="p-2 bd-highlight">Flex item</div>
 427     <div class="p-2 bd-highlight">Flex item</div>
 428     <div class="p-2 bd-highlight">Flex item</div>
 429     <div class="p-2 bd-highlight">Flex item</div>
 430     <div class="p-2 bd-highlight">Flex item</div>
 431     <div class="p-2 bd-highlight">Flex item</div>
 432     <div class="p-2 bd-highlight">Flex item</div>
 433     <div class="p-2 bd-highlight">Flex item</div>
 434     <div class="p-2 bd-highlight">Flex item</div>
 435     <div class="p-2 bd-highlight">Flex item</div>
 436     <div class="p-2 bd-highlight">Flex item</div>
 437     <div class="p-2 bd-highlight">Flex item</div>
 438     <div class="p-2 bd-highlight">Flex item</div>
 439     <div class="p-2 bd-highlight">Flex item</div>
 440     <div class="p-2 bd-highlight">Flex item</div>
 441   </div>
 442 </div>
 443 {% highlight html %}
 444 <div class="d-flex align-content-center flex-wrap">...</div>
 445 {% endhighlight %}
 446
 447 <div class="bd-example">
 448   <div class="d-flex align-content-between flex-wrap bd-highlight mb-3" style="height: 200px">
 449     <div class="p-2 bd-highlight">Flex item</div>
 450     <div class="p-2 bd-highlight">Flex item</div>
 451     <div class="p-2 bd-highlight">Flex item</div>
 452     <div class="p-2 bd-highlight">Flex item</div>
 453     <div class="p-2 bd-highlight">Flex item</div>
 454     <div class="p-2 bd-highlight">Flex item</div>
 455     <div class="p-2 bd-highlight">Flex item</div>
 456     <div class="p-2 bd-highlight">Flex item</div>
 457     <div class="p-2 bd-highlight">Flex item</div>
 458     <div class="p-2 bd-highlight">Flex item</div>
 459     <div class="p-2 bd-highlight">Flex item</div>
 460     <div class="p-2 bd-highlight">Flex item</div>
 461     <div class="p-2 bd-highlight">Flex item</div>
 462     <div class="p-2 bd-highlight">Flex item</div>
 463     <div class="p-2 bd-highlight">Flex item</div>
 464   </div>
 465 </div>
 466 {% highlight html %}
 467 <div class="d-flex align-content-between flex-wrap">...</div>
 468 {% endhighlight %}
 469
 470 <div class="bd-example">
 471   <div class="d-flex align-content-around flex-wrap bd-highlight mb-3" style="height: 200px">
 472     <div class="p-2 bd-highlight">Flex item</div>
 473     <div class="p-2 bd-highlight">Flex item</div>
 474     <div class="p-2 bd-highlight">Flex item</div>
 475     <div class="p-2 bd-highlight">Flex item</div>
 476     <div class="p-2 bd-highlight">Flex item</div>
 477     <div class="p-2 bd-highlight">Flex item</div>
 478     <div class="p-2 bd-highlight">Flex item</div>
 479     <div class="p-2 bd-highlight">Flex item</div>
 480     <div class="p-2 bd-highlight">Flex item</div>
 481     <div class="p-2 bd-highlight">Flex item</div>
 482     <div class="p-2 bd-highlight">Flex item</div>
 483     <div class="p-2 bd-highlight">Flex item</div>
 484     <div class="p-2 bd-highlight">Flex item</div>
 485     <div class="p-2 bd-highlight">Flex item</div>
 486     <div class="p-2 bd-highlight">Flex item</div>
 487   </div>
 488 </div>
 489 {% highlight html %}
 490 <div class="d-flex align-content-around flex-wrap">...</div>
 491 {% endhighlight %}
 492
 493 <div class="bd-example">
 494   <div class="d-flex align-content-stretch flex-wrap bd-highlight mb-3" style="height: 200px">
 495     <div class="p-2 bd-highlight">Flex item</div>
 496     <div class="p-2 bd-highlight">Flex item</div>
 497     <div class="p-2 bd-highlight">Flex item</div>
 498     <div class="p-2 bd-highlight">Flex item</div>
 499     <div class="p-2 bd-highlight">Flex item</div>
 500     <div class="p-2 bd-highlight">Flex item</div>
 501     <div class="p-2 bd-highlight">Flex item</div>
 502     <div class="p-2 bd-highlight">Flex item</div>
 503     <div class="p-2 bd-highlight">Flex item</div>
 504     <div class="p-2 bd-highlight">Flex item</div>
 505     <div class="p-2 bd-highlight">Flex item</div>
 506     <div class="p-2 bd-highlight">Flex item</div>
 507     <div class="p-2 bd-highlight">Flex item</div>
 508     <div class="p-2 bd-highlight">Flex item</div>
 509     <div class="p-2 bd-highlight">Flex item</div>
 510   </div>
 511 </div>
 512 {% highlight html %}
 513 <div class="d-flex align-content-stretch flex-wrap">...</div>
 514 {% endhighlight %}
 515
 516 Responsive variations also exist for `align-content`.
 517
 518 {% for bp in site.data.breakpoints %}
 519 - `.align-content{{ bp.abbr }}-start`
 520 - `.align-content{{ bp.abbr }}-end`
 521 - `.align-content{{ bp.abbr }}-center`
 522 - `.align-content{{ bp.abbr }}-around`
 523 - `.align-content{{ bp.abbr }}-stretch`{% endfor %}