Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Kent Walker
Kent Walker
250 Points

Bootstrap issues

I'm trying to create a portfolio site with bootstrap and I'm running into trouble with stacking and getting my divs positioned right using the columns. To give some more details, basically the first section below the nav, is six shortcut icons to different projects I worked on and below that are two large divs with About Me and Skills in them.

I'm trying to get the layout the way I want it but offsets aren't getting me there and when I shrink the browser, all the shortcuts stack directly on top of each other and some even overlap. I'd like to keep a bottom margin so everything's not crunched together.

Any help or advice would be much appreciated. I'm starting wonder if I shouldn't use Bootstrap and instead just do the css myself.

Kent Walker
Kent Walker
250 Points

Here's a link to my github repo. There may need to be some additional fixes now that it's in the repo. Also there's a jpg I created that's in there as well, it's basically a template I'm using so that should be the end result. At least something close to that.

3 Answers

Hey Kent, Don't give up just yet. People talk like Bootstrap is an effortless solution for site layouts, but it's really not as obvious to use once you start applying it to your actual content. That said, I've used BS for a number of projects, and honestly now I usually don't bother with it, because it's often overkill (in both file size and HTML class writing) if you're just trying to set up a basic responsive layout. That said, here's how I would set up the layout you've described using Bootstrap:

<div class="container-fluid">

  <div class="row icon-row">
    <div class="col-xs-6 col-sm-4 col-md-2">Icon 1</div>
    <div class="col-xs-6 col-sm-4 col-md-2">Icon 2</div>
    <div class="col-xs-6 col-sm-4 col-md-2">Icon 3</div>
    <div class="col-xs-6 col-sm-4 col-md-2">Icon 4</div>
    <div class="col-xs-6 col-sm-4 col-md-2">Icon 5</div>
    <div class="col-xs-6 col-sm-4 col-md-2">Icon 6</div>
  </div>

  <div class="row feature-row">
    <div class="col-sm-6">About Me</div>
    <div class="col-sm-6">Skills</div>
  </div>

</div>

So what am I doing here? You have 2 sections of content: the icons and the large divs. Thinking about that content presented on a phone, I'd say you could probably fit 2 icons side-by-side, so you want each icon to be inside a div that's 50% wide. In Bootstrap, 12 columns = 1 full row, so .col-xs-6 means span 6 of the 12 columns at size xs, which means any screen width that's 0px or wider (aka, any screen size). Now, iPad users have enough screen space to maybe show 3 icons across, in 2 rows. So I added .col-sm-4 to that same div, so that it will span 4/12 (or 1/3) of the row when the screen width is sm, which for Bootstrap means 768px or wider. Finally, I added .col-md-2 to the row so that when the screen width is md, which is 992px or wider, each icon will span 2/12 of the row, or 1/6, which means all of the icons will fit evenly across the row.

The second .row is even easier. Since these are prominent content sections, we don't want to try and squeeze them 2-across on a phone like the icons; we want them to span the full-width of the phone's screen. So we can leave off any .col- class that targets phones (or you could use .col-xs-12 if you want to clearly show that the div should span all 12 columns at size xs). And we add .col-sm-6 so that the div spans 6/12 (or 1/2) of the screen width when the screen is at least 768px wide.

Finally, Bootstrap doesn't add top or bottom padding or margin to its containers, rows, or cols, so if you want some vertical space between stacked elements, you'll just write your own CSS rule for that. Notice above that I added an .icon-row and .feature-row class in addition to Bootstrap's .row class. The only reason I did that was so I could target those elements if I need to. In this case, I'd probably write a CSS rule like:

.icon-row > div {
  margin-bottom: 1em;
}

to make sure that when the icons stack on top of each (on phones and tablets), they don't squish together vertically.

Make sense? I hope this makes Bootstrap a little clearer.

My best advice would be if you want to use Bootstrap, really read the grid documentation and even better, look at the actual CSS (Ctrl+F for "container" to jump down to the actual Bootstrap classes). Once you discover that all a .row class does is add -15px side margin, or .col-md-6 just sets width: 50% on the element when the window is 992px or wider, or .col-xs-push-3 just sets left: 25% on the element, the "magic" of Bootstrap becomes a little easier to understand (and do yourself).

Good luck to you!

Follow-up to my first answer: I mentioned you might consider not using Bootstrap at all. Here's how you could do this without Bootstrap -- you can decide which makes more sense for you and your entire project:

  <div class="icon-row clearfix">
    <div class="icon">Icon 1</div>
    <div class="icon">Icon 2</div>
    <div class="icon">Icon 3</div>
    <div class="icon">Icon 4</div>
    <div class="icon">Icon 5</div>
    <div class="icon">Icon 6</div>
  </div>

  <div class="feature-row clearfix">
    <div class="feature">About Me</div>
    <div class="feature">Skills</div>
  </div>
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.icon {
  float: left;
  width: 50%;
}
.feature {
  float: left;
  width: 100%;
}

@media (min-width: 768px) {
  .icon {
    width: 33.3333%;
  }
  .feature {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .icon {
    width: 16.6666%;
  }
}

Slightly simpler HTML, pretty basic CSS, and no need to make visitors download a ~120KB external stylesheet, or make you override the global typography and other CSS rules that Bootstrap comes with. It's really about how much you think you'll need to use Bootstrap's different components.

Again, hope this helps you!

Kent Walker
Kent Walker
250 Points

Thanks! I'll try the bootstrap solution first and see if that'll work. One thing I don't like about it is the lack of control I have with positioning everything so graphically it flows well and lines up with everything else. I was using some offsets to create some space on the sides of the shortcut rows. Should I use margin instead? I might still use the pure CSS option just because I'll have more control and not have to tackle with bootstrap's idiosyncrasies. But I'll take a closer look at the Bootstrap documentation as well.

Kent Walker
Kent Walker
250 Points

Also, it seems that the margin-bottom doesn't work when you shrink the screen. The margin collapses and then icons are right on top of each other. UPDATE: Well I increase the margin between the rows and now it doesn't fully collapse when I shrink the screen but that still isn't exactly ideal. Might try the CSS approach now.

Kent, Here's a demo of how you could do this: http://codepen.io/ericbutler555/pen/wgRBRP?editors=1100 I'm not sure why your margin-bottom isn't working, unless you are trying to apply it to an inline element (like an image) without changing its display value to either inline-block or block -- margins only work on block-level elements (like a div, p, etc.).

Kent Walker
Kent Walker
250 Points

Eric,

Sorry for not getting back to you sooner, I've been a little busy this week. I'll give what you did a try. I'm not familiar with everything you've done in your css, so I'll probably need to do some review. I still have bootstrap in my code so I'll need to switch it up. That should resolve the issues. One thing I have different from you is that I do two rows of three shortcuts instead of one row of six but that shouldn't cause too many issues. I guess I wanted to get the bootstrap working because the instructors I had at a bootcamp I went to kept on telling me to use it but your way looks like a lot easier so I'm not wrestling with bootstrap's idiosyncrasies. I'll let you know if I still have issues. Thanks again!