0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-23 15:52:21 +01:00
2020-08-06 19:27:04 +03:00

1306 lines
82 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="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.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.1.1">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="4.5">
<title>Flex · Bootstrap v4.5</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/flex/">
<!-- Bootstrap core CSS -->
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Flex">
<meta name="twitter:description" content="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.">
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.5/utilities/flex/">
<meta property="og:title" content="Flex">
<meta property="og:description" content="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.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-10', 'getbootstrap.com');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
</head>
<body>
<div class="skippy overflow-hidden">
<div class="container-xl">
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
</div>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg></a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/docs/4.5/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/docs/4.5/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</ul>
</div>
<ul class="navbar-nav ml-md-auto">
<li class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v4.5
</a>
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
<a class="dropdown-item active" href="/docs/4.5/">Latest (4.5.x)</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/docs/versions/">All versions</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link pl-2 pr-1 mx-1 py-3 my-n2" href="https://github.com/twbs" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a>
</li>
<li class="nav-item">
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg></a>
</li>
<li class="nav-item">
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg></a>
</li>
<li class="nav-item">
<a class="nav-link px-1 mx-1 py-3 my-n2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg></a>
</li>
</ul>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.5/getting-started/download/">Download</a>
</header>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<form role="search" class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="4.5">
<button class="btn bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg></button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation"><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.5/getting-started/introduction/">
Getting started
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.5/getting-started/introduction/">
Introduction
</a>
</li><li>
<a href="/docs/4.5/getting-started/download/">
Download
</a>
</li><li>
<a href="/docs/4.5/getting-started/contents/">
Contents
</a>
</li><li>
<a href="/docs/4.5/getting-started/browsers-devices/">
Browsers & devices
</a>
</li><li>
<a href="/docs/4.5/getting-started/javascript/">
JavaScript
</a>
</li><li>
<a href="/docs/4.5/getting-started/theming/">
Theming
</a>
</li><li>
<a href="/docs/4.5/getting-started/build-tools/">
Build tools
</a>
</li><li>
<a href="/docs/4.5/getting-started/webpack/">
Webpack
</a>
</li><li>
<a href="/docs/4.5/getting-started/accessibility/">
Accessibility
</a>
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.5/layout/overview/">
Layout
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.5/layout/overview/">
Overview
</a>
</li><li>
<a href="/docs/4.5/layout/grid/">
Grid
</a>
</li><li>
<a href="/docs/4.5/layout/utilities-for-layout/">
Utilities for layout
</a>
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.5/content/reboot/">
Content
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.5/content/reboot/">
Reboot
</a>
</li><li>
<a href="/docs/4.5/content/typography/">
Typography
</a>
</li><li>
<a href="/docs/4.5/content/code/">
Code
</a>
</li><li>
<a href="/docs/4.5/content/images/">
Images
</a>
</li><li>
<a href="/docs/4.5/content/tables/">
Tables
</a>
</li><li>
<a href="/docs/4.5/content/figures/">
Figures
</a>
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.5/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.5/components/alerts/">
Alerts
</a>
</li><li>
<a href="/docs/4.5/components/badge/">
Badge
</a>
</li><li>
<a href="/docs/4.5/components/breadcrumb/">
Breadcrumb
</a>
</li><li>
<a href="/docs/4.5/components/buttons/">
Buttons
</a>
</li><li>
<a href="/docs/4.5/components/button-group/">
Button group
</a>
</li><li>
<a href="/docs/4.5/components/card/">
Card
</a>
</li><li>
<a href="/docs/4.5/components/carousel/">
Carousel
</a>
</li><li>
<a href="/docs/4.5/components/collapse/">
Collapse
</a>
</li><li>
<a href="/docs/4.5/components/dropdowns/">
Dropdowns
</a>
</li><li>
<a href="/docs/4.5/components/forms/">
Forms
</a>
</li><li>
<a href="/docs/4.5/components/input-group/">
Input group
</a>
</li><li>
<a href="/docs/4.5/components/jumbotron/">
Jumbotron
</a>
</li><li>
<a href="/docs/4.5/components/list-group/">
List group
</a>
</li><li>
<a href="/docs/4.5/components/media-object/">
Media object
</a>
</li><li>
<a href="/docs/4.5/components/modal/">
Modal
</a>
</li><li>
<a href="/docs/4.5/components/navs/">
Navs
</a>
</li><li>
<a href="/docs/4.5/components/navbar/">
Navbar
</a>
</li><li>
<a href="/docs/4.5/components/pagination/">
Pagination
</a>
</li><li>
<a href="/docs/4.5/components/popovers/">
Popovers
</a>
</li><li>
<a href="/docs/4.5/components/progress/">
Progress
</a>
</li><li>
<a href="/docs/4.5/components/scrollspy/">
Scrollspy
</a>
</li><li>
<a href="/docs/4.5/components/spinners/">
Spinners
</a>
</li><li>
<a href="/docs/4.5/components/toasts/">
Toasts
</a>
</li><li>
<a href="/docs/4.5/components/tooltips/">
Tooltips
</a>
</li></ul>
</div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.5/utilities/borders/">
Utilities
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.5/utilities/borders/">
Borders
</a>
</li><li>
<a href="/docs/4.5/utilities/clearfix/">
Clearfix
</a>
</li><li>
<a href="/docs/4.5/utilities/close-icon/">
Close icon
</a>
</li><li>
<a href="/docs/4.5/utilities/colors/">
Colors
</a>
</li><li>
<a href="/docs/4.5/utilities/display/">
Display
</a>
</li><li>
<a href="/docs/4.5/utilities/embed/">
Embed
</a>
</li><li class="active bd-sidenav-active">
<a href="/docs/4.5/utilities/flex/">
Flex
</a>
</li><li>
<a href="/docs/4.5/utilities/float/">
Float
</a>
</li><li>
<a href="/docs/4.5/utilities/image-replacement/">
Image replacement
</a>
</li><li>
<a href="/docs/4.5/utilities/interactions/">
Interactions
</a>
</li><li>
<a href="/docs/4.5/utilities/overflow/">
Overflow
</a>
</li><li>
<a href="/docs/4.5/utilities/position/">
Position
</a>
</li><li>
<a href="/docs/4.5/utilities/screen-readers/">
Screen readers
</a>
</li><li>
<a href="/docs/4.5/utilities/shadows/">
Shadows
</a>
</li><li>
<a href="/docs/4.5/utilities/sizing/">
Sizing
</a>
</li><li>
<a href="/docs/4.5/utilities/spacing/">
Spacing
</a>
</li><li>
<a href="/docs/4.5/utilities/stretched-link/">
Stretched link
</a>
</li><li>
<a href="/docs/4.5/utilities/text/">
Text
</a>
</li><li>
<a href="/docs/4.5/utilities/vertical-align/">
Vertical align
</a>
</li><li>
<a href="/docs/4.5/utilities/visibility/">
Visibility
</a>
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.5/extend/approach/">
Extend
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.5/extend/approach/">
Approach
</a>
</li><li>
<a href="/docs/4.5/extend/icons/">
Icons
</a>
</li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.5/migration/">
Migration
</a>
<ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.5/about/overview/">
About
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.5/about/overview/">
Overview
</a>
</li><li>
<a href="/docs/4.5/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.5/about/brand/">
Brand
</a>
</li><li>
<a href="/docs/4.5/about/license/">
License
</a>
</li><li>
<a href="/docs/4.5/about/translations/">
Translations
</a>
</li></ul>
</div></nav>
</div>
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#enable-flex-behaviors">Enable flex behaviors</a></li>
<li class="toc-entry toc-h2"><a href="#direction">Direction</a></li>
<li class="toc-entry toc-h2"><a href="#justify-content">Justify content</a></li>
<li class="toc-entry toc-h2"><a href="#align-items">Align items</a></li>
<li class="toc-entry toc-h2"><a href="#align-self">Align self</a></li>
<li class="toc-entry toc-h2"><a href="#fill">Fill</a></li>
<li class="toc-entry toc-h2"><a href="#grow-and-shrink">Grow and shrink</a></li>
<li class="toc-entry toc-h2"><a href="#auto-margins">Auto margins</a>
<ul>
<li class="toc-entry toc-h3"><a href="#with-align-items">With align-items</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#wrap">Wrap</a></li>
<li class="toc-entry toc-h2"><a href="#order">Order</a></li>
<li class="toc-entry toc-h2"><a href="#align-content">Align content</a></li>
</ul>
</nav>
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/flex.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
<h1 class="bd-title" id="content">Flex</h1>
</div>
<p class="bd-lead">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.</p>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="enable-flex-behaviors">Enable flex behaviors</h2>
<p>Apply <code class="language-plaintext highlighter-rouge">display</code> utilities to create a flexbox container and transform <strong>direct children elements</strong> into flex items. Flex containers and items are able to be modified further with additional flex properties.</p>
<div class="bd-example">
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex p-2 bd-highlight"</span><span class="nt">&gt;</span>I'm a flexbox container!<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<div class="bd-example">
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-inline-flex p-2 bd-highlight"</span><span class="nt">&gt;</span>I'm an inline flexbox container!<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">.d-flex</code> and <code class="language-plaintext highlighter-rouge">.d-inline-flex</code>.</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">.d-flex</code></li>
<li><code class="language-plaintext highlighter-rouge">.d-inline-flex</code></li>
<li><code class="language-plaintext highlighter-rouge">.d-sm-flex</code></li>
<li><code class="language-plaintext highlighter-rouge">.d-sm-inline-flex</code></li>
<li><code class="language-plaintext highlighter-rouge">.d-md-flex</code></li>
<li><code class="language-plaintext highlighter-rouge">.d-md-inline-flex</code></li>
<li><code class="language-plaintext highlighter-rouge">.d-lg-flex</code></li>
<li><code class="language-plaintext highlighter-rouge">.d-lg-inline-flex</code></li>
<li><code class="language-plaintext highlighter-rouge">.d-xl-flex</code></li>
<li><code class="language-plaintext highlighter-rouge">.d-xl-inline-flex</code></li>
</ul>
<h2 id="direction">Direction</h2>
<p>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 <code class="language-plaintext highlighter-rouge">row</code>. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).</p>
<p>Use <code class="language-plaintext highlighter-rouge">.flex-row</code> to set a horizontal direction (the browser default), or <code class="language-plaintext highlighter-rouge">.flex-row-reverse</code> to start the horizontal direction from the opposite side.</p>
<div class="bd-example">
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex flex-row bd-highlight mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item 1<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item 2<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item 3<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex flex-row-reverse bd-highlight"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item 1<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item 2<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item 3<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<p>Use <code class="language-plaintext highlighter-rouge">.flex-column</code> to set a vertical direction, or <code class="language-plaintext highlighter-rouge">.flex-column-reverse</code> to start the vertical direction from the opposite side.</p>
<div class="bd-example">
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex flex-column bd-highlight mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item 1<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item 2<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item 3<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex flex-column-reverse bd-highlight"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item 1<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item 2<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item 3<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">flex-direction</code>.</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">.flex-row</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-row-reverse</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-column</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-column-reverse</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-sm-row</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-sm-row-reverse</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-sm-column</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-sm-column-reverse</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-md-row</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-md-row-reverse</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-md-column</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-md-column-reverse</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-lg-row</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-lg-row-reverse</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-lg-column</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-lg-column-reverse</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-xl-row</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-xl-row-reverse</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-xl-column</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-xl-column-reverse</code></li>
</ul>
<h2 id="justify-content">Justify content</h2>
<p>Use <code class="language-plaintext highlighter-rouge">justify-content</code> utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if <code class="language-plaintext highlighter-rouge">flex-direction: column</code>). Choose from <code class="language-plaintext highlighter-rouge">start</code> (browser default), <code class="language-plaintext highlighter-rouge">end</code>, <code class="language-plaintext highlighter-rouge">center</code>, <code class="language-plaintext highlighter-rouge">between</code>, or <code class="language-plaintext highlighter-rouge">around</code>.</p>
<div class="bd-example">
<div class="d-flex justify-content-start bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex justify-content-end bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex justify-content-center bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex justify-content-between bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex justify-content-around bd-highlight">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex justify-content-start"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex justify-content-end"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex justify-content-center"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex justify-content-between"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex justify-content-around"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">justify-content</code>.</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">.justify-content-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-between</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-around</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-sm-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-sm-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-sm-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-sm-between</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-sm-around</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-md-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-md-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-md-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-md-between</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-md-around</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-lg-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-lg-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-lg-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-lg-between</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-lg-around</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-xl-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-xl-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-xl-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-xl-between</code></li>
<li><code class="language-plaintext highlighter-rouge">.justify-content-xl-around</code></li>
</ul>
<h2 id="align-items">Align items</h2>
<p>Use <code class="language-plaintext highlighter-rouge">align-items</code> utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if <code class="language-plaintext highlighter-rouge">flex-direction: column</code>). Choose from <code class="language-plaintext highlighter-rouge">start</code>, <code class="language-plaintext highlighter-rouge">end</code>, <code class="language-plaintext highlighter-rouge">center</code>, <code class="language-plaintext highlighter-rouge">baseline</code>, or <code class="language-plaintext highlighter-rouge">stretch</code> (browser default).</p>
<div class="bd-example">
<div class="d-flex align-items-start bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-center bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-baseline bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-stretch bd-highlight" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-start"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-end"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-baseline"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-stretch"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">align-items</code>.</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">.align-items-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-baseline</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-stretch</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-sm-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-sm-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-sm-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-sm-baseline</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-sm-stretch</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-md-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-md-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-md-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-md-baseline</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-md-stretch</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-lg-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-lg-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-lg-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-lg-baseline</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-lg-stretch</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-xl-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-xl-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-xl-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-xl-baseline</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-items-xl-stretch</code></li>
</ul>
<h2 id="align-self">Align self</h2>
<p>Use <code class="language-plaintext highlighter-rouge">align-self</code> utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if <code class="language-plaintext highlighter-rouge">flex-direction: column</code>). Choose from the same options as <code class="language-plaintext highlighter-rouge">align-items</code>: <code class="language-plaintext highlighter-rouge">start</code>, <code class="language-plaintext highlighter-rouge">end</code>, <code class="language-plaintext highlighter-rouge">center</code>, <code class="language-plaintext highlighter-rouge">baseline</code>, or <code class="language-plaintext highlighter-rouge">stretch</code> (browser default).</p>
<div class="bd-example">
<div class="d-flex bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="align-self-start p-2 bd-highlight">Aligned flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="align-self-end p-2 bd-highlight">Aligned flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="align-self-center p-2 bd-highlight">Aligned flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="align-self-baseline p-2 bd-highlight">Aligned flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="align-self-stretch p-2 bd-highlight">Aligned flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"align-self-start"</span><span class="nt">&gt;</span>Aligned flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"align-self-end"</span><span class="nt">&gt;</span>Aligned flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"align-self-center"</span><span class="nt">&gt;</span>Aligned flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"align-self-baseline"</span><span class="nt">&gt;</span>Aligned flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"align-self-stretch"</span><span class="nt">&gt;</span>Aligned flex item<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">align-self</code>.</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">.align-self-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-baseline</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-stretch</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-sm-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-sm-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-sm-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-sm-baseline</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-sm-stretch</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-md-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-md-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-md-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-md-baseline</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-md-stretch</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-lg-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-lg-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-lg-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-lg-baseline</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-lg-stretch</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-xl-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-xl-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-xl-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-xl-baseline</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-self-xl-stretch</code></li>
</ul>
<h2 id="fill">Fill</h2>
<p>Use the <code class="language-plaintext highlighter-rouge">.flex-fill</code> class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.</p>
<div class="bd-example">
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex bd-highlight"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 flex-fill bd-highlight"</span><span class="nt">&gt;</span>Flex item with a lot of content<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 flex-fill bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 flex-fill bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">flex-fill</code>.</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">.flex-fill</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-sm-fill</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-md-fill</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-lg-fill</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-xl-fill</code></li>
</ul>
<h2 id="grow-and-shrink">Grow and shrink</h2>
<p>Use <code class="language-plaintext highlighter-rouge">.flex-grow-*</code> utilities to toggle a flex items ability to grow to fill available space. In the example below, the <code class="language-plaintext highlighter-rouge">.flex-grow-1</code> elements uses all available space it can, while allowing the remaining two flex items their necessary space.</p>
<div class="bd-example">
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Third flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex bd-highlight"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 flex-grow-1 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Third flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<p>Use <code class="language-plaintext highlighter-rouge">.flex-shrink-*</code> utilities to toggle a flex items ability to shrink if necessary. In the example below, the second flex item with <code class="language-plaintext highlighter-rouge">.flex-shrink-1</code> is forced to wrap its contents to a new line, “shrinking” to allow more space for the previous flex item with <code class="language-plaintext highlighter-rouge">.w-100</code>.</p>
<div class="bd-example">
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex bd-highlight"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 w-100 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 flex-shrink-1 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">flex-grow</code> and <code class="language-plaintext highlighter-rouge">flex-shrink</code>.</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">.flex-{grow|shrink}-0</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-{grow|shrink}-1</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-sm-{grow|shrink}-0</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-sm-{grow|shrink}-1</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-md-{grow|shrink}-0</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-md-{grow|shrink}-1</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-lg-{grow|shrink}-0</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-lg-{grow|shrink}-1</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-xl-{grow|shrink}-0</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-xl-{grow|shrink}-1</code></li>
</ul>
<h2 id="auto-margins">Auto margins</h2>
<p>Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (<code class="language-plaintext highlighter-rouge">.mr-auto</code>), and pushing two items to the left (<code class="language-plaintext highlighter-rouge">.ml-auto</code>).</p>
<p><strong>Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default <code class="language-plaintext highlighter-rouge">justify-content</code> value.</strong> <a href="https://stackoverflow.com/a/37535548">See this StackOverflow answer</a> for more details.</p>
<div class="bd-example">
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="mr-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex bd-highlight mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex bd-highlight mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-auto p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex bd-highlight mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-auto p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<h3 id="with-align-items">With align-items</h3>
<p>Vertically move one flex item to the top or bottom of a container by mixing <code class="language-plaintext highlighter-rouge">align-items</code>, <code class="language-plaintext highlighter-rouge">flex-direction: column</code>, and <code class="language-plaintext highlighter-rouge">margin-top: auto</code> or <code class="language-plaintext highlighter-rouge">margin-bottom: auto</code>.</p>
<div class="bd-example">
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-start flex-column bd-highlight mb-3"</span> <span class="na">style=</span><span class="s">"height: 200px;"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-auto p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-end flex-column bd-highlight mb-3"</span> <span class="na">style=</span><span class="s">"height: 200px;"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mt-auto p-2 bd-highlight"</span><span class="nt">&gt;</span>Flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<h2 id="wrap">Wrap</h2>
<p>Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with <code class="language-plaintext highlighter-rouge">.flex-nowrap</code>, wrapping with <code class="language-plaintext highlighter-rouge">.flex-wrap</code>, or reverse wrapping with <code class="language-plaintext highlighter-rouge">.flex-wrap-reverse</code>.</p>
<div class="bd-example">
<div class="d-flex flex-nowrap bd-highlight" style="width: 8rem;">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex flex-nowrap"</span><span class="nt">&gt;</span>
...
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<div class="bd-example">
<div class="d-flex flex-wrap bd-highlight">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex flex-wrap"</span><span class="nt">&gt;</span>
...
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<div class="bd-example">
<div class="d-flex flex-wrap-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex flex-wrap-reverse"</span><span class="nt">&gt;</span>
...
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">flex-wrap</code>.</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">.flex-nowrap</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-wrap</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-wrap-reverse</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-sm-nowrap</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-sm-wrap</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-sm-wrap-reverse</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-md-nowrap</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-md-wrap</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-md-wrap-reverse</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-lg-nowrap</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-lg-wrap</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-lg-wrap-reverse</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-xl-nowrap</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-xl-wrap</code></li>
<li><code class="language-plaintext highlighter-rouge">.flex-xl-wrap-reverse</code></li>
</ul>
<h2 id="order">Order</h2>
<p>Change the <em>visual</em> order of specific flex items with a handful of <code class="language-plaintext highlighter-rouge">order</code> utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As <code class="language-plaintext highlighter-rouge">order</code> takes any integer value (e.g., <code class="language-plaintext highlighter-rouge">5</code>), add custom CSS for any additional values needed.</p>
<div class="bd-example">
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second flex item</div>
<div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex flex-nowrap bd-highlight"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"order-3 p-2 bd-highlight"</span><span class="nt">&gt;</span>First flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"order-2 p-2 bd-highlight"</span><span class="nt">&gt;</span>Second flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"order-1 p-2 bd-highlight"</span><span class="nt">&gt;</span>Third flex item<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">order</code>.</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">.order-0</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-1</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-2</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-3</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-4</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-5</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-6</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-7</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-8</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-9</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-10</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-11</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-12</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-sm-0</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-sm-1</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-sm-2</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-sm-3</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-sm-4</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-sm-5</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-sm-6</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-sm-7</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-sm-8</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-sm-9</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-sm-10</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-sm-11</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-sm-12</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-md-0</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-md-1</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-md-2</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-md-3</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-md-4</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-md-5</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-md-6</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-md-7</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-md-8</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-md-9</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-md-10</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-md-11</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-md-12</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-lg-0</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-lg-1</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-lg-2</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-lg-3</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-lg-4</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-lg-5</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-lg-6</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-lg-7</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-lg-8</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-lg-9</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-lg-10</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-lg-11</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-lg-12</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-xl-0</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-xl-1</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-xl-2</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-xl-3</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-xl-4</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-xl-5</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-xl-6</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-xl-7</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-xl-8</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-xl-9</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-xl-10</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-xl-11</code></li>
<li><code class="language-plaintext highlighter-rouge">.order-xl-12</code></li>
</ul>
<h2 id="align-content">Align content</h2>
<p>Use <code class="language-plaintext highlighter-rouge">align-content</code> utilities on flexbox containers to align flex items <em>together</em> on the cross axis. Choose from <code class="language-plaintext highlighter-rouge">start</code> (browser default), <code class="language-plaintext highlighter-rouge">end</code>, <code class="language-plaintext highlighter-rouge">center</code>, <code class="language-plaintext highlighter-rouge">between</code>, <code class="language-plaintext highlighter-rouge">around</code>, or <code class="language-plaintext highlighter-rouge">stretch</code>. To demonstrate these utilities, weve enforced <code class="language-plaintext highlighter-rouge">flex-wrap: wrap</code> and increased the number of flex items.</p>
<p><strong>Heads up!</strong> This property has no effect on single rows of flex items.</p>
<div class="bd-example">
<div class="d-flex align-content-start flex-wrap bd-highlight mb-3" style="height: 200px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-content-start flex-wrap"</span><span class="nt">&gt;</span>
...
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<div class="bd-example">
<div class="d-flex align-content-end flex-wrap bd-highlight mb-3" style="height: 200px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-content-end flex-wrap"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<div class="bd-example">
<div class="d-flex align-content-center flex-wrap bd-highlight mb-3" style="height: 200px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-content-center flex-wrap"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<div class="bd-example">
<div class="d-flex align-content-between flex-wrap bd-highlight mb-3" style="height: 200px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-content-between flex-wrap"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<div class="bd-example">
<div class="d-flex align-content-around flex-wrap bd-highlight mb-3" style="height: 200px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-content-around flex-wrap"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<div class="bd-example">
<div class="d-flex align-content-stretch flex-wrap bd-highlight mb-3" style="height: 200px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-content-stretch flex-wrap"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">align-content</code>.</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">.align-content-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-around</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-stretch</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-sm-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-sm-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-sm-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-sm-around</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-sm-stretch</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-md-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-md-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-md-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-md-around</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-md-stretch</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-lg-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-lg-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-lg-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-lg-around</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-lg-stretch</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-xl-start</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-xl-end</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-xl-center</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-xl-around</code></li>
<li><code class="language-plaintext highlighter-rouge">.align-content-xl-stretch</code></li>
</ul>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
</body>
</html>