mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-13 01:08:58 +01:00
0e920ce3f4
With the current docs directory setup, I'm making too many mistakes and have to manually address path changes and directory moves on deploy. This makes for a frustrating experience developing locally and shipping releases. With this PR, we're basically back to the same setup from v3—duplicating the dist directory into our docs directory. Not the most ideal, but very straightforward for me as the release manager.
76 lines
2.5 KiB
Markdown
76 lines
2.5 KiB
Markdown
---
|
|
layout: docs
|
|
title: Borders
|
|
description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
|
|
group: utilities
|
|
redirect_from: "/docs/4.1/utilities/"
|
|
toc: true
|
|
---
|
|
|
|
## Border
|
|
|
|
Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.
|
|
|
|
### Additive
|
|
|
|
<div class="bd-example-border-utils">
|
|
{% capture example %}
|
|
<span class="border"></span>
|
|
<span class="border-top"></span>
|
|
<span class="border-right"></span>
|
|
<span class="border-bottom"></span>
|
|
<span class="border-left"></span>
|
|
{% endcapture %}
|
|
{% include example.html content=example %}
|
|
</div>
|
|
|
|
### Subtractive
|
|
|
|
<div class="bd-example-border-utils bd-example-border-utils-0">
|
|
{% capture example %}
|
|
<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>
|
|
{% endcapture %}
|
|
{% include example.html content=example %}
|
|
</div>
|
|
|
|
## Border color
|
|
|
|
Change the border color using utilities built on our theme colors.
|
|
|
|
<div class="bd-example-border-utils">
|
|
{% capture example %}
|
|
{% for color in site.data.theme-colors %}
|
|
<span class="border border-{{ color.name }}"></span>{% endfor %}
|
|
<span class="border border-white"></span>
|
|
{% endcapture %}
|
|
{% include example.html content=example %}
|
|
</div>
|
|
|
|
## Border-radius
|
|
|
|
Add classes to an element to easily round its corners.
|
|
|
|
<div class="bd-example bd-example-images">
|
|
<img data-src="holder.js/75x75" class="rounded" alt="Example rounded image">
|
|
<img data-src="holder.js/75x75" class="rounded-top" alt="Example top rounded image">
|
|
<img data-src="holder.js/75x75" class="rounded-right" alt="Example right rounded image">
|
|
<img data-src="holder.js/75x75" class="rounded-bottom" alt="Example bottom rounded image">
|
|
<img data-src="holder.js/75x75" class="rounded-left" alt="Example left rounded image">
|
|
<img data-src="holder.js/75x75" class="rounded-circle" alt="Completely round image">
|
|
<img data-src="holder.js/75x75" class="rounded-0" alt="Example non-rounded image (overrides rounding applied elsewhere)">
|
|
</div>
|
|
|
|
{% highlight 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-0">
|
|
{% endhighlight %}
|