Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove background-colors example and show only the code. #27209

Merged
merged 3 commits into from
Sep 17, 2018
Merged

Remove background-colors example and show only the code. #27209

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a9b9c6e
Remove background-colors example and show only the code.
XhmikosR Sep 11, 2018
3118192
Update copy
mdo Sep 16, 2018
b65abef
Merge branch 'v4-dev' into v4-dev-xmr-docs-gradients
XhmikosR Sep 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions site/docs/4.1/utilities/colors.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,10 @@ Similar to the contextual text color classes, easily set the background of an el

## Background gradient

When `$enable-gradients` is set to true, you'll be able to use `.bg-gradient-` utility classes. **By default, `$enable-gradients` is disabled and the example below is intentionally broken.** This is done for easier customization from the moment you start using Bootstrap. [Learn about our Sass options]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/theming/#sass-options) to enable these classes and more.
When `$enable-gradients` is set to `true` (default is `false`), you can use `.bg-gradient-` utility classes. [Learn about our Sass options]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/theming/#sass-options) to enable these classes and more.

{% capture example %}
{% for color in site.data.theme-colors %}
<div class="p-3 mb-2 bg-gradient-{{ color.name }} {% if color.name == "light" or color.name == "warning" %}text-dark{% else %}text-white{% endif %}">.bg-gradient-{{ color.name }}</div>{% endfor %}
{% endcapture %}
{% include example.html content=example %}
- `.bg-gradient-{{ color.name }}`{% endfor %}

{% capture callout %}
#### Dealing with specificity
Expand Down