A generic square placeholder image with rounded corners

@@ -60,11 +60,11 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili {% endhighlight %}

{% highlight html %} -

{% endhighlight %}

diff --git a/docs/content/typography.md b/docs/content/typography.md index a59f50347..4a8e4c2d0 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -168,7 +168,7 @@ For quoting blocks of content from another source within your document. Wrap ` -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
{% endexample %} @@ -178,7 +178,7 @@ Add a `
` for identifying the source. Wrap the {% example html %}
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

{% endexample %} @@ -189,7 +189,7 @@ Add `.blockquote-reverse` for a blockquote with right-aligned content. {% example html %}
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

{% endexample %} -- cgit v1.2.3 From 618081b86c005798d23da3e1e246c97561ca0127 Mon Sep 17 00:00:00 2001 From: judetucker Date: Mon, 25 Jul 2016 21:30:48 -0700 Subject: updated docs to reflect change in img-rounded class --- docs/content/figures.md | 4 ++-- docs/content/images.md | 20 ++++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) (limited to 'docs/content') diff --git a/docs/content/figures.md b/docs/content/figures.md index d57270518..36f431d19 100644 --- a/docs/content/figures.md +++ b/docs/content/figures.md @@ -10,7 +10,7 @@ Use the included `.figure` , `.figure-img` and `.figure-caption` classes to prov {% example html %}
- +
A caption for the above image.

{% endexample %} @@ -19,7 +19,7 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl {% example html %}
- +
A caption for the above image.

{% endexample %} diff --git a/docs/content/images.md b/docs/content/images.md index 905ff337b..b710fcfc5 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -34,13 +34,13 @@ In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately s Add classes to an `` element to easily style images in any project.
- +
{% highlight html %} - + {% endhighlight %} @@ -50,31 +50,31 @@ Add classes to an `` element to easily style images in any project. Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering).
- - + +
{% highlight html %} - - + + {% endhighlight %}
- +
{% highlight html %} - + {% endhighlight %}

- +

{% highlight html %}
- +
{% endhighlight %} -- cgit v1.2.3 From 91992ac70a7fe9e9411580d0857132f57be59e5d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 8 Sep 2016 23:21:40 -0700 Subject: Add new border utils - Move and rename .img-rounded to .rounded, .img-circle to .rounded-circle - Add new .rounded-{direction} utils - New docs pages for border utils with TBD comments for the border property - Removes most image examples for rounding from the content/images docs in favor of new docs page --- docs/content/images.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'docs/content') diff --git a/docs/content/images.md b/docs/content/images.md index b710fcfc5..706badf7b 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -29,19 +29,15 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically. {% endcallout %} -## Image shapes +## Image thumbnails -Add classes to an `` element to easily style images in any project. +In addition to our [border-radius utilities]({{ site.baseurl }}/utilities/borders/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
- -
{% highlight html %} - - {% endhighlight %} -- cgit v1.2.3 From 3dc4b3647ce2b27b0216fe8103253ffe9633fde9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 26 Sep 2016 00:54:10 -0700 Subject: Rename pull-*-{left|right} classes to .float-*-left and .float-*-right --- docs/content/images.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/content') diff --git a/docs/content/images.md b/docs/content/images.md index 706badf7b..26a4ff7a4 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -46,13 +46,13 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/utilities/border Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering).
- - + +
{% highlight html %} - - + + {% endhighlight %}
-- cgit v1.2.3 From 7bf868a709d5e278048f7fe5fd62d2fa9365d5bc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 2 Oct 2016 18:19:47 -0700 Subject: v4: Social meta tags (#20825) * descriptions for getting started pages * descriptions for layout * add content page descriptions * more descriptions, updates to some existing ones * correct site url * add social stuff to config for twitter cards * add twitter meta tags; use large image for homepage and regular card for all others * add the assets * more site config * more social shiz to partial, remove existing meta for the partial, remove page title from homepage for simpler if statements --- docs/content/code.md | 1 + docs/content/figures.md | 3 ++- docs/content/images.md | 1 + docs/content/reboot.md | 1 + docs/content/tables.md | 1 + docs/content/typography.md | 1 + 6 files changed, 7 insertions(+), 1 deletion(-) (limited to 'docs/content') diff --git a/docs/content/code.md b/docs/content/code.md index 79059a1d1..a62e0845f 100644 --- a/docs/content/code.md +++ b/docs/content/code.md @@ -1,6 +1,7 @@ --- layout: docs title: Code +description: Documentation and examples for displaying inline and multiline blocks of code with Bootstrap. group: content --- diff --git a/docs/content/figures.md b/docs/content/figures.md index d57270518..c24b5b2c8 100644 --- a/docs/content/figures.md +++ b/docs/content/figures.md @@ -1,10 +1,11 @@ --- layout: docs title: Figures +description: Documentation and examples for displaying related images and text with the figure component in Bootstrap. group: content --- -Anytime you need to display a piece of content—like an image—with an optional caption, consider using a `
`. +Anytime you need to display a piece of content—like an image with an optional caption, consider using a `
`. Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `
` and `
` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `` to make it responsive. diff --git a/docs/content/images.md b/docs/content/images.md index f21010f0f..48a5dd3d4 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -1,6 +1,7 @@ --- layout: docs title: Images +description: Documentation and examples for styling images with Bootstrap. group: content --- diff --git a/docs/content/reboot.md b/docs/content/reboot.md index a6815e9db..1d93cc9ce 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -1,6 +1,7 @@ --- layout: docs title: Reboot +description: Documentation and examples for Reboot, Bootstrap's collection of element-specific CSS that builds on Normalize.css. group: content redirect_from: "/content/" --- diff --git a/docs/content/tables.md b/docs/content/tables.md index 3b4d58b36..f1f32166d 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -1,6 +1,7 @@ --- layout: docs title: Tables +description: Documentation and examples for styling tables with Bootstrap. group: content --- diff --git a/docs/content/typography.md b/docs/content/typography.md index a59f50347..f9b5913d2 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -1,6 +1,7 @@ --- layout: docs title: Typography +description: Documentation and examples for Bootstrap typography, including global settings, body text, lists, and more. group: content --- -- cgit v1.2.3 From 18b14d3c9f8cb4f0aa056709487ebbe27a3ebfa4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 2 Oct 2016 18:27:53 -0700 Subject: Document that all table styles are inherited (#20699) --- docs/content/tables.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/content') diff --git a/docs/content/tables.md b/docs/content/tables.md index f1f32166d..f2741b734 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -14,7 +14,7 @@ Due to the widespread use of tables across third-party widgets like calendars an ## Examples -Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. +Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. **All table styles are inherited in Bootstrap 4**, meaning any nested tables will be styled in the same manner as the parent. {% example html %} -- cgit v1.2.3 From 2e69dfa8c1679238579ef6f5ec85deb755e4fb6d Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Tue, 4 Oct 2016 02:55:59 +1000 Subject: Fix broken/redirected links, moving to HTTPS where possible. (#20557) --- docs/content/figures.md | 2 +- docs/content/images.md | 2 +- docs/content/reboot.md | 4 ++-- docs/content/tables.md | 2 +- docs/content/typography.md | 6 +++--- 5 files changed, 8 insertions(+), 8 deletions(-) (limited to 'docs/content') diff --git a/docs/content/figures.md b/docs/content/figures.md index c24b5b2c8..e1f8f93d2 100644 --- a/docs/content/figures.md +++ b/docs/content/figures.md @@ -16,7 +16,7 @@ Use the included `.figure` , `.figure-img` and `.figure-caption` classes to prov {% endexample %} -Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/components/utilities/#text-alignment). +Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/utilities/typography/#text-alignment). {% example html %}
diff --git a/docs/content/images.md b/docs/content/images.md index 48a5dd3d4..de8677f3d 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -48,7 +48,7 @@ Add classes to an `` element to easily style images in any project. ## Aligning images -Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.m-x-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering). +Align images with the [helper float classes]({{ site.baseurl }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/utilities/typography/#text-alignment). `block`-level images can be centered using [the `.m-x-auto` margin utility class]({{ site.baseurl }}/spacing/#horizontal-centering).
diff --git a/docs/content/reboot.md b/docs/content/reboot.md index 1d93cc9ce..5cb4be175 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -321,7 +321,7 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o `[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. {% endcallout %} -To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/components/utilities/#invisible-content) instead. +To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/utilities/invisible-content/) instead. ## Click delay optimization for touch @@ -335,4 +335,4 @@ To address this problem in IE11 and Microsoft Edge on desktop, as well as IE11 o In the case of old iOS versions (prior to 9.3), the suggested approach is to use additional scripts such as [FastClick](https://github.com/ftlabs/fastclick) to explicitly work around the delay. -For further details, see the compatibility table for [suppressing 300ms delay for touchscreen interactions](http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay). +For further details, see the compatibility table for [suppressing 300ms delay for touchscreen interactions](https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay). diff --git a/docs/content/tables.md b/docs/content/tables.md index f2741b734..0e40c0ef7 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -576,7 +576,7 @@ Use contextual classes to color table rows or individual cells. {% endhighlight %} -Regular table background variants are not available with the inverse table, however, you may use [text or background utilities](/components/utilities/#contextual-colors-and-backgrounds) to achieve similar styles. +Regular table background variants are not available with the inverse table, however, you may use [text or background utilities]({{ site.baseurl }}/utilities/colors/) to achieve similar styles.

diff --git a/docs/content/typography.md b/docs/content/typography.md index f9b5913d2..1d5c3589d 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -5,7 +5,7 @@ description: Documentation and examples for Bootstrap typography, including glob group: content --- -Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes]({{ site.baseurl }}/components/utilities/). +Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes]({{ site.baseurl }}/utilities/). ## Contents @@ -16,7 +16,7 @@ Bootstrap includes simple and easily customized typography for headings, body te Bootstrap sets basic global display, typography, and link styles. Specifically, we: -- Use a [native font stack](/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device. +- Use a [native font stack]({{ site.baseurl }}/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device. - Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the ``. - Set the global link color via `$link-color` and apply link underlines only on `:hover`. - Use `$body-bg` to set a `background-color` on the `` (`#fff` by default). @@ -150,7 +150,7 @@ While not shown above, feel free to use `` and `` in HTML5. `` is meant ## Text utilities -Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/components/utilities/#text-alignment). +Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/utilities/typography/#text-alignment). ## Abbreviations -- cgit v1.2.3

` through `

`, are available.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading