42 lines
1.6 KiB
CSS
42 lines
1.6 KiB
CSS
/* === Add vertical spacing to Bootstrap containers === */
|
|
/* Desktops */
|
|
@media (min-width:768px) {
|
|
.container { padding-top: 2%; padding-bottom: 2% }
|
|
.col-md-6 { padding: 2% 4%; flex: 0 0 47%; width: 47% }
|
|
.col-md-6:nth-child(1) { margin-right: 3%; }
|
|
.col-md-6:nth-child(2) { margin-left: 3% }
|
|
.col-md-4 { padding-top: 1%; padding-bottom:1%; flex: 0 0 30.5%; width: 30.5% }
|
|
.col-md-4:nth-child(2) { margin-left: 4%; margin-right: 4% }
|
|
.col-md-3 { padding-top: 1%; padding-bottom:1%; flex: 0 0 23.3%; width: 23.3% }
|
|
.col-md-3:nth-child(2) { margin-left: 2.1%; margin-right: 1.1% }
|
|
.col-md-3:nth-child(3) { margin-left: 1.1%; margin-right: 2.1%
|
|
}
|
|
}
|
|
|
|
/* Mobiles */
|
|
@media (max-width:767px) {
|
|
.container { padding-left: 7%; padding-right: 7%; padding-top: 8%; padding-bottom: 8% }
|
|
.col-md-6, .col-md-3, .col-md-4 { padding-top: 5%; margin-bottom: 6% }
|
|
}
|
|
|
|
/* Some background-color styles */
|
|
.bg-gray-light { background-color: #f0f5f4 }
|
|
.bg-beige-light { background-color: #fde8cd }
|
|
.bg-green-light { background-color:#81ecec }
|
|
.bg-salmon-light { background-color: #F7CACA }
|
|
.bg-purple-dark { background-color:#6b5b95 }
|
|
.bg-crimson-dark { background-color:#af0069 }
|
|
.bg-blue-dark { background-color:#3c40c6 }
|
|
.bg-black-dark { background-color:#000 }
|
|
|
|
/* If background dark, set text color white */
|
|
.container .row [class*="-dark"] * { color: #fff }
|
|
|
|
/* Images in Bootsrap columns - some space beneath */
|
|
.container img { margin-bottom: 18px }
|
|
.col-md-6 img, .col-md-4 img, .col-md-3 img { margin-bottom: 14px }
|
|
|
|
/* Some image effects*/
|
|
.drop-shadow { box-shadow: 8px 10px 8px #888; }
|
|
.soft-corner { border-radius: 15px }
|