Bootstrap columns driving me nuts

Hi folks - I am working on the Personal Portfolio Site, and I am trying to embed a Bootstrap grid inside another Bootstrap grid? The reason why I am trying to do that is to evenly space the font awesome icons in one row on the right side of the grid (opposite the copyright). Am I making this more complicated than it needs to be? Can I just add a css property to .font-awesome to justify it across the row?

Here is my code:

<footer>
    <div class="container">
      <div class="row">
        <div class="col">
          <p>Lovingly written and coded by Michael Henry &copy 2017</p>
        </div>
        <div class="col font-awesome">
          <div class="col">
            <i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i>
          </div>
          <div class="col">
            <i class="fa fa-twitter-square fa-3x" aria-hidden="true"></i>
          </div>
          <div class="col">
            <i class="fa fa-github fa-3x" aria-hidden="true"></i>
          </div>
          <div class="col">
            <i class="fa fa-dribbble fa-3x" aria-hidden="true"></i>
          </div>
          <div class="col">
            <i class="fa fa-codepen fa-3x" aria-hidden="true"></i>
          </div>
          <div class="col">
            <i class="fa fa-free-code-camp fa-3x" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
  </footer>

See the Pen Personal Portfolio Page by Michael Henry (@digitaljavelina).

Thanks. I appreciate it!

Mike

I don’t know if there is a simpler way, but if you want that much direct control, this sounds like a good way. I would specify exactly what you want the columns to be. And you need a container row for the FA columns.

Does this work?

<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p>Lovingly written and coded by Michael Henry &copy 2017</p>
      </div>
      <div class="col-md-6 font-awesome">
        <div class="row">
          <div class="col-md-2"> <i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i> </div>
          <div class="col-md-2"> <i class="fa fa-twitter-square fa-3x" aria-hidden="true"></i> </div>
          <div class="col-md-2"> <i class="fa fa-github fa-3x" aria-hidden="true"></i> </div>
          <div class="col-md-2"> <i class="fa fa-dribbble fa-3x" aria-hidden="true"></i> </div>
          <div class="col-md-2"> <i class="fa fa-codepen fa-3x" aria-hidden="true"></i> </div>
          <div class="col-md-2"> <i class="fa fa-free-code-camp fa-3x" aria-hidden="true"></i> </div>
        </div> // inner right row       
      </div> // right outer column
    </div> // outer row
  </div> // container
</footer>

YES!

That’s awesome. I was missing the container row. For my education, why did you choose col-md-* instead of another width? Thanks again.

Mike

I’m no expert on this, but…

The “md”? That is not a width, that is the class prefix for desktop size devices. That means (as I understand it) that it will create columns for medium (desktop) and larger sizes and will stack vertically for smaller devices. It is my default. You can actually combine different classes of different sizes to get different effects for different devices, but that is beyond my ken at the moment.

Why the number? It fit the layout that I assumed that you wanted. Bootstrap assumes a grid of 12 columns. For the outer rows, I wanted two columns of of 6, evenly spaced. For the grid of icons, I wanted those 12 to be divided equally (within that right parent column.)

Thanks for the great explanation. Very helpful!

Mike