Bootstrap issues

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!

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!