Skip to content
GitLab
Commit 821f7193 authored by Mark Otto's avatar Mark Otto Committed by GitHub
Browse files

Merge pull request #20684 from twbs/v4-utils 

v4: The Utilities Update
parents b6fe0d45 6c867667
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 243 additions and 215 deletions
+243 -215
dist/css/bootstrap-flex.css
+ 104
- 88
View file @ 821f7193
......@@ -660,15 +660,10 @@ mark,
.img-fluid, .carousel-inner > .carousel-item > img,
.carousel-inner > .carousel-item > a > img {
display: block;
max-width: 100%;
height: auto;
}
.img-rounded {
border-radius: 0.3rem;
}
.img-thumbnail {
padding: 0.25rem;
background-color: #fff;
......@@ -677,15 +672,10 @@ mark,
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
display: inline-block;
max-width: 100%;
height: auto;
}
.img-circle {
border-radius: 50%;
}
.figure {
display: inline-block;
}
......@@ -6014,7 +6004,6 @@ button.close {
}
.bg-primary {
color: #fff !important;
background-color: #0275d8 !important;
}
......@@ -6023,7 +6012,6 @@ a.bg-primary:focus, a.bg-primary:hover {
}
.bg-success {
color: #fff !important;
background-color: #5cb85c !important;
}
......@@ -6032,7 +6020,6 @@ a.bg-success:focus, a.bg-success:hover {
}
.bg-info {
color: #fff !important;
background-color: #5bc0de !important;
}
......@@ -6041,7 +6028,6 @@ a.bg-info:focus, a.bg-info:hover {
}
.bg-warning {
color: #fff !important;
background-color: #f0ad4e !important;
}
......@@ -6050,7 +6036,6 @@ a.bg-warning:focus, a.bg-warning:hover {
}
.bg-danger {
color: #fff !important;
background-color: #d9534f !important;
}
......@@ -6059,7 +6044,6 @@ a.bg-danger:focus, a.bg-danger:hover {
}
.bg-inverse {
color: #fff !important;
background-color: #373a3c !important;
}
......@@ -6067,6 +6051,34 @@ a.bg-inverse:focus, a.bg-inverse:hover {
background-color: #1f2021 !important;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-top {
border-top-right-radius: 0.25rem;
border-top-left-radius: 0.25rem;
}
.rounded-right {
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.rounded-bottom {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.rounded-left {
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0.25rem;
}
.rounded-circle {
border-radius: 50%;
}
.clearfix::after {
content: "";
display: table;
......@@ -6562,62 +6574,62 @@ a.bg-inverse:focus, a.bg-inverse:hover {
}
}
.pull-xs-left {
.float-xs-left {
float: left !important;
}
.pull-xs-right {
.float-xs-right {
float: right !important;
}
.pull-xs-none {
.float-xs-none {
float: none !important;
}
@media (min-width: 544px) {
.pull-sm-left {
.float-sm-left {
float: left !important;
}
.pull-sm-right {
.float-sm-right {
float: right !important;
}
.pull-sm-none {
.float-sm-none {
float: none !important;
}
}
@media (min-width: 768px) {
.pull-md-left {
.float-md-left {
float: left !important;
}
.pull-md-right {
.float-md-right {
float: right !important;
}
.pull-md-none {
.float-md-none {
float: none !important;
}
}
@media (min-width: 992px) {
.pull-lg-left {
.float-lg-left {
float: left !important;
}
.pull-lg-right {
.float-lg-right {
float: right !important;
}
.pull-lg-none {
.float-lg-none {
float: none !important;
}
}
@media (min-width: 1200px) {
.pull-xl-left {
.float-xl-left {
float: left !important;
}
.pull-xl-right {
.float-xl-right {
float: right !important;
}
.pull-xl-none {
.float-xl-none {
float: none !important;
}
}
......@@ -6646,247 +6658,247 @@ a.bg-inverse:focus, a.bg-inverse:hover {
width: 100% !important;
}
.m-x-auto {
.mx-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.m-a-0 {
.m-0 {
margin: 0 0 !important;
}
.m-t-0 {
.mt-0 {
margin-top: 0 !important;
}
.m-r-0 {
.mr-0 {
margin-right: 0 !important;
}
.m-b-0 {
.mb-0 {
margin-bottom: 0 !important;
}
.m-l-0 {
.ml-0 {
margin-left: 0 !important;
}
.m-x-0 {
.mx-0 {
margin-right: 0 !important;
margin-left: 0 !important;
}
.m-y-0 {
.my-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.m-a-1 {
.m-1 {
margin: 1rem 1rem !important;
}
.m-t-1 {
.mt-1 {
margin-top: 1rem !important;
}
.m-r-1 {
.mr-1 {
margin-right: 1rem !important;
}
.m-b-1 {
.mb-1 {
margin-bottom: 1rem !important;
}
.m-l-1 {
.ml-1 {
margin-left: 1rem !important;
}
.m-x-1 {
.mx-1 {
margin-right: 1rem !important;
margin-left: 1rem !important;
}
.m-y-1 {
.my-1 {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
.m-a-2 {
.m-2 {
margin: 1.5rem 1.5rem !important;
}
.m-t-2 {
.mt-2 {
margin-top: 1.5rem !important;
}
.m-r-2 {
.mr-2 {
margin-right: 1.5rem !important;
}
.m-b-2 {
.mb-2 {
margin-bottom: 1.5rem !important;
}
.m-l-2 {
.ml-2 {
margin-left: 1.5rem !important;
}
.m-x-2 {
.mx-2 {
margin-right: 1.5rem !important;
margin-left: 1.5rem !important;
}
.m-y-2 {
.my-2 {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
.m-a-3 {
.m-3 {
margin: 3rem 3rem !important;
}
.m-t-3 {
.mt-3 {
margin-top: 3rem !important;
}
.m-r-3 {
.mr-3 {
margin-right: 3rem !important;
}
.m-b-3 {
.mb-3 {
margin-bottom: 3rem !important;
}
.m-l-3 {
.ml-3 {
margin-left: 3rem !important;
}
.m-x-3 {
.mx-3 {
margin-right: 3rem !important;
margin-left: 3rem !important;
}
.m-y-3 {
.my-3 {
margin-top: 3rem !important;
margin-bottom: 3rem !important;
}
.p-a-0 {
.p-0 {
padding: 0 0 !important;
}
.p-t-0 {
.pt-0 {
padding-top: 0 !important;
}
.p-r-0 {
.pr-0 {
padding-right: 0 !important;
}
.p-b-0 {
.pb-0 {
padding-bottom: 0 !important;
}
.p-l-0 {
.pl-0 {
padding-left: 0 !important;
}
.p-x-0 {
.px-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.p-y-0 {
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.p-a-1 {
.p-1 {
padding: 1rem 1rem !important;
}
.p-t-1 {
.pt-1 {
padding-top: 1rem !important;
}
.p-r-1 {
.pr-1 {
padding-right: 1rem !important;
}
.p-b-1 {
.pb-1 {
padding-bottom: 1rem !important;
}
.p-l-1 {
.pl-1 {
padding-left: 1rem !important;
}
.p-x-1 {
.px-1 {
padding-right: 1rem !important;
padding-left: 1rem !important;
}
.p-y-1 {
.py-1 {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.p-a-2 {
.p-2 {
padding: 1.5rem 1.5rem !important;
}
.p-t-2 {
.pt-2 {
padding-top: 1.5rem !important;
}
.p-r-2 {
.pr-2 {
padding-right: 1.5rem !important;
}
.p-b-2 {
.pb-2 {
padding-bottom: 1.5rem !important;
}
.p-l-2 {
.pl-2 {
padding-left: 1.5rem !important;
}
.p-x-2 {
.px-2 {
padding-right: 1.5rem !important;
padding-left: 1.5rem !important;
}
.p-y-2 {
.py-2 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
.p-a-3 {
.p-3 {
padding: 3rem 3rem !important;
}
.p-t-3 {
.pt-3 {
padding-top: 3rem !important;
}
.p-r-3 {
.pr-3 {
padding-right: 3rem !important;
}
.p-b-3 {
.pb-3 {
padding-bottom: 3rem !important;
}
.p-l-3 {
.pl-3 {
padding-left: 3rem !important;
}
.p-x-3 {
.px-3 {
padding-right: 3rem !important;
padding-left: 3rem !important;
}
.p-y-3 {
.py-3 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
......@@ -6997,6 +7009,10 @@ a.bg-inverse:focus, a.bg-inverse:hover {
font-style: italic;
}
.text-white {
color: #fff !important;
}
.text-muted {
color: #818a91 !important;
}
......
dist/css/bootstrap-flex.css.map
+321 bytes (+0%)
View file @ 821f7193
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
dist/css/bootstrap-flex.min.css
+ 1
- 1
View file @ 821f7193
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/css/bootstrap-flex.min.css.map
+95 bytes (+0%)
View file @ 821f7193
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
dist/css/bootstrap.css
+ 104
- 88
View file @ 821f7193
......@@ -664,15 +664,10 @@ dl.row > dd + dt {
.img-fluid, .carousel-inner > .carousel-item > img,
.carousel-inner > .carousel-item > a > img {
display: block;
max-width: 100%;
height: auto;
}
.img-rounded {
border-radius: 0.3rem;
}
.img-thumbnail {
padding: 0.25rem;
background-color: #fff;
......@@ -681,15 +676,10 @@ dl.row > dd + dt {
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
display: inline-block;
max-width: 100%;
height: auto;
}
.img-circle {
border-radius: 50%;
}
.figure {
display: inline-block;
}
......@@ -5787,7 +5777,6 @@ button.close {
}
.bg-primary {
color: #fff !important;
background-color: #0275d8 !important;
}
......@@ -5796,7 +5785,6 @@ a.bg-primary:focus, a.bg-primary:hover {
}
.bg-success {
color: #fff !important;
background-color: #5cb85c !important;
}
......@@ -5805,7 +5793,6 @@ a.bg-success:focus, a.bg-success:hover {
}
.bg-info {
color: #fff !important;
background-color: #5bc0de !important;
}
......@@ -5814,7 +5801,6 @@ a.bg-info:focus, a.bg-info:hover {
}
.bg-warning {
color: #fff !important;
background-color: #f0ad4e !important;
}
......@@ -5823,7 +5809,6 @@ a.bg-warning:focus, a.bg-warning:hover {
}
.bg-danger {
color: #fff !important;
background-color: #d9534f !important;
}
......@@ -5832,7 +5817,6 @@ a.bg-danger:focus, a.bg-danger:hover {
}
.bg-inverse {
color: #fff !important;
background-color: #373a3c !important;
}
......@@ -5840,6 +5824,34 @@ a.bg-inverse:focus, a.bg-inverse:hover {
background-color: #1f2021 !important;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-top {
border-top-right-radius: 0.25rem;
border-top-left-radius: 0.25rem;
}
.rounded-right {
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.rounded-bottom {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.rounded-left {
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0.25rem;
}
.rounded-circle {
border-radius: 50%;
}
.clearfix::after {
content: "";
display: table;
......@@ -5858,62 +5870,62 @@ a.bg-inverse:focus, a.bg-inverse:hover {
display: inline !important;
}
.pull-xs-left {
.float-xs-left {
float: left !important;
}
.pull-xs-right {
.float-xs-right {
float: right !important;
}
.pull-xs-none {
.float-xs-none {
float: none !important;
}
@media (min-width: 544px) {
.pull-sm-left {
.float-sm-left {
float: left !important;
}
.pull-sm-right {
.float-sm-right {
float: right !important;
}
.pull-sm-none {
.float-sm-none {
float: none !important;
}
}
@media (min-width: 768px) {
.pull-md-left {
.float-md-left {
float: left !important;
}
.pull-md-right {
.float-md-right {
float: right !important;
}
.pull-md-none {
.float-md-none {
float: none !important;
}
}
@media (min-width: 992px) {
.pull-lg-left {
.float-lg-left {
float: left !important;
}
.pull-lg-right {
.float-lg-right {
float: right !important;
}
.pull-lg-none {
.float-lg-none {
float: none !important;
}
}
@media (min-width: 1200px) {
.pull-xl-left {
.float-xl-left {
float: left !important;
}
.pull-xl-right {
.float-xl-right {
float: right !important;
}
.pull-xl-none {
.float-xl-none {
float: none !important;
}
}
......@@ -5942,247 +5954,247 @@ a.bg-inverse:focus, a.bg-inverse:hover {
width: 100% !important;
}
.m-x-auto {
.mx-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.m-a-0 {
.m-0 {
margin: 0 0 !important;
}
.m-t-0 {
.mt-0 {
margin-top: 0 !important;
}
.m-r-0 {
.mr-0 {
margin-right: 0 !important;
}
.m-b-0 {
.mb-0 {
margin-bottom: 0 !important;
}
.m-l-0 {
.ml-0 {
margin-left: 0 !important;
}
.m-x-0 {
.mx-0 {
margin-right: 0 !important;
margin-left: 0 !important;
}
.m-y-0 {
.my-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.m-a-1 {
.m-1 {
margin: 1rem 1rem !important;
}
.m-t-1 {
.mt-1 {
margin-top: 1rem !important;
}
.m-r-1 {
.mr-1 {
margin-right: 1rem !important;
}
.m-b-1 {
.mb-1 {
margin-bottom: 1rem !important;
}
.m-l-1 {
.ml-1 {
margin-left: 1rem !important;
}
.m-x-1 {
.mx-1 {
margin-right: 1rem !important;
margin-left: 1rem !important;
}
.m-y-1 {
.my-1 {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
.m-a-2 {
.m-2 {
margin: 1.5rem 1.5rem !important;
}
.m-t-2 {
.mt-2 {
margin-top: 1.5rem !important;
}
.m-r-2 {
.mr-2 {
margin-right: 1.5rem !important;
}
.m-b-2 {
.mb-2 {
margin-bottom: 1.5rem !important;
}
.m-l-2 {
.ml-2 {
margin-left: 1.5rem !important;
}
.m-x-2 {
.mx-2 {
margin-right: 1.5rem !important;
margin-left: 1.5rem !important;
}
.m-y-2 {
.my-2 {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
.m-a-3 {
.m-3 {
margin: 3rem 3rem !important;
}
.m-t-3 {
.mt-3 {
margin-top: 3rem !important;
}
.m-r-3 {
.mr-3 {
margin-right: 3rem !important;
}
.m-b-3 {
.mb-3 {
margin-bottom: 3rem !important;
}
.m-l-3 {
.ml-3 {
margin-left: 3rem !important;
}
.m-x-3 {
.mx-3 {
margin-right: 3rem !important;
margin-left: 3rem !important;
}
.m-y-3 {
.my-3 {
margin-top: 3rem !important;
margin-bottom: 3rem !important;
}
.p-a-0 {
.p-0 {
padding: 0 0 !important;
}
.p-t-0 {
.pt-0 {
padding-top: 0 !important;
}
.p-r-0 {
.pr-0 {
padding-right: 0 !important;
}
.p-b-0 {
.pb-0 {
padding-bottom: 0 !important;
}
.p-l-0 {
.pl-0 {
padding-left: 0 !important;
}
.p-x-0 {
.px-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.p-y-0 {
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.p-a-1 {
.p-1 {
padding: 1rem 1rem !important;
}
.p-t-1 {
.pt-1 {
padding-top: 1rem !important;
}
.p-r-1 {
.pr-1 {
padding-right: 1rem !important;
}
.p-b-1 {
.pb-1 {
padding-bottom: 1rem !important;
}
.p-l-1 {
.pl-1 {
padding-left: 1rem !important;
}
.p-x-1 {
.px-1 {
padding-right: 1rem !important;
padding-left: 1rem !important;
}
.p-y-1 {
.py-1 {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.p-a-2 {
.p-2 {
padding: 1.5rem 1.5rem !important;
}
.p-t-2 {
.pt-2 {
padding-top: 1.5rem !important;
}
.p-r-2 {
.pr-2 {
padding-right: 1.5rem !important;
}
.p-b-2 {
.pb-2 {
padding-bottom: 1.5rem !important;
}
.p-l-2 {
.pl-2 {
padding-left: 1.5rem !important;
}
.p-x-2 {
.px-2 {
padding-right: 1.5rem !important;
padding-left: 1.5rem !important;
}
.p-y-2 {
.py-2 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
.p-a-3 {
.p-3 {
padding: 3rem 3rem !important;
}
.p-t-3 {
.pt-3 {
padding-top: 3rem !important;
}
.p-r-3 {
.pr-3 {
padding-right: 3rem !important;
}
.p-b-3 {
.pb-3 {
padding-bottom: 3rem !important;
}
.p-l-3 {
.pl-3 {
padding-left: 3rem !important;
}
.p-x-3 {
.px-3 {
padding-right: 3rem !important;
padding-left: 3rem !important;
}
.p-y-3 {
.py-3 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
......@@ -6293,6 +6305,10 @@ a.bg-inverse:focus, a.bg-inverse:hover {
font-style: italic;
}
.text-white {
color: #fff !important;
}
.text-muted {
color: #818a91 !important;
}
......
dist/css/bootstrap.css.map
+321 bytes (+0%)
View file @ 821f7193
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
dist/css/bootstrap.min.css
+ 1
- 1
View file @ 821f7193
This diff is collapsed.
dist/css/bootstrap.min.css.map
+95 bytes (+0%)
View file @ 821f7193
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
docs/_data/nav.yml
+ 1
- 1
View file @ 821f7193
......@@ -51,10 +51,10 @@
- title: Scrollspy
- title: Tag
- title: Tooltips
- title: Utilities
- title: Utilities
pages:
- title: Borders
- title: Clearfix
- title: Close icon
- title: Colors
......
docs/_includes/nav-home.html
+ 2
- 2
View file @ 821f7193
<header class="navbar navbar-light navbar-static-top bd-navbar">
<div class="container">
{% comment %}
<nav class="nav navbar-nav pull-xs-right">
<nav class="nav navbar-nav float-xs-right">
<div class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v{{ site.current_version }}
......@@ -27,7 +27,7 @@
<nav>
<div class="clearfix">
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button>
<button class="navbar-toggler float-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
Bootstrap
</a>
......
docs/assets/css/docs.min.css.map
+0 bytes (+0%)
View file @ 821f7193
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
docs/components/alerts.md
+ 1
- 1
View file @ 821f7193
......@@ -61,7 +61,7 @@ Alerts can also contain additional HTML elements like headings and paragraphs.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<p class="m-b-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
{% endexample %}
......
docs/components/card.md
+ 2
- 2
View file @ 821f7193
......@@ -231,7 +231,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
{% example html %}
<div class="card text-xs-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs pull-xs-left">
<ul class="nav nav-tabs card-header-tabs float-xs-left">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
......@@ -254,7 +254,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
{% example html %}
<div class="card text-xs-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills pull-xs-left">
<ul class="nav nav-pills card-header-pills float-xs-left">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
......
docs/components/collapse.md
+ 3
- 3
View file @ 821f7193
......@@ -46,7 +46,7 @@ Extend the default collapse behavior to create an accordion.
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="m-b-0">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
......@@ -58,7 +58,7 @@ Extend the default collapse behavior to create an accordion.
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="m-b-0">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
......@@ -70,7 +70,7 @@ Extend the default collapse behavior to create an accordion.
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="m-b-0">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
......
docs/components/forms.md
+ 1
- 1
View file @ 821f7193
......@@ -846,7 +846,7 @@ Add other states to your custom forms with our validation classes.
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
<div class="form-group has-danger m-b-0">
<div class="form-group has-danger mb-0">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
......
docs/components/jumbotron.md
+ 1
- 1
View file @ 821f7193
......@@ -13,7 +13,7 @@ A lightweight, flexible component that can optionally extend the entire viewport
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="m-y-2">
<hr class="my-2">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
......
docs/components/list-group.md
+ 3
- 3
View file @ 821f7193
......@@ -32,15 +32,15 @@ Add tags to any list group item to show unread counts, activity, etc.
{% example html %}
<ul class="list-group">
<li class="list-group-item">
<span class="tag tag-default tag-pill pull-xs-right">14</span>
<span class="tag tag-default tag-pill float-xs-right">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="tag tag-default tag-pill pull-xs-right">2</span>
<span class="tag tag-default tag-pill float-xs-right">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="tag tag-default tag-pill pull-xs-right">1</span>
<span class="tag tag-default tag-pill float-xs-right">1</span>
Morbi leo risus
</li>
</ul>
......
docs/components/navbar.md
+ 6
- 6
View file @ 821f7193
......@@ -48,7 +48,7 @@ Here's an example of all the sub-components included in a default, light navbar:
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
......@@ -65,7 +65,7 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
</nav>
<nav class="navbar navbar-light bg-faded">
<h1 class="navbar-brand m-b-0">Navbar</h1>
<h1 class="navbar-brand mb-0">Navbar</h1>
</nav>
{% endexample %}
......@@ -130,7 +130,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-info" type="submit">Search</button>
</form>
......@@ -151,7 +151,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-secondary" type="submit">Search</button>
</form>
......@@ -172,7 +172,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
......@@ -244,7 +244,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse p-a-1">
<div class="bg-inverse p-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
......
docs/content/figures.md
+ 2
- 2
View file @ 821f7193
......@@ -11,7 +11,7 @@ Use the included `.figure` , `.figure-img` and `.figure-caption` classes to prov
{% example html %}
<figure class="figure">
<img data-src="holder.js/400x300" class="figure-img img-fluid img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
{% endexample %}
......@@ -20,7 +20,7 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl
{% example html %}
<figure class="figure">
<img data-src="holder.js/400x300" class="figure-img img-fluid img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
</figure>
{% endexample %}
docs/content/images.md
+ 11
- 15
View file @ 821f7193
......@@ -30,52 +30,48 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an
In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
{% endcallout %}
## Image shapes
## Image thumbnails
Add classes to an `<img>` element to easily style images in any project.
In addition to our [border-radius utilities]({{ site.baseurl }}/utilities/borders/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
<img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
</div>
{% highlight html %}
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
{% endhighlight %}
## Aligning images
Align images with the [helper float classes]({{ site.baseurl }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/utilities/typography/#text-alignment). `block`-level images can be centered using [the `.m-x-auto` margin utility class]({{ site.baseurl }}/spacing/#horizontal-centering).
Align images with the [helper float classes]({{ site.baseurl }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/utilities/typography/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/utilities/spacing/#horizontal-centering).
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="img-rounded pull-xs-left" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="img-rounded pull-xs-right" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="rounded float-xs-left" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="rounded float-xs-right" alt="A generic square placeholder image with rounded corners">
</div>
{% highlight html %}
<img src="..." class="img-rounded pull-xs-left" alt="...">
<img src="..." class="img-rounded pull-xs-right" alt="...">
<img src="..." class="rounded float-xs-left" alt="...">
<img src="..." class="rounded float-xs-right" alt="...">
{% endhighlight %}
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="img-rounded m-x-auto d-block" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="rounded mx-auto d-block" alt="A generic square placeholder image with rounded corners">
</div>
{% highlight html %}
<img src="..." class="img-rounded m-x-auto d-block" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
{% endhighlight %}
<div class="bd-example bd-example-images">
<div class="text-xs-center">
<img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners">
</div>
</div>
{% highlight html %}
<div class="text-xs-center">
<img src="..." class="img-rounded" alt="...">
<img src="..." class="rounded" alt="...">
</div>
{% endhighlight %}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment