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 /* Custom container */
  35 .container-narrow {
  36   margin: 0 auto;
  37   max-width: 700px;
  38 }
  39 .container-narrow > hr {
  40   margin: 30px 0;
  41 }
  42
  43 /* Main marketing message and sign up button */
  44 .jumbotron {
  45   text-align: center;
  46   border-bottom: 1px solid #e5e5e5;
  47 }
  48 .jumbotron .btn {
  49   font-size: 21px;
  50   padding: 14px 24px;
  51 }
  52
  53 /* Supporting marketing content */
  54 .marketing {
  55   margin: 40px 0;
  56 }
  57 .marketing p + h4 {
  58   margin-top: 28px;
  59 }
  60
  61 /* Responsive: Portrait tablets and up */
  62 @media screen and (min-width: 768px) {
  63   /* Remove the padding we set earlier */
  64   .header,
  65   .marketing,
  66   .footer {
  67     padding-left: 0;
  68     padding-right: 0;
  69   }
  70   /* Space out the masthead */
  71   .header {
  72     margin-bottom: 30px;
  73   }
  74   /* Remove the bottom border on the jumbotron for visual effect */
  75   .jumbotron {
  76     border-bottom: 0;
  77   }
  78 }