Skip to content

Instantly share code, notes, and snippets.

@sjcodebook

sjcodebook/Flexbox.html

Created September 2, 2019 09:04
Show Gist options
  • Save sjcodebook/0f26059e5fa5d98983c6b9b5de66cc22 to your computer and use it in GitHub Desktop.
Save sjcodebook/0f26059e5fa5d98983c6b9b5de66cc22 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap Flexbox Cheat sheet
Raw
Flexbox.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<title>Bootstrap Sandbox</title>
<style>
.row-hl {
background: #f4f4f4;
height: 250px;
}
.item-hl {
border: 1px solid #333;
}
</style>
</head>
<body>
<header>
<h1 class="display-3 text-center my-4">Flexbox</h1>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown">
2: Utilities
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="2_2_basic_typography.html">2.2 Basic Typography</a>
<a class="dropdown-item" href="2_3_text_alignment_display.html">2.3 Text Alignment & Display</a>
<a class="dropdown-item" href="2_4_floats_position.html">2.4 Floats & Position</a>
<a class="dropdown-item" href="2_5_colors_background.html">2.5: Colors & Background</a>
<a class="dropdown-item" href="2_6_spacing.html">2.6 Spacing</a>
<a class="dropdown-item" href="2_7_sizing.html">2.7 Sizing</a>
<a class="dropdown-item" href="2_8_breakpoints.html">2.8 Breakpoints</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-success btn-block dropdown-toggle" type="button" data-toggle="dropdown">
3: CSS Components
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="3_2_buttons.html">3.2 Buttons</a>
<a class="dropdown-item" href="3_3_navbar.html">3.3 Navbar</a>
<a class="dropdown-item" href="3_4_list_groups_badges.html">3.4 List Groups & Badges</a>
<a class="dropdown-item" href="3_5_forms.html">3.5 Forms</a>
<a class="dropdown-item" href="3_6_input_groups.html">3.6 Input Groups</a>
<a class="dropdown-item" href="3_7_alerts_progress.html">3.7 Alerts & Progress</a>
<a class="dropdown-item" href="3_8_tables_pagination.html">3.8 Tables & Pagination</a>
<a class="dropdown-item" href="3_9_cards.html">3.9 Cards</a>
<a class="dropdown-item" href="3_10_media_object.html">3.10 Media Objects</a>
<a class="dropdown-item" href="3_11_jumbotron.html">3.11 Jumbotron</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-warning btn-block dropdown-toggle" type="button" data-toggle="dropdown">
4: Grid & Flexbox
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="4_2_grid_system.html">4.2 Grid System</a>
<a class="dropdown-item" href="4_3_grid_alignment.html">4.3 Grid Alignment</a>
<a class="dropdown-item" href="4_4_flexbox.html">4.4 Flexbox</a>
<a class="dropdown-item" href="4_5_auto_margins_wrapping_order.html">4.5 Auto Margins & Wrap</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-danger btn-block dropdown-toggle" type="button" data-toggle="dropdown">
5: JavaScript Widgets
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="5_2_carousel.html">5.2 Carousel</a>
<a class="dropdown-item" href="5_3_collapse.html">5.3 Collapse</a>
<a class="dropdown-item" href="5_4_tooltips.html">5.4 Tooltips</a>
<a class="dropdown-item" href="5_5_popovers.html">5.5 Popovers</a>
<a class="dropdown-item" href="5_6_modals.html">5.6 Modals</a>
<a class="dropdown-item" href="5_7_scrollspy.html">5.7 ScrollSpy</a>
</div>
</div>
</div>
</div>
</div>
<hr>
</header>
<div class="container">
<!--#####################START HERE######################-->
<!-- FLEX ROW & FLEX ITEMS -->
<div class="d-flex flex-row row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- FLEX ROW REVERSE -->
<div class="d-flex flex-row-reverse row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- JUSTIFY CONTENT - CONTENT START -->
<div class="d-flex justify-content-start row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- JUSTIFY CONTENT - CONTENT CENTER -->
<div class="d-flex justify-content-center row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- JUSTIFY CONTENT - CONTENT END -->
<div class="d-flex justify-content-end row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- JUSTIFY CONTENT - CONTENT AROUND -->
<div class="d-flex justify-content-around row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- JUSTIFY CONTENT - CONTENT BETWEEN -->
<div class="d-flex justify-content-between row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- FLEX COLUMN -->
<div class="d-flex flex-column row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- FLEX COLUMN REVERSE -->
<div class="d-flex flex-column-reverse row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN ITEMS - START -->
<div class="d-flex align-items-start row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN ITEMS - CENTER -->
<div class="d-flex align-items-center row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN ITEMS - END -->
<div class="d-flex align-items-end row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN ITEMS - BASELINE -->
<div class="d-flex align-items-baseline row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN ITEMS - STRETCH -->
<div class="d-flex align-items-stretch row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- ALIGN SELF -->
<div class="d-flex row-hl">
<div class="align-self-start p-4 item-hl">Flex Item</div>
<div class="align-self-center p-4 item-hl">Flex Item</div>
<div class="align-self-end p-4 item-hl">Flex Item</div>
<div class="align-self-baseline p-4 item-hl">Flex Item</div>
<div class="align-self-stretch p-4 item-hl">Flex Item</div>
</div>
<div style="margin-top:500px;"></div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment