src/scss/bootstrap-4.0.0-alpha.6/docs/assets/scss/_featurettes.scss

   1 .bd-featurette {
   2   padding-top: 3rem;
   3   padding-bottom: 3rem;
   4   font-size: 1rem;
   5   line-height: 1.5;
   6   color: #555;
   7   text-align: center;
   8   background-color: #fff;
   9   border-top: 1px solid #eee;
  10
  11   .highlight {
  12     text-align: left;
  13   }
  14
  15   .lead {
  16     margin-right: auto;
  17     margin-bottom: 2rem;
  18     margin-left: auto;
  19     font-size: 1rem;
  20     text-align: center;
  21   }
  22
  23   @include media-breakpoint-up(sm) {
  24     text-align: left;
  25   }
  26
  27   @include media-breakpoint-up(md) {
  28     .col-sm-6:first-child {
  29       padding-right: ($grid-gutter-width-base * 1.5);
  30     };
  31     .col-sm-6:last-child {
  32       padding-left: ($grid-gutter-width-base * 1.5);
  33     }
  34   }
  35 }
  36
  37 .bd-featurette-title {
  38   margin-bottom: .5rem;
  39   font-size: 2rem;
  40   font-weight: normal;
  41   color: #333;
  42   text-align: center;
  43 }
  44
  45 .half-rule {
  46   width: 6rem;
  47   margin: 2.5rem auto;
  48
  49   @include media-breakpoint-up(sm) {
  50     margin-right: 0;
  51     margin-left: 0;
  52   }
  53 }
  54 .bd-featurette h4 {
  55   margin-top: 1rem;
  56   margin-bottom: .5rem;
  57   font-weight: normal;
  58   color: #333;
  59 }
  60 .bd-featurette-img {
  61   display: block;
  62   margin-bottom: 1.25rem;
  63   color: #333;
  64 }
  65 .bd-featurette-img:hover {
  66   color: $brand-primary;
  67   text-decoration: none;
  68 }
  69 .bd-featurette-img img {
  70   display: block;
  71   margin-bottom: 1rem;
  72 }
  73
  74 @media (min-width: 480px) {
  75   .bd-featurette .img-fluid {
  76     margin-top: 2rem;
  77   }
  78 }
  79 @media (min-width: 768px) {
  80   .bd-featurette {
  81     padding-top: 6rem;
  82     padding-bottom: 6rem;
  83   }
  84   .bd-featurette-title {
  85     font-size: 2.5rem;
  86
  87     + .lead {
  88       font-size: 1.5rem;
  89     }
  90   }
  91   .bd-featurette .lead {
  92     max-width: 80%;
  93   }
  94   .bd-featurette .img-fluid {
  95     margin-top: 0;
  96   }
  97 }