DEV Community

Cover image for Bootstrap Lover meets CSS FlexBox
Arit Developer
Arit Developer

Posted on • Updated on

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>

Enter fullscreen mode Exit fullscreen mode
/* CSS */
.skills-list {
  line-height: 75px;
  font-size: 20px;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
.skills-list {
  line-height: 75px;
  font-size: 20px;
  text-align: center;
  width: 175px;
}

.skills-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

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! 馃憢馃従)

Top comments (3)

Collapse
 
mornir profile image
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

Collapse
 
xelaflash profile image
xelaflash

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

Collapse
 
aritdeveloper profile image
Arit Developer

Hi Jerome! Thanks for the resource 馃