Bootstrap Lover meets CSS FlexBox
Tags: beginners, css, bootstrap, flexbox
Published: 2018-10-22 00:48:02

---
title: Bootstrap Lover meets CSS FlexBox
published: true
cover_image: https://cdn-images-1.medium.com/max/1400/1*--hxH0rxCaJ3CbY5LJBeXg.png
tags: beginner, css, bootstrap, 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
<!-- 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
/* CSS */
.skills-list {
  line-height: 75px;
  font-size: 20px;
  text-align: center;
}
```

{% vimeo 296328699 %}


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).

```html
 <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>
```

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

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

{% vimeo 296328665 %}

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! 👋🏾)