Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Still confused about the grid in Bootstrap 3

    Hi I'm a beginner trying to create my own web layouts in Photoshop that are based on the Bootstrap 3 grid.

    I've downloaded a few .psd files that mimic the Bootstrap 3 grid so you can based your designs around them.

    I've also created an html grid using Bootstrap that you can see here http://juanchandler.com/grid-test.html view source to see the code.

    My question is why the columns aren't 70 pixels wide and a gutter width of 30 pixels as is the case with the .psd grids...I've taken a screenshot of the .psd grid with my html over the top so you can see how the columns don't line up. http://juanchandler.com/screenshot3.jpg ie. the red / salmon columns are supposed the gutters but my html columns fall over them.

    Hope someone can help.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,484
    Thanks
    23
    Thanked 636 Times in 635 Posts
    because you didn't add the css to get them that way
    Code:
    <style type="text/css">
    .row{
    	width: 1200px;
    	height: 100%;
    	margin: 0 auto;
    }
    .col-sm-1{
    	width: 70px;
    	margin-left: 15px;
    	margin-right: 15px;
    	float:left;
    }
    .cell1{ background: lightblue; }
    .cell2{ background: darkblue; }
    .cell3{ background: grey; }
    .cell4{ background: salmon; }
    .cell5{ background: yellow;}
    .cell6{ background: green;}
    .cell7{ background: lightsteelblue;}
    </style>
    But this doesn't help with responsive design.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for your reply...but you realise...I'm using the Bootstrap 3 framework..... so .row and .col-sm-1 I thought would have all the necessary CSS applied to them in the main stylesheet I've made a call to.....bootstrap.css ignore the inline CSS I put there...as that was just to distinguish the different cells by giving them a background colour....

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,484
    Thanks
    23
    Thanked 636 Times in 635 Posts
    I see a call to the bootstrap CSS, but not to bootstrap. Looking at the source of Template 1 I get this:
    Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
    
        <title>Template 1</title>
    
        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <!-- Custom CSS of my own -->
        <link href="css/test1.css" rel="stylesheet">
    	
    	<style type="text/css">
    	  #wrapper{
    	  width: 100%;
          height: 100%;
          background: lightsteelblue
          }	
    	   .cell1{ background: lightblue }
    	   .cell2{ background: darkblue }
    	   .cell3{ background: grey }
    	   .cell4{ background: salmon }
    	   .cell5{ background: yellow}
    	   .cell6{ background: green}
    	   .cell7{ background: lightsteelblue}
    	   ul.row{ margin: 0; padding: 0; width: 100% }
    	   ul.row li{list-style-type: none;}
    	   
    	   @grid-gutter-width: 30px;
    	</style>
    	
      </head>
    
      <body>
      
           <br /><br /><br /><br />
      
           <div class="container">
    	     <div class="row">
    		     <div class="col-sm-1 cell1">A B C D E </div>  
                 <div class="col-sm-1 cell2">&nbsp;</div>  
                 <div class="col-sm-1 cell3">&nbsp;</div> 
                 <div class="col-sm-1 cell4">&nbsp;</div>
                 <div class="col-sm-1 cell5">&nbsp;</div>
                 <div class="col-sm-1 cell6">&nbsp;</div> 
                 <div class="col-sm-1 cell7">&nbsp;</div> 
                 <div class="col-sm-1 cell1">&nbsp;</div> 	
                 <div class="col-sm-1 cell2">&nbsp;</div>
                 <div class="col-sm-1 cell3">&nbsp;</div>	
                 <div class="col-sm-1 cell4">&nbsp;</div> 
                 <div class="col-sm-1 cell5">&nbsp;</div>  			 
    		 </div>	         	 
    	   </div>
    	
    	   
    	
    	
      	
    	  
    
      </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •