Skip to content

Added .display-block, .display-inline-block, .display-inline #19665

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

Closed
wants to merge 4 commits into from
Closed

Added .display-block, .display-inline-block, .display-inline #19665

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d835171
Removed remaining document + sass references to .center-block
Apr 2, 2016
904e1d7
Added display classes per #19343
Apr 2, 2016
0ce46ac
Added !important to utility display classes, changing naming conventi…
Apr 3, 2016
8340e45
Converted .center-blocks to .m-x-autos (and .d-blocks when necessary)
Apr 3, 2016
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
6 changes: 0 additions & 6 deletions docs/assets/scss/_component-examples.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,12 +299,6 @@

// Helpers
.bd-example > {
.center-block:not(img) {
max-width: 200px;
padding: .5rem;
background-color: #eee;
}

.bg-primary,
.bg-success,
.bg-info,
Expand Down
4 changes: 2 additions & 2 deletions docs/content/images.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,11 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili
{% endhighlight %}

<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="img-rounded center-block" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The uses of .center-block need to be replaced with .m-x-auto (and adding .display-block might be necessary too).

</div>

{% highlight html %}
<img src="..." class="img-rounded center-block" alt="...">
<img src="..." class="img-rounded" alt="...">
{% endhighlight %}

<div class="bd-example bd-example-images">
Expand Down
6 changes: 3 additions & 3 deletions docs/examples/carousel/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ <h2 class="featurette-heading">First featurette heading. <span class="text-muted
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
<img class="featurette-image img-fluid" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>

Expand All @@ -141,7 +141,7 @@ <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted"
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5 pull-md-7">
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
<img class="featurette-image img-fluid" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>

Expand All @@ -153,7 +153,7 @@ <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Ch
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
<img class="featurette-image img-fluid" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ <h2 class="bd-featurette-title">Official Bootstrap Themes.</h2>
<a href="{{ site.themes }}" class="btn btn-bs btn-outline">Browse themes</a>
</p>

<img class="img-fluid center-block" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
<img class="img-fluid" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
</div>
</div>

Expand Down
3 changes: 2 additions & 1 deletion scss/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
@import "utilities/background";
@import "utilities/clearfix";
@import "utilities/display";
@import "utilities/flex";
@import "utilities/pulls";
@import "utilities/screenreaders";
@import "utilities/spacing";
@import "utilities/text";
@import "utilities/visibility";
@import "utilities/flex";
13 changes: 13 additions & 0 deletions scss/utilities/_display.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
//
// Display utilities
//

.display-block {
display: block;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Utilities should use !important

}
.display-inline-block {
display: inline-block;
}
.display-inline {
display: inline;
}