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.
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.
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.
So, in this grid system, what do most people do in this situation?
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; }
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.
They have a section under the banner just like I do. I looked at their code and they have a:
.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.
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.
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.