SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bootstrap framework: Why is there a gap on the left side of my container?

    Hi all I am using Twitter's Bootstrap framework,
    I have a gap that is showing on the left side of my container. However, my footer is not affected by it. Does anyone know why I have he gap and how to get rid of it? Here's a screenshot of what I am talking about (see attached). Also, I have a live preview of my site here so you can view the code.

    Any ideas? Thanks!gap.jpg

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    See if this helps....

    bootstrap.css (line 266)
    Code:
    .row {
        margin-left: -20px;    /* delete me */
    }
    bootstrap.css (line 288)
    Code:
    .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
        width: 960px;    /* changed from 940px */
    }

  3. #3
    SitePoint Member
    Join Date
    May 2013
    Location
    Richmond VA
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to apply the background color to the elements with the class="row". It has to do with the negative left margin on the elements with the class="row" to correct for the left margin on the first class="span*" element in the row. Take the background color off the div.container and put it on the header.row and section.row elements.

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both! That fixes it.

  5. #5
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright guys...another question...

    Check out the latest live preview.

    Notice that each of the 3 sections at the bottom area (above footer) has a left margin of 20px. Unfortunately, this does not give any margin to the section on the right ...it has text flush to the edge. See attached screenshot for what I'm trying to explain.

    margin.jpg

    So, in this grid system, what do most people do in this situation?

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You can narrow the width of the columns a tad. That will effectively yield a 15px right margin.

    bootstrap.css (line 327)
    Code:
    .span4 {
        width:295px;    /* changed from 300px */
    }
    There are other methods, too.

    Quote Originally Posted by skunker View Post
    So, in this grid system, what do most people do in this situation?
    I have no idea. I do not use a grid system nor other framework. Too hard.

  7. #7
    SitePoint Member
    Join Date
    May 2013
    Location
    Richmond VA
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without hacking the core bootstrap files your best bet is to add some right padding to any element inside of an element with the class="span*". In the case of the Our location text .span4 p { padding-right: 10px; }

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by th3mus1cman View Post
    Without hacking the core bootstrap files your best bet is to add some right padding to any element inside of an element with the class="span*". In the case of the Our location text .span4 p { padding-right: 10px; }
    Hacking core files?

    Adding padding right as suggested would visually increase the space between the 3 columns by the same amount that is added to the right edge and is probably not desirable in this case. If only the right-most column (Our Location) is targeted, it would work, however the column would appear to be a bit narrower than the others.

  9. #9
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. Check out this core bootstrap template: http://twitter.github.io/bootstrap/e.../carousel.html

    They have a section under the banner just like I do. I looked at their code and they have a:

    Code:
    .marketing .span4 p {
    margin-left: 10px;
    margin-right: 10px;
    This is what I need to do, but if I apply it to my code I still have to deal with the default <section> margin-left of 20px.

    I've kept my custom.css file generally small, so about 99% of what you see on my live site thus far is core Bootstrap.

    Does narrowing the width of the columns <span4> as ronpat says affect the responsive-ness of the rest of the site when it goes through various media queries? I'm afraid of modifying such a core rule of the code.

  10. #10
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Edit: I don't know if this is a good solution, but I added a custom media querie as:

    Code:
    @media (min-width: 1200px) {
    .span4 {
    margin-left: 25px;
    }
    }
    Of course, I'd have to probably adjust all the other breakpoints.

    Is this a viable solution?

  11. #11
    SitePoint Member
    Join Date
    May 2013
    Location
    Richmond VA
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I think that works. Yes, you will need adjust at the other breakpoints. As a side note, if you are not tied to Bootstrap I would checkout Foundation. It works a lot better for websites than Bootstrap in my opinion. Bootstrap is better suited for web apps.

  12. #12
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by th3mus1cman View Post
    Yeah, I think that works. Yes, you will need adjust at the other breakpoints. As a side note, if you are not tied to Bootstrap I would checkout Foundation. It works a lot better for websites than Bootstrap in my opinion. Bootstrap is better suited for web apps.
    That's interesting and I may be willing to make the jump before I get too deep into BS. The one reason why I chose BS over F4 is because BS is widely used in the corporate world, especially the federal government here in the US, so I figured it would be a good skill to have (I currently mostly do design work for the Gov). However, all the frameworks are pretty similar, so it shouldn't be too difficult to make the jump. The other big issue I had with F4 is that it doesn't work for IE7 and more than half of my users still use IE8, so that's a huge audience to leave behind. Although, I'm going to read up more about the IE8 grid support section on F4's support page.

    Update: I've been looking over some of the chatter on F4's IE8 support page and it seems you have to go through some hoops to get IE8 working just right: https://gist.github.com/zurbchris/5068210

    I think I'd rather make the minor media querie adjustments to BS's css rather than having to deal with F4's IE8 hacks. Furthermore, BSv3 is just around the corner.

  13. #13
    SitePoint Member
    Join Date
    May 2013
    Location
    Richmond VA
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Foundation 4 is a pretty forward looking framework. I have stopped supporting IE7 altogether unless specifically requested. However, F4 does have limited support for IE8. There are some polyfills you can use to compensate. Bootstrap is not a bad framework by any means I just find Foundation, even version 3, to be a little more malleable for custom website designs.


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
  •