Skip to content

Commit 45722e9

Browse files
committed
Drop .blockquote-reverse, replace with text utils, and redesign blockquote to not have a border
1 parent 4554d74 commit 45722e9

File tree

3 files changed

+10
-25
lines changed

3 files changed

+10
-25
lines changed

docs/4.0/content/typography.md

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -202,12 +202,19 @@ Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the
202202
</blockquote>
203203
{% endexample %}
204204

205-
### Reverse layout
205+
### Alignment
206206

207-
Add `.blockquote-reverse` for a blockquote with right-aligned content.
207+
Use text utilities as needed to change the alignment of your blockquote.
208208

209209
{% example html %}
210-
<blockquote class="blockquote blockquote-reverse">
210+
<blockquote class="blockquote text-center">
211+
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
212+
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
213+
</blockquote>
214+
{% endexample %}
215+
216+
{% example html %}
217+
<blockquote class="blockquote text-right">
211218
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
212219
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
213220
</blockquote>

scss/_type.scss

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -108,10 +108,8 @@ mark,
108108

109109
// Blockquotes
110110
.blockquote {
111-
padding: ($spacer / 2) $spacer;
112111
margin-bottom: $spacer;
113112
font-size: $blockquote-font-size;
114-
border-left: $blockquote-border-width solid $blockquote-border-color;
115113
}
116114

117115
.blockquote-footer {
@@ -123,21 +121,3 @@ mark,
123121
content: "\2014 \00A0"; // em dash, nbsp
124122
}
125123
}
126-
127-
// Opposite alignment of blockquote
128-
.blockquote-reverse {
129-
padding-right: $spacer;
130-
padding-left: 0;
131-
text-align: right;
132-
border-right: $blockquote-border-width solid $blockquote-border-color;
133-
border-left: 0;
134-
}
135-
136-
.blockquote-reverse .blockquote-footer {
137-
&::before {
138-
content: "";
139-
}
140-
&::after {
141-
content: "\00A0 \2014"; // nbsp, em dash
142-
}
143-
}

scss/_variables.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -279,8 +279,6 @@ $text-muted: $gray-600 !default;
279279

280280
$blockquote-small-color: $gray-600 !default;
281281
$blockquote-font-size: ($font-size-base * 1.25) !default;
282-
$blockquote-border-color: $gray-200 !default;
283-
$blockquote-border-width: .25rem !default;
284282

285283
$hr-border-color: rgba($black,.1) !default;
286284
$hr-border-width: $border-width !default;

0 commit comments

Comments
 (0)