git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/examples/jumbotron-narrow/jumbotron-narrow.css

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