Created
September 20, 2012 14:40
-
-
Save RelativeMedia/3756318 to your computer and use it in GitHub Desktop.
bootstrap responsive layout example of side by side spans with borders and padding
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- | |
| Im using a secondary div container for my border | |
| and adjusting padding accordingly. I did this | |
| because one of the projects im working on uses | |
| a css3 gradient instead of a regular border | |
| you could use just a single content div within | |
| the span6 and put your padding/border on that | |
| element itsself. | |
| --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>6x6 with borders & Padding</title> | |
| <link rel="stylesheet" type="text/css" href="https://raw.github.com/twitter/bootstrap/gh-pages/assets/css/bootstrap.css" /> | |
| <link rel="stylesheet" type="text/css" href="https://raw.github.com/twitter/bootstrap/gh-pages/assets/css/bootstrap-responsive.css" /> | |
| <style> | |
| body{ | |
| background:#333333; | |
| } | |
| .page{ | |
| min-height:1000px; | |
| } | |
| .content { | |
| background: red; | |
| padding: 10px; | |
| } | |
| header { | |
| margin-bottom: 20px; | |
| width: 100%; | |
| min-height: 120px; | |
| background: yellow; | |
| } | |
| .widget { | |
| margin-bottom: 20px; | |
| padding: 6px; | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255, 255, 255, 0.75)), color-stop(60%,rgba(255, 255, 255, 0))); | |
| } | |
| footer{ | |
| background-color:white; | |
| width:100%; | |
| min-height:120px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| </header> | |
| <div class="page"> | |
| <div class="container"> | |
| <div clas="span12"> | |
| <div class="widget"> | |
| <div class="content"> | |
| <h1>Test of Span 12</h1> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="span6"> | |
| <div class="widget"> | |
| <div class="content"> | |
| <h2>Left Span</h2> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="span6"> | |
| <div class="widget"> | |
| <div class="content"> | |
| <h2>Right Span</h2> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment