mirror of
https://github.com/twbs/bootstrap.git
synced 2024-09-24 12:07:18 +00:00
Mark Otto
GitHub
commit
821f719367
192
dist/css/bootstrap-flex.css
vendored
192
dist/css/bootstrap-flex.css
vendored
@ -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;
|
||||
}
|
||||
|
||||
2
dist/css/bootstrap-flex.css.map
vendored
2
dist/css/bootstrap-flex.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap-flex.min.css
vendored
2
dist/css/bootstrap-flex.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap-flex.min.css.map
vendored
2
dist/css/bootstrap-flex.min.css.map
vendored
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
||||
|
||||
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css.map
vendored
2
dist/css/bootstrap.min.css.map
vendored
File diff suppressed because one or more lines are too long
@ -51,10 +51,10 @@
|
||||
- title: Scrollspy
|
||||
- title: Tag
|
||||
- title: Tooltips
|
||||
- title: Utilities
|
||||
|
||||
- title: Utilities
|
||||
pages:
|
||||
- title: Borders
|
||||
- title: Clearfix
|
||||
- title: Close icon
|
||||
- title: Colors
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<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>
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"../../../scss/mixins/_clearfix.scss",
|
||||
"../../../scss/mixins/_grid-framework.scss",
|
||||
"../../../scss/mixins/_grid.scss",
|
||||
"../../../scss/mixins/_pulls.scss",
|
||||
"../../../scss/mixins/_float.scss",
|
||||
"../scss/_booticon.scss",
|
||||
"../scss/_nav.scss",
|
||||
"../scss/_masthead.scss",
|
||||
|
||||
@ -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 %}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -169,7 +169,7 @@ For quoting blocks of content from another source within your document. Wrap `<b
|
||||
|
||||
{% example html %}
|
||||
<blockquote class="blockquote">
|
||||
<p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</blockquote>
|
||||
{% endexample %}
|
||||
|
||||
@ -179,7 +179,7 @@ Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the
|
||||
|
||||
{% example html %}
|
||||
<blockquote class="blockquote">
|
||||
<p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
{% endexample %}
|
||||
@ -190,7 +190,7 @@ Add `.blockquote-reverse` for a blockquote with right-aligned content.
|
||||
|
||||
{% example html %}
|
||||
<blockquote class="blockquote blockquote-reverse">
|
||||
<p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
{% endexample %}
|
||||
|
||||
192
docs/dist/css/bootstrap-flex.css
vendored
192
docs/dist/css/bootstrap-flex.css
vendored
@ -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;
|
||||
}
|
||||
|
||||
2
docs/dist/css/bootstrap-flex.css.map
vendored
2
docs/dist/css/bootstrap-flex.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap-flex.min.css
vendored
2
docs/dist/css/bootstrap-flex.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap-flex.min.css.map
vendored
2
docs/dist/css/bootstrap-flex.min.css.map
vendored
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
||||
|
||||
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css.map
vendored
2
docs/dist/css/bootstrap.min.css.map
vendored
File diff suppressed because one or more lines are too long
@ -102,7 +102,7 @@
|
||||
|
||||
<footer class="text-muted">
|
||||
<div class="container">
|
||||
<p class="pull-xs-right">
|
||||
<p class="float-xs-right">
|
||||
<a href="#">Back to top</a>
|
||||
</p>
|
||||
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
|
||||
|
||||
@ -164,7 +164,7 @@
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<p class="pull-xs-right"><a href="#">Back to top</a></p>
|
||||
<p class="float-xs-right"><a href="#">Back to top</a></p>
|
||||
<p>© 2014 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
||||
</footer>
|
||||
|
||||
|
||||
@ -24,13 +24,13 @@
|
||||
<button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation"></button>
|
||||
<a class="navbar-brand" href="#">Project name</a>
|
||||
<div id="navbar">
|
||||
<nav class="nav navbar-nav pull-xs-left">
|
||||
<nav class="nav navbar-nav float-xs-left">
|
||||
<a class="nav-item nav-link" href="#">Dashboard</a>
|
||||
<a class="nav-item nav-link" href="#">Settings</a>
|
||||
<a class="nav-item nav-link" href="#">Profile</a>
|
||||
<a class="nav-item nav-link" href="#">Help</a>
|
||||
</nav>
|
||||
<form class="pull-xs-right">
|
||||
<form class="float-xs-right">
|
||||
<input type="text" class="form-control" placeholder="Search...">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<div class="container">
|
||||
<div class="header clearfix">
|
||||
<nav>
|
||||
<ul class="nav nav-pills pull-xs-right">
|
||||
<ul class="nav nav-pills float-xs-right">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
<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>
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
<div class="row row-offcanvas row-offcanvas-right">
|
||||
|
||||
<div class="col-xs-12 col-sm-9">
|
||||
<p class="pull-xs-right hidden-sm-up">
|
||||
<p class="float-xs-right hidden-sm-up">
|
||||
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
|
||||
</p>
|
||||
<div class="jumbotron">
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
<body>
|
||||
|
||||
<button class="btn btn-secondary pull-xs-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
|
||||
<button class="btn btn-secondary float-xs-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
|
||||
<button class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button>
|
||||
<button class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button>
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<button class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button>
|
||||
<button class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button>
|
||||
|
||||
<button class="btn btn-secondary pull-xs-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
|
||||
<button class="btn btn-secondary float-xs-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
|
||||
|
||||
<button class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
|
||||
</div>
|
||||
|
||||
@ -46,7 +46,7 @@ Media components can also be nested.
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
<div class="media m-t-2">
|
||||
<div class="media mt-2">
|
||||
<a class="media-left" href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
@ -124,7 +124,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
|
||||
<!-- Nested media object -->
|
||||
<div class="media m-t-2">
|
||||
<div class="media mt-2">
|
||||
<a class="media-left" href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
</a>
|
||||
@ -132,7 +132,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
|
||||
<h4 class="media-heading">Nested media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
<!-- Nested media object -->
|
||||
<div class="media m-t-2">
|
||||
<div class="media mt-2">
|
||||
<div class="media-left">
|
||||
<a href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
@ -146,7 +146,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
|
||||
</div>
|
||||
</div>
|
||||
<!-- Nested media object -->
|
||||
<div class="media m-t-2">
|
||||
<div class="media mt-2">
|
||||
<div class="media-left">
|
||||
<a href="#">
|
||||
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
|
||||
@ -159,7 +159,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media m-t-2">
|
||||
<li class="media mt-2">
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Media heading</h4>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
|
||||
|
||||
@ -184,9 +184,9 @@ Dropped entirely for the new card component.
|
||||
|
||||
### Utilities
|
||||
|
||||
- Added `.pull-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.pull-xs-left` and `.pull-xs-right`.
|
||||
- Added `.float-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.float-xs-left` and `.float-xs-right`.
|
||||
- Added responsive variations to our text alignment classes `.text-{xs,sm,md,lg,xl}-{left,center,right}` and removed the redundant `.text-{left,center,right}` utilities as they are the same as the `xs` variation.
|
||||
- Dropped `.center-block` for the new `.m-x-auto` class.
|
||||
- Dropped `.center-block` for the new `.mx-auto` class.
|
||||
|
||||
### Vendor prefix mixins
|
||||
Bootstrap 3's [vendor prefix](http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm) mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use [Autoprefixer](https://github.com/postcss/autoprefixer), they're no longer necessary.
|
||||
|
||||
29
docs/utilities/borders.md
Normal file
29
docs/utilities/borders.md
Normal file
@ -0,0 +1,29 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Borders
|
||||
group: utilities
|
||||
---
|
||||
|
||||
Use border utilities to quickly style the `border` and `border-radius` of an element. Great for images, buttons, or any other element.
|
||||
|
||||
## Border-radius
|
||||
|
||||
Add classes to an element to easily round its corners.
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
<img data-src="holder.js/100x100" class="rounded" alt="Example rounded image">
|
||||
<img data-src="holder.js/100x100" class="rounded-top" alt="Example top rounded image">
|
||||
<img data-src="holder.js/100x100" class="rounded-right" alt="Example right rounded image">
|
||||
<img data-src="holder.js/100x100" class="rounded-bottom" alt="Example bottom rounded image">
|
||||
<img data-src="holder.js/100x100" class="rounded-left" alt="Example left rounded image">
|
||||
<img data-src="holder.js/100x100" class="rounded-circle" alt="Completely round image">
|
||||
</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">
|
||||
{% endhighlight %}
|
||||
@ -33,7 +33,7 @@ The following example shows how the clearfix can be used. Without the clearfix t
|
||||
|
||||
{% example html %}
|
||||
<div class="bg-info clearfix">
|
||||
<button class="btn btn-secondary pull-xs-left">Example Button pulled left</button>
|
||||
<button class="btn btn-secondary pull-xs-right">Example Button pullred right</button>
|
||||
<button class="btn btn-secondary float-xs-left">Example Button pulled left</button>
|
||||
<button class="btn btn-secondary float-xs-right">Example Button pullred right</button>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
@ -13,9 +13,10 @@ Convey meaning through color with a handful of emphasis utility classes. These m
|
||||
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p class="text-white">Etiam porta sem malesuada ultricies vehicula.</p>
|
||||
{% endexample %}
|
||||
|
||||
Contextual text classes also work well on anchors with the provided hover and focus states.
|
||||
Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` class has no link styling.**
|
||||
|
||||
{% example html %}
|
||||
<a href="#" class="text-muted">Muted link</a>
|
||||
@ -26,15 +27,15 @@ Contextual text classes also work well on anchors with the provided hover and fo
|
||||
<a href="#" class="text-danger">Danger link</a>
|
||||
{% endexample %}
|
||||
|
||||
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
|
||||
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.
|
||||
|
||||
{% example html %}
|
||||
<div class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
|
||||
<div class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
|
||||
<div class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
|
||||
<div class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</div>
|
||||
<div class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</div>
|
||||
<div class="bg-inverse">Cras mattis consectetur purus sit amet fermentum.</div>
|
||||
<div class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
|
||||
<div class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
|
||||
<div class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
|
||||
<div class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</div>
|
||||
<div class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</div>
|
||||
<div class="bg-inverse text-white">Cras mattis consectetur purus sit amet fermentum.</div>
|
||||
{% endexample %}
|
||||
|
||||
{% callout info %}
|
||||
|
||||
@ -46,25 +46,25 @@ Aspect ratios can be customized with modifier classes.
|
||||
|
||||
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system.
|
||||
|
||||
Two similar non-responsive Sass mixins (`pull-left` and `pull-right`) are also available.
|
||||
Two similar non-responsive Sass mixins (`float-left` and `float-right`) are also available.
|
||||
|
||||
{% example html %}
|
||||
<div class="pull-xs-left">Float left on all viewport sizes</div><br>
|
||||
<div class="pull-xs-right">Float right on all viewport sizes</div><br>
|
||||
<div class="pull-xs-none">Don't float on all viewport sizes</div><br>
|
||||
<div class="float-xs-left">Float left on all viewport sizes</div><br>
|
||||
<div class="float-xs-right">Float right on all viewport sizes</div><br>
|
||||
<div class="float-xs-none">Don't float on all viewport sizes</div><br>
|
||||
|
||||
<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div><br>
|
||||
<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div><br>
|
||||
<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div><br>
|
||||
<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
|
||||
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
|
||||
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
|
||||
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
|
||||
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
|
||||
{% endexample %}
|
||||
|
||||
{% highlight scss %}
|
||||
// Related simple non-responsive mixins
|
||||
.element {
|
||||
@include pull-left;
|
||||
@include float-left;
|
||||
}
|
||||
.another-element {
|
||||
@include pull-right;
|
||||
@include float-right;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
@ -6,7 +6,7 @@ group: utilities
|
||||
|
||||
Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`.
|
||||
|
||||
The classes are named using the format: `{property}-{sides}-{size}`
|
||||
The classes are named using the format: `{property}{sides}-{size}`
|
||||
|
||||
Where *property* is one of:
|
||||
|
||||
@ -35,35 +35,35 @@ Where *size* is one of:
|
||||
Here are some representative examples of these classes:
|
||||
|
||||
{% highlight scss %}
|
||||
.m-t-0 {
|
||||
.mt-0 {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.m-l-1 {
|
||||
.ml-1 {
|
||||
margin-left: $spacer-x !important;
|
||||
}
|
||||
|
||||
.p-x-2 {
|
||||
.px-2 {
|
||||
padding-left: ($spacer-x * 1.5) !important;
|
||||
padding-right: ($spacer-x * 1.5) !important;
|
||||
}
|
||||
|
||||
.p-a-3 {
|
||||
.p-3 {
|
||||
padding: ($spacer-y * 3) ($spacer-x * 3) !important;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
### Horizontal centering
|
||||
Additionally, Bootstrap also includes an `.m-x-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`.
|
||||
Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="m-x-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
|
||||
<div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
|
||||
Centered element
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="m-x-auto" style="width: 200px;">
|
||||
<div class="mx-auto" style="width: 200px;">
|
||||
Centered element
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -6,13 +6,9 @@
|
||||
// which weren't expecting the images within themselves to be involuntarily resized.
|
||||
// See also https://github.com/twbs/bootstrap/issues/18178
|
||||
.img-fluid {
|
||||
@include img-fluid();
|
||||
@include img-fluid;
|
||||
}
|
||||
|
||||
// Rounded corners
|
||||
.img-rounded {
|
||||
@include border-radius($border-radius-lg);
|
||||
}
|
||||
|
||||
// Image thumbnails
|
||||
.img-thumbnail {
|
||||
@ -24,12 +20,7 @@
|
||||
@include box-shadow($thumbnail-box-shadow);
|
||||
|
||||
// Keep them at most 100% wide
|
||||
@include img-fluid(inline-block);
|
||||
}
|
||||
|
||||
// Perfect circle
|
||||
.img-circle {
|
||||
border-radius: 50%;
|
||||
@include img-fluid;
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
@ -51,4 +51,4 @@
|
||||
// @import "mixins/navbar-align";
|
||||
@import "mixins/grid-framework";
|
||||
@import "mixins/grid";
|
||||
@import "mixins/pulls";
|
||||
@import "mixins/float";
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
@import "utilities/background";
|
||||
@import "utilities/borders";
|
||||
@import "utilities/clearfix";
|
||||
@import "utilities/display";
|
||||
@import "utilities/flex";
|
||||
@import "utilities/pulls";
|
||||
@import "utilities/float";
|
||||
@import "utilities/screenreaders";
|
||||
@import "utilities/spacing";
|
||||
@import "utilities/text";
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
|
||||
@mixin bg-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
color: #fff !important;
|
||||
background-color: $color !important;
|
||||
}
|
||||
a#{$parent} {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@mixin pull-left {
|
||||
@mixin float-left {
|
||||
float: left !important;
|
||||
}
|
||||
@mixin pull-right {
|
||||
@mixin float-right {
|
||||
float: right !important;
|
||||
}
|
||||
@ -7,10 +7,12 @@
|
||||
//
|
||||
// Keep images from scaling beyond the width of their parents.
|
||||
|
||||
@mixin img-fluid($display: block) {
|
||||
display: $display;
|
||||
max-width: 100%; // Part 1: Set a maximum relative to the parent
|
||||
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
|
||||
@mixin img-fluid {
|
||||
// Part 1: Set a maximum relative to the parent
|
||||
max-width: 100%;
|
||||
// Part 2: Override the height to auto, otherwise images will be stretched
|
||||
// when setting a width and height attribute on the img element.
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
30
scss/utilities/_borders.scss
Normal file
30
scss/utilities/_borders.scss
Normal file
@ -0,0 +1,30 @@
|
||||
//
|
||||
// Border-width
|
||||
//
|
||||
|
||||
// TBD...?
|
||||
|
||||
|
||||
//
|
||||
// Border-radius
|
||||
//
|
||||
|
||||
.rounded {
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
.rounded-top {
|
||||
@include border-top-radius($border-radius);
|
||||
}
|
||||
.rounded-right {
|
||||
@include border-right-radius($border-radius);
|
||||
}
|
||||
.rounded-bottom {
|
||||
@include border-bottom-radius($border-radius);
|
||||
}
|
||||
.rounded-left {
|
||||
@include border-left-radius($border-radius);
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
13
scss/utilities/_float.scss
Normal file
13
scss/utilities/_float.scss
Normal file
@ -0,0 +1,13 @@
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.float-#{$breakpoint}-left {
|
||||
@include float-left();
|
||||
}
|
||||
.float-#{$breakpoint}-right {
|
||||
@include float-right();
|
||||
}
|
||||
.float-#{$breakpoint}-none {
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.pull-#{$breakpoint}-left {
|
||||
@include pull-left();
|
||||
}
|
||||
.pull-#{$breakpoint}-right {
|
||||
@include pull-right();
|
||||
}
|
||||
.pull-#{$breakpoint}-none {
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
// Margin and Padding
|
||||
|
||||
.m-x-auto {
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
@ -14,18 +14,18 @@
|
||||
$length-x: map-get($lengths, x);
|
||||
$length-y: map-get($lengths, y);
|
||||
|
||||
.#{$abbrev}-a-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
|
||||
.#{$abbrev}-t-#{$size} { #{$prop}-top: $length-y !important; }
|
||||
.#{$abbrev}-r-#{$size} { #{$prop}-right: $length-x !important; }
|
||||
.#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; }
|
||||
.#{$abbrev}-l-#{$size} { #{$prop}-left: $length-x !important; }
|
||||
.#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
|
||||
.#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; }
|
||||
.#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; }
|
||||
.#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }
|
||||
.#{$abbrev}l-#{$size} { #{$prop}-left: $length-x !important; }
|
||||
|
||||
// Axes
|
||||
.#{$abbrev}-x-#{$size} {
|
||||
.#{$abbrev}x-#{$size} {
|
||||
#{$prop}-right: $length-x !important;
|
||||
#{$prop}-left: $length-x !important;
|
||||
}
|
||||
.#{$abbrev}-y-#{$size} {
|
||||
.#{$abbrev}y-#{$size} {
|
||||
#{$prop}-top: $length-y !important;
|
||||
#{$prop}-bottom: $length-y !important;
|
||||
}
|
||||
|
||||
@ -32,6 +32,10 @@
|
||||
|
||||
// Contextual colors
|
||||
|
||||
.text-white {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
@include text-emphasis-variant('.text-muted', $text-muted);
|
||||
|
||||
@include text-emphasis-variant('.text-primary', $brand-primary);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user