jumbotron-narrow.css (1411B)
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-right: 15px; 12 padding-left: 15px; 13 } 14 15 /* Custom page header */ 16 .header { 17 padding-bottom: 20px; 18 border-bottom: 1px 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: 40px; 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 padding: 14px 24px; 51 font-size: 21px; 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-right: 0; 69 padding-left: 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 }