Grid-Bootstrap.html

<!-- HTML -->
<section class="skills" id="skills">
        <h1 style="margin: 40px 0px;">Skills & Tools</h1>
        <div class="container">
          <div class="row">
            <div class="col-12 col-sm-6 col-md-4 skills-list">
              <span><img src="img/htmlcss.png" /><br />
              HTML/CSS</span>
            </div>
            <div class="col-12 col-sm-6 col-md-4 skills-list">
              <span><img src="img/js.png" /><br />
              JavaScript</span>
            </div>
            <div class="col-12 col-sm-6 col-md-4 skills-list">
              <span><img src="img/ruby.png" /><br />
              Ruby/Rails</span>
            </div>
            <div class="col-12 col-sm-6 col-md-4 skills-list">
              <span><img src="img/github.png" /><br />
              GitHub</span>
            </div>
            <div class="col-12 col-sm-6 col-md-4 skills-list">
              <span><img src="img/rspec.png" /><br />
              RSpec</span>
            </div>
            <div class="col-12 col-sm-6 col-md-4 skills-list">
              <span><img src="img/travis.png" /><br />
              TravisCI</span>
            </div>
            <div class="col-12 col-sm-6 col-md-4 skills-list">
              <span><img src="img/sql.png" /><br />
              SQL</span>
            </div>
            <div class="col-12 col-sm-6 col-md-4 skills-list">
              <span><img src="img/trello.png" /><br />
              Trello</span>
            </div>
            <div class="col-12 col-sm-6 col-md-4 skills-list">
              <span><img src="img/slack.png" /><br />
              Slack</span>
            </div>
          </div>     
        </div>
      </section>

<!-- CSS -->
.skills-list {
  line-height: 75px;
  font-size: 20px;
  text-align: center;
}