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. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    6,626
    Thanks
    31
    Thanked 909 Times in 906 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.
    Physics is actually atoms trying to understand themselves.

  3. #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. #4
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    6,626
    Thanks
    31
    Thanked 909 Times in 906 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.
    Physics is actually atoms trying to understand themselves.


 

Posting Permissions

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