mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-28 10:24:19 +01:00
Use the example shortcode in more places
Now, it's safe to do use it since it covers more cases
This commit is contained in:
XhmikosR
parent
764184fc43
commit
052f72d360
@ -352,28 +352,9 @@ Cards include a few options for working with images. Choose from appending "imag
|
||||
|
||||
Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="card mb-3">
|
||||
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
{{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
{{< example >}}
|
||||
<div class="card mb-3">
|
||||
<img src="..." class="card-img-top" alt="...">
|
||||
{{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
@ -386,9 +367,9 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
<img src="..." class="card-img-bottom" alt="...">
|
||||
{{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
|
||||
</div>
|
||||
```
|
||||
{{< /example >}}
|
||||
|
||||
### Image overlays
|
||||
|
||||
|
||||
@ -10,13 +10,9 @@ toc: true
|
||||
|
||||
Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
|
||||
|
||||
<div class="bd-example">
|
||||
{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
|
||||
</div>
|
||||
|
||||
```html
|
||||
<img src="..." class="img-fluid" alt="Responsive image">
|
||||
```
|
||||
{{< example >}}
|
||||
{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout warning >}}
|
||||
##### SVG images and Internet Explorer
|
||||
@ -28,47 +24,28 @@ In Internet Explorer 10 and 11, SVG images with `.img-fluid` are disproportionat
|
||||
|
||||
In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
|
||||
</div>
|
||||
|
||||
```html
|
||||
<img src="..." alt="..." class="img-thumbnail">
|
||||
```
|
||||
{{< example >}}
|
||||
{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
|
||||
{{< /example >}}
|
||||
|
||||
## Aligning images
|
||||
|
||||
Align images with the [helper float classes]({{< docsref "/utilities/float" >}}) or [text alignment classes]({{< docsref "/utilities/text#text-alignment" >}}). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{< docsref "/utilities/spacing#horizontal-centering" >}}).
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
{{< placeholder width="200" height="200" class="rounded float-left" >}}
|
||||
{{< placeholder width="200" height="200" class="rounded float-right" >}}
|
||||
</div>
|
||||
{{< example >}}
|
||||
{{< placeholder width="200" height="200" class="rounded float-left" >}}
|
||||
{{< placeholder width="200" height="200" class="rounded float-right" >}}
|
||||
{{< /example >}}
|
||||
|
||||
```html
|
||||
<img src="..." class="rounded float-left" alt="...">
|
||||
<img src="..." class="rounded float-right" alt="...">
|
||||
```
|
||||
{{< example >}}
|
||||
{{< placeholder width="200" height="200" class="rounded mx-auto d-block" >}}
|
||||
{{< /example >}}
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
{{< placeholder width="200" height="200" class="rounded mx-auto d-block" >}}
|
||||
</div>
|
||||
|
||||
```html
|
||||
<img src="..." class="rounded mx-auto d-block" alt="...">
|
||||
```
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
<div class="text-center">
|
||||
{{< placeholder width="200" height="200" class="rounded" >}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
{{< example >}}
|
||||
<div class="text-center">
|
||||
<img src="..." class="rounded" alt="...">
|
||||
{{< placeholder width="200" height="200" class="rounded" >}}
|
||||
</div>
|
||||
```
|
||||
{{< /example >}}
|
||||
|
||||
|
||||
## Picture
|
||||
|
||||
@ -12,8 +12,7 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
|
||||
|
||||
**New to or unfamiliar with flexbox?** [Read this CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
@ -28,7 +27,6 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent `.container`.
|
||||
|
||||
@ -123,8 +121,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp
|
||||
|
||||
For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
@ -147,7 +144,6 @@ For example, here are two grid layouts that apply to every device and viewport,
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Equal-width multi-line
|
||||
|
||||
@ -155,8 +151,7 @@ Create equal-width columns that span multiple lines by inserting a `.w-100` wher
|
||||
|
||||
There was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbug-11) that prevented this from working without an explicit `flex-basis` or `border`. There are workarounds for older browser versions, but they shouldn't be necessary if your target browsers don't fall into the buggy versions.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">col</div>
|
||||
@ -167,14 +162,12 @@ There was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbu
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Setting one column width
|
||||
|
||||
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
@ -200,14 +193,12 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Variable width content
|
||||
|
||||
Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col col-lg-2">
|
||||
@ -233,7 +224,6 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
## Responsive classes
|
||||
|
||||
@ -243,8 +233,7 @@ Bootstrap's grid includes five tiers of predefined classes for building complex
|
||||
|
||||
For grids that are the same from the smallest of devices to the largest, use the `.col` and `.col-*` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `.col`.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">col</div>
|
||||
@ -258,14 +247,12 @@ For grids that are the same from the smallest of devices to the largest, use the
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Stacked to horizontal
|
||||
|
||||
Using a single set of `.col-sm-*` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`).
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8">col-sm-8</div>
|
||||
@ -278,14 +265,12 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Mix and match
|
||||
|
||||
Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
|
||||
<div class="row">
|
||||
@ -307,7 +292,6 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Gutters
|
||||
|
||||
@ -330,8 +314,7 @@ Use the responsive `.row-cols-*` classes to quickly set the number of columns th
|
||||
|
||||
Use these row columns classes to quickly create basic grid layouts or to control your card layouts.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row row-cols-2">
|
||||
<div class="col">Column</div>
|
||||
@ -341,10 +324,8 @@ Use these row columns classes to quickly create basic grid layouts or to control
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row row-cols-3">
|
||||
<div class="col">Column</div>
|
||||
@ -354,10 +335,8 @@ Use these row columns classes to quickly create basic grid layouts or to control
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row row-cols-4">
|
||||
<div class="col">Column</div>
|
||||
@ -367,10 +346,8 @@ Use these row columns classes to quickly create basic grid layouts or to control
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row row-cols-4">
|
||||
<div class="col">Column</div>
|
||||
@ -380,10 +357,8 @@ Use these row columns classes to quickly create basic grid layouts or to control
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
|
||||
<div class="col">Column</div>
|
||||
@ -393,7 +368,6 @@ Use these row columns classes to quickly create basic grid layouts or to control
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
You can also use the accompanying Sass mixin, `row-cols()`:
|
||||
|
||||
@ -415,8 +389,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns. **
|
||||
|
||||
### Vertical alignment
|
||||
|
||||
<div class="bd-example-row bd-example-row-flex-cols">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row bd-example-row-flex-cols" >}}
|
||||
<div class="container">
|
||||
<div class="row align-items-start">
|
||||
<div class="col">
|
||||
@ -453,10 +426,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns. **
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
<div class="bd-example-row bd-example-row-flex-cols">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row bd-example-row-flex-cols" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col align-self-start">
|
||||
@ -471,12 +442,10 @@ Use flexbox alignment utilities to vertically and horizontally align columns. **
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Horizontal alignment
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row justify-content-start">
|
||||
<div class="col-4">
|
||||
@ -520,7 +489,6 @@ Use flexbox alignment utilities to vertically and horizontally align columns. **
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### No gutters
|
||||
|
||||
@ -545,21 +513,18 @@ Here's the source code for creating these styles. Note that column overrides are
|
||||
|
||||
In practice, here's how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="row no-gutters">
|
||||
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
|
||||
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Column wrapping
|
||||
|
||||
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-9">.col-9</div>
|
||||
@ -568,14 +533,12 @@ If more than 12 columns are placed within a single row, each group of extra colu
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Column breaks
|
||||
|
||||
Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `.row`s, but not every implementation method can account for this.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
|
||||
@ -589,12 +552,10 @@ Breaking columns to a new line in flexbox requires a small hack: add an element
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
You may also apply this break at specific breakpoints with our [responsive display utilities]({{< docsref "/utilities/display" >}}).
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
|
||||
@ -608,7 +569,6 @@ You may also apply this break at specific breakpoints with our [responsive displ
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
## Reordering
|
||||
|
||||
@ -616,8 +576,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
|
||||
|
||||
Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `12` across all five grid tiers.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
@ -632,12 +591,10 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 13` (`order: $columns + 1`), respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col order-last">
|
||||
@ -652,7 +609,6 @@ There are also responsive `.order-first` and `.order-last` classes that change t
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Offsetting columns
|
||||
|
||||
@ -662,8 +618,7 @@ You can offset grid columns in two ways: our responsive `.offset-` grid classes
|
||||
|
||||
Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
@ -678,12 +633,10 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{< docsref "/examples/grid" >}}).
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
|
||||
@ -695,14 +648,12 @@ In addition to column clearing at responsive breakpoints, you may need to reset
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
#### Margin utilities
|
||||
|
||||
With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to force sibling columns away from one another.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
@ -718,14 +669,12 @@ With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
## Nesting
|
||||
|
||||
To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
|
||||
|
||||
<div class="bd-example-row">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-9">
|
||||
@ -742,7 +691,6 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
## Sass mixins
|
||||
|
||||
|
||||
@ -13,27 +13,23 @@ Use border utilities to add or remove an element's borders. Choose from all bord
|
||||
|
||||
### Additive
|
||||
|
||||
<div class="bd-example-border-utils">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-border-utils">}}
|
||||
<span class="border"></span>
|
||||
<span class="border-top"></span>
|
||||
<span class="border-right"></span>
|
||||
<span class="border-bottom"></span>
|
||||
<span class="border-left"></span>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Subtractive
|
||||
|
||||
<div class="bd-example-border-utils bd-example-border-utils-0">
|
||||
{{< example >}}
|
||||
{{< example class="bd-example-border-utils bd-example-border-utils-0" >}}
|
||||
<span class="border-0"></span>
|
||||
<span class="border-top-0"></span>
|
||||
<span class="border-right-0"></span>
|
||||
<span class="border-bottom-0"></span>
|
||||
<span class="border-left-0"></span>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
## Border color
|
||||
|
||||
@ -52,38 +48,22 @@ Change the border color using utilities built on our theme colors.
|
||||
|
||||
Add classes to an element to easily round its corners.
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-right" title="Example right rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-left" title="Example left rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
|
||||
{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image (overrides rounding applied elsewhere)" >}}
|
||||
</div>
|
||||
|
||||
```html
|
||||
<img src="..." alt="..." class="rounded">
|
||||
<img src="..." alt="..." class="rounded-top">
|
||||
<img src="..." alt="..." class="rounded-right">
|
||||
<img src="..." alt="..." class="rounded-bottom">
|
||||
<img src="..." alt="..." class="rounded-left">
|
||||
<img src="..." alt="..." class="rounded-circle">
|
||||
<img src="..." alt="..." class="rounded-pill">
|
||||
<img src="..." alt="..." class="rounded-0">
|
||||
```
|
||||
{{< example>}}
|
||||
{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-right" title="Example right rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-left" title="Example left rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
|
||||
{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image (overrides rounding applied elsewhere)" >}}
|
||||
{{< /example >}}
|
||||
|
||||
## Sizes
|
||||
|
||||
Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius.
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
{{< placeholder width="75" height="75" class="rounded-sm" title="Example small rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-lg" title="Example large rounded image" >}}
|
||||
</div>
|
||||
|
||||
```html
|
||||
<img src="..." alt="..." class="rounded-sm">
|
||||
<img src="..." alt="..." class="rounded-lg">
|
||||
```
|
||||
{{< example >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-sm" title="Example small rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-lg" title="Example large rounded image" >}}
|
||||
{{< /example >}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user