/* Grid System */
<!-- RESPONSIVE GRID -->
<div class="row">
<div class="col-sm-6 col-md-8 col-lg-9 col-lg-10" style="border:1px solid #333">
<ul>
<li>6 column on small screens</li>
<li>8 column on medium screen</li>
<li>9 column on large screen</li>
<li>10 column on xlarge screen</li>
</ul>
</div>
<div class="col-sm-6 col-md-8 col-lg-9 col-lg-10" style="border:1px solid #333">
<ul>
<li>6 column on small screens</li>
<li>4 column on medium screen</li>
<li>3 column on large screen</li>
<li>2 column on xlarge screen</li>
</ul>
</div>
</div>
<!-- EQUAL WIDTH -->
<div class="row">
<div class="col" style="border:1px solid #333">Equal Width</div>
<div class="col" style="border:1px solid #333">Equal Width</div>
<div class="col" style="border:1px solid #333">Equal Width</div>
<div class="col" style="border:1px solid #333">Equal Width</div>
</div>
<!-- EQUAL WIDTH MULTI ROW -->
<div class="row">
<div class="col" style="border:1px solid #333">Equal Width Multi</div>
<div class="col" style="border:1px solid #333">Equal Width Multi</div>
<div class="w-100" style="border:1px solid #333"></div>
<div class="col" style="border:1px solid #333">Equal Width Multi</div>
<div class="col" style="border:1px solid #333">Equal Width Multi</div>
</div>
<!-- AUTO LAYOUT -->
<div class="row">
<div class="col" style="border:1px solid #333">Auto Layout</div>
<div class="col-6" style="border:1px solid #333">Auto Layout</div>
<div class="col-4" style="border:1px solid #333">Auto Layout</div>
</div>
<!-- EQUAL WIDTH STACKED -->
<div class="row">
<div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
<div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
<div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
</div>
<!-- ORDERING -->
<div class="row">
<div class="col order-3" style="border:1px solid #333">
First
</div>
<div class="col order-2" style="border:1px solid #333">
Second
</div>
<div class="col order-1" style="border:1px solid #333">
Third
</div>
</div>
<!-- OFFSETTING -->
<div class="row">
<!-- 6 column div offset by 3 -->
<div class="col-md-6 offset-md-3" style="border:1px solid #333">.col-md-6 .offset-md-3</div>
</div>
<div class="row">
<!-- 2 4 column divs, the second offset by 4 -->
<div class="col-md-4" style="border:1px solid #333">.col-md-4</div>
<div class="col-md-4 offset-md-4" style="border:1px solid #333">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<!-- 2 3 column divs, both offset by 3 -->
<div class="col-md-3 offset-md-3" style="border:1px solid #333">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3" style="border:1px solid #333">.col-md-3 .offset-md-3</div>
</div>
<!-- NESTING -->
<div class="row">
<div class="col-sm-9" style="border:1px solid blue">
Level 1: .col-sm-9
<div>
<div class="col-8 col-sm-6" style="border:1px solid red">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6" style="border:1px solid red">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
/* ------------------ XX --------------- */
/* Grid Alignment */
<!-- VERTICAL ALIGNMENT -->
<div class="container">
<div class="row align-items-start" style="height:200px;border:1px #333 solid">
<div class="col">
Top Aligned Text
</div>
<div class="col">
Top Aligned Text
</div>
<div class="col">
Top Aligned Text
</div>
</div>
<div class="row align-items-center" style="height:200px;border:1px #333 solid">
<div class="col">
Middle Aligned Text
</div>
<div class="col">
Middle Aligned Text
</div>
<div class="col">
Middle Aligned Text
</div>
</div>
<div class="row align-items-end" style="height:200px;border:1px #333 solid">
<div class="col">
Bottom Aligned Text
</div>
<div class="col">
Bottom Aligned Text
</div>
<div class="col">
Bottom Aligned Text
</div>
</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN INDIVIDUAL COLS -->
<div class="container">
<div class="row" style="height:200px;border:1px #333 solid">
<div class="col align-self-start">
Top Aligned
</div>
<div class="col align-self-center">
Middle Aligned
</div>
<div class="col align-self-end">
Bottom Aligned
</div>
</div>
</div>
<br>
<br>
<!-- HORIZONTAL ALIGNED COLS -->
<div class="container">
<div class="row justify-content-start" style="height:200px;border:1px #333 solid">
<div class="col-4">
Left Aligned Text
</div>
<div class="col-4">
Left Aligned Text
</div>
</div>
<div class="row justify-content-center" style="height:200px;border:1px #333 solid">
<div class="col-4">
Center Aligned Text
</div>
<div class="col-4">
Center Aligned Text
</div>
</div>
<div class="row justify-content-end" style="height:200px;border:1px #333 solid">
<div class="col-4">
Right Aligned Text
</div>
<div class="col-4">
Right Aligned Text
</div>
</div>
<div class="row justify-content-around" style="height:200px;border:1px #333 solid">
<div class="col-4">
Content Around
</div>
<div class="col-4">
Content Around
</div>
</div>
<div class="row justify-content-between" style="height:200px;border:1px #333 solid">
<div class="col-4">
Content Between
</div>
<div class="col-4">
Content Between
</div>
</div>
</div>
<br>
<br>
<!-- COLUMN WRAPPING & NO GUTTERS-->
<div class="row no-gutters">
<div class="col-9">
<div class="card">
<div class="card-block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
</div>
</div>
</div>
</div>
</div>
/* ------------------ XX --------------- */
/* Flex */
<!-- 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 1</div>
<div class="p-4 item-hl">Flex Item 2</div>
<div class="p-4 item-hl">Flex Item 3</div>
</div>
<br>
<br>
<!-- JUSTIFY CONTENT - CONTENT START -->
<div class="d-flex row-hl justify-content-start">
<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 row-hl justify-content-center">
<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 row-hl justify-content-end">
<div class="p-4 item-hl">Flex Item end</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 row-hl justify-content-around">
<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 row-hl justify-content-between">
<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="row-hl d-flex flex-column">
<div class="p-4 item-hl">Flex Item 11</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="row-hl d-flex align-items-start">
<div class="p-4 item-hl">Flex Item Start</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="row-hl d-flex align-items-center">
<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="row-hl d-flex align-items-end">
<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="row-hl d-flex align-items-baseline">
<div class="p-4 item-hl">Flex Item BASELINE</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="row-hl d-flex align-items-stretch">
<div class="p-4 item-hl">Flex Item STRETCH</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="row-hl d-flex">
<div class="p-4 item-hl align-self-end">Flex Item End</div>
<div class="p-4 item-hl align-self-center">Flex Item</div>
<div class="p-4 item-hl align-self-start">Flex Item</div>
<div class="p-4 item-hl align-self-baseline">Flex baseline</div>
<div class="p-4 item-hl align-self-stretch">Flex stretch</div>
</div>
/* ------------------ XX --------------- */
/* Auto Margins & Wrap */
<!-- MR-AUTO -->
<div class="d-flex row-hl">
<div class="mr-auto p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
</div>
<br>
<br>
<!-- ML-AUTO -->
<div class="d-flex row-hl">
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="ml-auto p-2 item-hl">Flex item</div>
</div>
<br>
<br>
<!-- MB-AUTO -->
<div class="d-flex flex-column row-hl">
<div class="mb-auto p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
</div>
<br>
<br>
<!-- MT-AUTO -->
<div class="d-flex flex-column row-hl">
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 mt-auto item-hl">Flex item</div>
</div>
<br>
<br>
<!-- NO WRAP -->
<div class="d-flex row-hl">
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
</div>
<br>
<br>
<!-- WRAP -->
<div class="d-flex flex-wrap row-hl">
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
</div>
<br>
<br>
<!-- ORDERING -->
<div class="d-flex row-hl">
<div class="p-2 order-3 item-hl">First flex item</div>
<div class="p-2 item-hl">Second flex item</div>
<div class="p-2 order-1 item-hl">Third flex item</div>
</div>
/* ------------------ XX --------------- */
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter