The continuation of the AngularJS, Rails, Webpack tutorial will be back next week. I have been working on a site this week and it was my first foray into Bootstrap 4. I didn’t know what I was getting into at first. I thought, like most updates, that the power of the framework just got stronger and things got easier. Little did I know that it was a complete rewrite!

Flexbox

The Bootstrap 4 rewrite takes advantage of the Flexbox model, something I haven’t delved into much so far. What does it mean for using our beloved containers, rows, and columns? Not much. Things might look different behind the scenes, but up front things mostly look the same. One major thing to think about when migrating a site or starting a new site with Bootstrap 4 is that it is not compatible with Internet Explorer versions 8 and 9. Personally, I wish IE would die a quick death.

Cool Changes

Much has been dropped from Bootstrap 4 as the web has moved on from certain things. To see a full list, check it out here. One thing I thought that was cool is the less bulky navbar. This is how we’re used to seeing the HTML for a navbar…

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

It’s so bulky, right? Well check this out…


<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

Notice anything missing? Well the top half is the same, but take a look at the links. No more ul’s and li’s. This is because they use classes for the navs now.

You can also size very easily with inline attributes. 25%, 50%, 75% and 100% widths and heights can be achieved by using ‘w’ for the former and ‘h’ for the latter. Then just add a dash and the desired number, such as h-100. Here’s an example.

<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>

Screen Shot 2017-10-06 at 3.41.21 PM

And for heights…

<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>

Screen Shot 2017-10-06 at 3.41.43 PM

I’ve been working a lot this week so I’m going to leave it off here. I’ll be back next week for the continuation of the tutorial. Peace!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s