aboutsummaryrefslogtreecommitdiff
path: root/site/content/docs/5.0/layout
diff options
context:
space:
mode:
Diffstat (limited to 'site/content/docs/5.0/layout')
-rw-r--r--site/content/docs/5.0/layout/breakpoints.md2
-rw-r--r--site/content/docs/5.0/layout/columns.md6
-rw-r--r--site/content/docs/5.0/layout/grid.md15
3 files changed, 13 insertions, 10 deletions
diff --git a/site/content/docs/5.0/layout/breakpoints.md b/site/content/docs/5.0/layout/breakpoints.md
index 5c701e403..ce1df6bb7 100644
--- a/site/content/docs/5.0/layout/breakpoints.md
+++ b/site/content/docs/5.0/layout/breakpoints.md
@@ -1,7 +1,7 @@
---
layout: docs
title: Breakpoints
-description: Breakpoints are the triggers in Bootstrap for how your layout responsive changes across device or viewport sizes.
+description: Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.
group: layout
aliases: "/docs/5.0/layout/"
toc: true
diff --git a/site/content/docs/5.0/layout/columns.md b/site/content/docs/5.0/layout/columns.md
index 9d4f538b5..5c859065a 100644
--- a/site/content/docs/5.0/layout/columns.md
+++ b/site/content/docs/5.0/layout/columns.md
@@ -303,15 +303,15 @@ The classes can be used together with utilities to create responsive floated ima
{{< placeholder width="100%" height="210" class="col-md-6 float-md-end mb-3 ms-md-3" text="Responsive floated image" >}}
<p>
- Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris paddenstoel nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
<p>
- Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Id nullam tellus relem amet commodo telemque olemit. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+ As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
</p>
<p>
- Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lantaarnpaal quam venenatis vestibulum. Donec sed odio dui. Maecenas faucibus mollis interdum. Nullam quis risus eget urna salsa tequila vel eu leo. Donec id elit non mi porta gravida at eget metus.
+ And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>
{{< /example >}}
diff --git a/site/content/docs/5.0/layout/grid.md b/site/content/docs/5.0/layout/grid.md
index 76b65c1bc..d0c7a80f7 100644
--- a/site/content/docs/5.0/layout/grid.md
+++ b/site/content/docs/5.0/layout/grid.md
@@ -17,14 +17,14 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
{{< example class="bd-example-row" >}}
<div class="container">
<div class="row">
- <div class="col-sm">
- One of three columns
+ <div class="col">
+ Column
</div>
- <div class="col-sm">
- One of three columns
+ <div class="col">
+ Column
</div>
- <div class="col-sm">
- One of three columns
+ <div class="col">
+ Column
</div>
</div>
</div>
@@ -434,6 +434,9 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
+
+// Without optional size values, the mixin will create equal columns (similar to using .col)
+@include make-col();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order