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

Design

Alan Steffens
Alan Steffens
2,558 Points
Posted by Alan Steffens
Alan Steffens
2,558 Points

Bootstrap woes ... padding and swapping columns with push and pull not working - can anyone help?

I'm just getting started with Bootstrap. I took the Treehouse course a while back and have read the documentation on the getbootstrap.com website. If you go to http://www.digital-vision.com/bootstrap/index.html you'll see my trial website. My fairly simple source is at https://github.com/alansteffens/Bootstrap.git. When I apply padding to the "reliable" text row's column using p-t-2 in the column class, it does not produce any top padding. My CSS is rudimentary and should cause no Bootstrap conflicts. I was also trying to take the "experience and circle arrow" right column in the middle of the page and use the push and pull Bootstrap commands to make that column shift to the bottom after the "allowing" line, but it kept making the allowing line disappear. I was putting push-sm-5 on the experience column and pull-sm-5 on the allowing row/column. Can anyone help me figure out why padding and push and pull aren't working properly? I removed those Bootstrap commands to show the website. Thanks for your help, still trying to get over the hump on Bootstrap and beyond grid basics, but nothing works.

4 Answers

woodworth
.a{fill-rule:evenodd;}techdegree
woodworth
Front End Web Development Techdegree Student 19,831 Points

Hi Alan,

I use bootstrap on a site so took a look at your files on github. I see you have inline style used in a couple of spots in your index.html as well as adding more styles inside your head tag. Both of these will over-ride your css because of how they flow when read so this might be causing your padding issue. Also, your html doctype needs to be updated to the html5 standard. See http://getbootstrap.com/css/ for the correct info you need. You should also move your script tag for the bootstrap js file to the bottom and place it right before the closing body tag.

Here's the order to use for the stylesheets: 1) bootstrap stylesheets -- I actually just use the bootstrap CDN link for my site so only one stylesheet link. Bootstrap is already using Normalize.css so you don't need to add it again. 2) links to fonts 3) your style sheet where you want to over-ride bootstrap styles

When using bootstrap, you need to start with bootstrap's wrapper <div class="container"></div>. Then, inside this container, you will start to add the row and column grid.

<div class="container">
  <div class = "row">
     <div class = "col-md-4">
     </div>
     <div class = "col-md-8">
     </div>
  </div>
</div>

To add your own stylesheet classes, you add them after the bootstrap class using a space to separate them.

<p class="text-center mycustomclass></p>

Hope this info helps. It took me a while to figure out bootstrap. Just read their docs and cut and paste in the code snippets to try things out to see how they work and look.

Regards, Amy

Alan Steffens
Alan Steffens
2,558 Points
Alan Steffens
Alan Steffens
2,558 Points

Amy, thank you so much for your suggestions. I was copy/pasting my DOCTYPE and HTML tags from previous code, not realizing it was a potential issue with Bootstrap. I also didn't think the order of classes made a difference, but that was just stupidity on my part (I do understand the "cascading" part of CSS). I have made all your suggested changes, will see if those fix my Bootstrap issues, and will report back here as a reference for others facing similar Bootstrap issues. I put down web dev for 5 years and am now picking it up again, the CSS changes and all responsive concepts have thrown me for a loop. There is a substantial learning curve, especially when web dev isn't your primary job! I started wading through "all" the Bootstrap documentation, not just the sections I thought I needed to. Thank you again for your time.

Alan Steffens
Alan Steffens
2,558 Points
Alan Steffens
Alan Steffens
2,558 Points

With the suggested changes added, padding is still not working, push and pull is working now. I republished to my website and synced changes to my GitHub repository for anyone interested in looking at this.

For padding, I added a p-l-4 to my "relentless" line class, which doesn't do anything. I can't seem to find the Bootstrap documentation on the padding and margin CSS now, maybe they removed that functionality since Guil's Bootstrap class.

For push and pull, I added a col-lg-push-4 to my "allowing" line class, and that appears to work and no longer pushes the text outside the container.

woodworth
seal-mask
.a{fill-rule:evenodd;}techdegree
woodworth
Front End Web Development Techdegree Student 19,831 Points
woodworth
.a{fill-rule:evenodd;}techdegree
woodworth
Front End Web Development Techdegree Student 19,831 Points

Hi Alan,

I took another look and it is much cleaner than last time. I did still see some inline styles though and would suggest that you move all custom styles out of your index.html and into your main.css file. These styles are for two classes, experience and circlearrow. Also, you are adding font styles for some spans. Again, I would just create a new class if you are trying to use different fonts for headlines and add this to your main.css vs putting styles inside the html.

One thing I use when running into a spacing issues is to add a 1 pixel solid red border around all my code using a global style. I place this at the top of my style sheet and then comment it out when I'm done debugging. Using this border and the browser's inspect feature usually helps me figure out what's going on with funky breaks and spacing. 

* {
  border: 1px solid red;
}

I haven't taken the bootstrap lesson here so am not sure about the course notes. However, another resource you might want to explore is Bootply. Here's the link: http://www.bootply.com/new

If you are familiar with JS Bin for tinkering with JavaScript code, Bootply lets you play around with different bootstrap code online. The community section also has code snippets of things others have developed using bootstrap tags. Might help you get ideas for your own layout by seeing how others have used the bootstrap code.

Amy

Alan Steffens
Alan Steffens
2,558 Points
Alan Steffens
Alan Steffens
2,558 Points

So in my bootstrap experiments locally I found the answer to getting the column padding, margins and swapping to work. I pulled the metatags from the top of Guil's "Full Stack Conf" HTML files (Bootstrap Basics class) replaced what I had with Guil's and "waa-laa" rows and/or columns with the m-t-2 Bootstrap class now gave me the top margin it was supposed to.

In my original HTML file, I had the following metatags: <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta name="viewport" content="width=device-width, initial scale=1.0">

When I changed them to Guil's (see below), all the non-working Bootstrap commands suddenly worked.
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge">

Beware of blindly copying HTML code from previous files! That code was pulled from a previous website and I never knew exactly what those metatags did. Now I will look these metatag codes up and see if I can figure out exactly what they do and why it affected Bootstrap functionality.