Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Maria Cuan
4,500 PointsBoostrap Prototype feedback ?
Hello Treehouse members! I hope everyone is doing great this monday! I started a simple bootstrap prototype. Everything is doing awesome except that my navbar (wrapped in my container div) seems to be longer than my content that is placed on a grid. Any ideas why this is happening?
thank you ! :)
Maria Cuan
4,500 Pointshttp://codepen.io/anon/pen/wFDrA
I hope I did this right :) I didn't include the css because that is Bootstrap's.
Thanks!
James Barnett
39,199 PointsYou can link bootstrap as an external resource on codepen
http://blog.codepen.io/2013/07/31/bootstrap-and-foundation-added-to-external-css-resource-typeahead/
7 Answers
James Barnett
39,199 PointsSince text is left aligned by default, to see where the div actually stops and how it affects the look of your layout add in .col-md-3 { outline: solid; }.
To have those divs align the text in the center thus reduce the gap, you can throw on the bootstrap class text-center on the div that has the row class or if you don't want all the text in that div to be centered, you can add that class to each of those h1s.
John Steer-Fowler
Courses Plus Student 11,734 PointsHi there Maria.
Without seeing your HTML it is difficult to say, maybe your container needs to start within the nav?
For example:
<nav class="navbar">
<div class="container">
</div>
</nav>
Rather than this:
<div class="container">
<nav class="navbar">
</nav>
</div>
Hope this helps
Maria Cuan
4,500 PointsI dont want to paste the whole thing so here is the pen:
Anthony Hind
5,715 PointsIf you paste your HTML into the Direct input tab Here you will see you have quite a few errors with your code.
James Barnett
39,199 PointsActually it's just 1 error, line 75, Maria Cuan typo'ed the closing tag of the a element as </href> instead of </a> fix that one mistake and the markup validates.
Anthony Hind
5,715 PointsHi James, Didn't want to give the game away correcting the code for Maria Cuan when you have the one error it can then affect the code right through the markup as you know.
Hope you got sorted Maria, James Barnett is the man for helping people out!!!
Cheers
James Barnett
39,199 PointsI see where you are going with it, definitely directing people to a validator so they can see how one error can affect the rest of a document, I'm on the same page now.
Maria Cuan
4,500 PointsI have now validated my code :) and added the bootstrap css on code pen! I need to look into code pen more :) that is awesome!
I still have that weird space. I wrapped my navbar on a container div and did the same to my grid elements.
http://codepen.io/anon/pen/wFDrA
Thank you all for your feedback, this helps me a lot !
James Barnett
39,199 PointsI took a look at the updated pen, I'm probably just being dense here, but I'm not seeing the issue.
Can you upload a screenshot with an annotation of the issues you are seeing.
Maria Cuan
4,500 PointsOh! sure!
https://www.dropbox.com/s/t16pnrn9uoa7fmw/Esther_Cuan.jpg
Maybe Im having an alignment problem with my grid.
Maria Cuan
4,500 PointsOh wow.
I can see now!
Thank you so much!
Now I also learned to outline divs in order to see what is going on hahaha Thank you !
James Barnett
39,199 PointsYeah outline is a better choice than border because outlines don't take up space in the box model so they don't affect your layout.
James Barnett
39,199 PointsJames Barnett
39,199 PointsShow us your code, put it up on codepen.