src/scss/bootstrap-4.0.0-alpha.6/docs/examples/carousel/carousel.css

   1 /* GLOBAL STYLES
   2 -------------------------------------------------- */
   3 /* Padding below the footer and lighter body text */
   4
   5 body {
   6   padding-top: 3rem;
   7   padding-bottom: 3rem;
   8   color: #5a5a5a;
   9 }
  10
  11
  12 /* CUSTOMIZE THE CAROUSEL
  13 -------------------------------------------------- */
  14
  15 /* Carousel base class */
  16 .carousel {
  17   margin-bottom: 4rem;
  18 }
  19 /* Since positioning the image, we need to help out the caption */
  20 .carousel-caption {
  21   z-index: 10;
  22   bottom: 3rem;
  23 }
  24
  25 /* Declare heights because of positioning of img element */
  26 .carousel-item {
  27   height: 32rem;
  28   background-color: #777;
  29 }
  30 .carousel-item > img {
  31   position: absolute;
  32   top: 0;
  33   left: 0;
  34   min-width: 100%;
  35   height: 32rem;
  36 }
  37
  38
  39 /* MARKETING CONTENT
  40 -------------------------------------------------- */
  41
  42 /* Center align the text within the three columns below the carousel */
  43 .marketing .col-lg-4 {
  44   margin-bottom: 1.5rem;
  45   text-align: center;
  46 }
  47 .marketing h2 {
  48   font-weight: normal;
  49 }
  50 .marketing .col-lg-4 p {
  51   margin-right: .75rem;
  52   margin-left: .75rem;
  53 }
  54
  55
  56 /* Featurettes
  57 ------------------------- */
  58
  59 .featurette-divider {
  60   margin: 5rem 0; /* Space out the Bootstrap <hr> more */
  61 }
  62
  63 /* Thin out the marketing headings */
  64 .featurette-heading {
  65   font-weight: 300;
  66   line-height: 1;
  67   letter-spacing: -.05rem;
  68 }
  69
  70
  71 /* RESPONSIVE CSS
  72 -------------------------------------------------- */
  73
  74 @media (min-width: 40em) {
  75   /* Bump up size of carousel content */
  76   .carousel-caption p {
  77     margin-bottom: 1.25rem;
  78     font-size: 1.25rem;
  79     line-height: 1.4;
  80   }
  81
  82   .featurette-heading {
  83     font-size: 50px;
  84   }
  85 }
  86
  87 @media (min-width: 62em) {
  88   .featurette-heading {
  89     margin-top: 7rem;
  90   }
  91 }