SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    May 2004
    Location
    London
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,178
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    I've never used Bootstrap, so I might be misunderstanding how things are meant to work, but here goes anyway.

    Your columns are not 70px wide because the CSS for them is declaring them at 8.33333%. (bootstrap.css, line 1157, according to Firebug.) So the width of the columns will depend upon the width of the containing element or the viewport.


    bootstrap.css line 835:
    Code CSS:
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }
    Changing padding-left and padding-right to margin-left and margin-right does what you want.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    }[/HIGHLIGHT]Changing padding-left and padding-right to margin-left and margin-right does what you want.
    You should never really change the bootstrap default files as the whole system is built on these rules being unchanged. You can modify them with over-riding classes for special cases but as a general rule of thumb the originals should remain untouched.

    The columns have gutters using padding so you should probably just nest an inner element in each column and colour that instead and it will then appear to have the 30px gap between columns. In most cases the bootstrap elements build a structure that you can then work within and rather than trying to modify the structure itself you just add your elements inside and style them accordingly.

    I'm more familiar with bootstrap2 which does use margins for gutters and is a little easier to understand. Are you sure your psd files aren't based on bootstrap2 as that has some default columns of 70px? Bear in mind though that the width of the columns is only based on the width of the viewport and will change as each breakpoint is triggered.

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,178
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You should never really change the bootstrap default files as the whole system is built on these rules being unchanged. You can modify them with over-riding classes for special cases but as a general rule of thumb the originals should remain untouched.
    Thanks, Paul - I thought it might be something like that. As I said, I've never used Bootstrap - and I think I'll be keeping well-clear in future.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Thanks, Paul - I thought it might be something like that. As I said, I've never used Bootstrap - and I think I'll be keeping well-clear in future.
    Bootstrap2 isn't too bad but the documentation on bootstrap3 is a little confusing even though its supposed to be the better version. It's a bit like trying to tie your shoelaces with your hands tied behind your back

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,178
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Bootstrap2 isn't too bad but the documentation on bootstrap3 is a little confusing even though its supposed to be the better version. It's a bit like trying to tie your shoelaces with your hands tied behind your back
    That conjures up an interesting picture.
    Off Topic:

    Oddly enough, I can tie my laces one-handed, but I suspect trying to do so with my hands tied behind my back would be beyond even my contortionist skills.


Bookmarks

Posting Permissions

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