{"id":213,"date":"2012-07-31T17:46:19","date_gmt":"2012-07-31T22:46:19","guid":{"rendered":"http:\/\/jamesroberts.name\/blog\/?p=213"},"modified":"2012-07-31T17:47:29","modified_gmt":"2012-07-31T22:47:29","slug":"twitter-bootstrap-responsive-container-with-padding-and-a-border","status":"publish","type":"post","link":"https:\/\/jamesroberts.name\/blog\/2012\/07\/31\/twitter-bootstrap-responsive-container-with-padding-and-a-border\/","title":{"rendered":"twitter bootstrap responsive container with padding and a border"},"content":{"rendered":"<p>I&#8217;m working on a project where I wanted to use the twitter bootstrap responsive css scaffolding, but ran into a bit of a snafu because I needed to add a border and background to the container class.\u00a0 <\/p>\n<p>I decided to extend the @media responsive stylesheet declarations to achieve this.\u00a0 The padding is not quite as much as I would like, but its better than having the span divs right up on the edges of the container div and I&#8217;m too lazy to edit all the span widths.<\/p>\n<pre lang=\"css\">\r\n.container,\r\n.navbar-fixed-top .container,\r\n.navbar-fixed-bottom .container {\r\n\twidth: 940px;\r\n\tpadding: 10px;\r\n\tborder:1px solid #cecece;\r\n\tborder-top:0px none;\r\n\tbackground:#fff;\r\n}\r\n@media (max-width: 767px) {\r\n  body{\r\n    padding-left: 0px;\r\n    padding-right: 0px;\r\n  }\r\n  .container{\r\n    padding:5px 19px;\r\n    width: auto;\r\n  }\r\n}\r\n@media (min-width: 768px) and (max-width: 979px) {\r\n  .container,\r\n  .navbar-fixed-top .container,\r\n  .navbar-fixed-bottom .container {\r\n    width: 724px;\r\n    padding:10px 14px;\r\n  }\r\n}\r\n@media (min-width: 1200px) {\r\n  .container,\r\n  .navbar-fixed-top .container,\r\n  .navbar-fixed-bottom .container {\r\n    width: 1170px;\r\n    padding:10px 14px;\r\n  }\r\n}\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m working on a project where I wanted to use the twitter bootstrap responsive css scaffolding, but ran into a bit of a snafu because I needed to add a border and background to the container class.\u00a0 I decided to extend the @media responsive stylesheet declarations to achieve this.\u00a0 The padding is not quite as [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[66,57],"_links":{"self":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/213"}],"collection":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/comments?post=213"}],"version-history":[{"count":6,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/213\/revisions"}],"predecessor-version":[{"id":219,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/213\/revisions\/219"}],"wp:attachment":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/media?parent=213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/categories?post=213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/tags?post=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}