Bootstrap Lover meets CSS FlexBox

Ever since I learned of Bootstrap, I have incorporated the framework into all my front-end work. I enjoy being able to easily configure fully-responsive layouts. So when I heard about Flexbox (go figure, seeing as all major layout frameworks [ahem, Bootstrap] utilize Flexbox), I wasn't too excited to try it out.

That was until I decided to redesign my portfolio website. I specifically wanted to display those logos that correspond to my skills/tools as a grid. My knee-jerk go-to was Bootstrap of course, but it was a little challenging to configure. My logo descriptions kept running into each other and my grid appeared too smushed on different mobile/tablet screens. But I eventually got it to work. My HTML/CSS code and a video of the result appear below:

<!-- HTML -->
<section class="skills" id="skills">
        <h1 style="margin: 40px 0px;">Skills &amp; 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>

            <!-- some more similar code -->

            <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;
}

Now, I recently remembered Flexbox and wondered if it would make my grid work just as well as, or better than, Bootstrap. I was pleasantly surprised to find that I only needed to define the flexbox container and my individual grid elements. The flex-wrap property resulted in a much-smoother transition of my grid arrangement as I manipulated my screen's size (see code and video below).

 <section class="skills" id="skills">
        <h1 style="margin: 40px 0px;">Skills &amp; Tools</h1>
        <div class="skills-container">
          <div class="skills-list">
            <span><img src="img/htmlcss.png" /><br />
            HTML/CSS</span>
          </div>
          <div class="skills-list">
            <span><img src="img/js.png" /><br />
            JavaScript</span>
          </div>

          <!-- some more similar code -->

          <div class="skills-list">
            <span><img src="img/redhat.png" /><br />
            RedHat/Centos</span>
          </div>
          <div class="skills-list">
            <span><img src="img/wordpress.png" /><br />
            Wordpress</span>
          </div>   
        </div>
      </section>

.skills-list {
  line-height: 75px;
  font-size: 20px;
  text-align: center;
  width: 175px;
}

.skills-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

CSS Flexbox excites me now 😆🤩 It feels quite intuitive, and I'm looking forward to configuring a lot more of my future layouts with it.

How have you used Flexbox? Do you prefer it over any other layout frameworks? Why or why not?

(thanks for reading! 👋🏾)

Comments

[Jérôme Pott]

Nice!

What I don't like with Bootstrap-style grid layout is that it forces you to think your layout into an arbitrary 12-columns grid. In addition, every time you learn a new CSS framework, you need to learn their grid system, whereas Flexbox & CSS Grid are just waiting in your browser to be used.

IMO, with Flexbox & CSS Grid, we won't need third-party grid systems (all the more true if a project doesn't need to support Internet Explorer).

BTW, here's a great course to get started with CSS Grid: cssgrid.io

[xelaflash]

Wes Bos course are always a must.
By the way there is also one (free) for flexbox : flexbox.io/

[Arit Developer]

Hi Jerome! Thanks for the resource 🤗