static/scss/bootstrap-4.0.0-alpha.6/docs/examples/narrow-jumbotron/narrow-jumbotron.css

   1 /* Space out content a bit */
   2 body {
   3   padding-top: 1.5rem;
   4   padding-bottom: 1.5rem;
   5 }
   6
   7 /* Everything but the jumbotron gets side spacing for mobile first views */
   8 .header,
   9 .marketing,
  10 .footer {
  11   padding-right: 1rem;
  12   padding-left: 1rem;
  13 }
  14
  15 /* Custom page header */
  16 .header {
  17   padding-bottom: 1rem;
  18   border-bottom: .05rem solid #e5e5e5;
  19 }
  20 /* Make the masthead heading the same height as the navigation */
  21 .header h3 {
  22   margin-top: 0;
  23   margin-bottom: 0;
  24   line-height: 3rem;
  25 }
  26
  27 /* Custom page footer */
  28 .footer {
  29   padding-top: 1.5rem;
  30   color: #777;
  31   border-top: .05rem solid #e5e5e5;
  32 }
  33
  34 /* Customize container */
  35 @media (min-width: 48em) {
  36   .container {
  37     max-width: 46rem;
  38   }
  39 }
  40 .container-narrow > hr {
  41   margin: 2rem 0;
  42 }
  43
  44 /* Main marketing message and sign up button */
  45 .jumbotron {
  46   text-align: center;
  47   border-bottom: .05rem solid #e5e5e5;
  48 }
  49 .jumbotron .btn {
  50   padding: .75rem 1.5rem;
  51   font-size: 1.5rem;
  52 }
  53
  54 /* Supporting marketing content */
  55 .marketing {
  56   margin: 3rem 0;
  57 }
  58 .marketing p + h4 {
  59   margin-top: 1.5rem;
  60 }
  61
  62 /* Responsive: Portrait tablets and up */
  63 @media screen and (min-width: 48em) {
  64   /* Remove the padding we set earlier */
  65   .header,
  66   .marketing,
  67   .footer {
  68     padding-right: 0;
  69     padding-left: 0;
  70   }
  71   /* Space out the masthead */
  72   .header {
  73     margin-bottom: 2rem;
  74   }
  75   /* Remove the bottom border on the jumbotron for visual effect */
  76   .jumbotron {
  77     border-bottom: 0;
  78   }
  79 }