Bootstrap hasn’t gotten a major update in a few years. My frequently-search Bootstrap 3 article is a great testament. I was going to pull it or point people to the right place when I realized that 4 isn’t out yet!

Well, we’ll cover a preview today. What we’re going to do is attempt to build a Bootstrap 4-only podcasting site that I will possibly convert into a WordPress theme in a future article. We’re going to cover:

  1. using Bootstrap 4 to create a layout
  2. using Bootstrap 4 components to add interactivity to the site
  3. theming and customizing Bootstrap 4 with SASS

That should do it! For inspiration we’re going to use the theme I created in the last tutorial. Here’s a life screenshot from my writing blog.

The Basic Layout (Grid + Navigation)

The basic layout involves using Bootstrap’s new flexbox grid. The grid can be quite overwhelming to use due to the overwhelming number of options but we’ll stick something simple. We’re looking for a semi-fluid container and content that is split apart in some kind of a nice ratio.

The setup is pretty similar (if not identical) to Bootstrap 3 and the hierarchy looks somewhat like this:

.container // restricts max-width but is fluid
  .row // rows separate content horizontally
    .col-6 // column that takes up 1/2 of its parent
    .col-6 // column that takes up 1/2 of its parent
  .row // second row
    .col // two .cols split content in half just like above
    .col

As you can see it’s pretty simple. I decided to build out as much of the original site with just containers, rows, and columns as possible and here’s the result on CodePen:

See the Pen NdXVJe by Antonin Januska (@AntJanus) on CodePen.

Each step in the hierarchy, of course, has tons of modifiers so that you can get your grid to look exactly how you want it. Here’s a quick screenshot:

A few things to note, the header itself is in a separate container. We’ll mess around with this a bit more when we get to the jumbotron section. This is because we want the background image to cover the area behind it unrestricted by the container max width.

Before we move on, we should make sure that the theme is mobile friendly so we’ll apply a few more classes. I won’t post a separate CodePen for it but basically any “numbered” column class (eg. col-2 ),I replaced with its breakpoint alternative. I decided that the content should appear in its current form unless on mobile where it should be stacked.

So col-2 became col-sm-2 and col-8 became col-sm-8 .Every col turned into col-sm .

Cool!

Nav

Let’s build a nav. I found that Bootstrap 4 navigation is a bit more confusing than before and that’s because of the sheer number of options. Let’s look at the breakdown of how those are formed:

.navbar // and visual classes
  .container // constrain contents of nav
    .navbar-nav // usually an unorder list
      .nav-item // usually a list item
        .nav-link // the actual link

Uhm that’s pretty deep nesting. But let’s get to it. There are A LOT of modifiers for a navbar; however, I could not reliably replicate my original styling with the navbar pushed to the right so here’s what I’ll do:

  1. create a sticky navbar with mostly right coloring
  2. make it mobile friendly
  3. revisit it with custom CSS at the end of the article

To make it mobile friendly, I’m using the Collapse plugin (built into Bootstrap). Here’s what the final nav structure looks like nested level by nested level:

.navbar .fixed-top .navbar-toggleable-md .bg-inverse .navbar-inverse
  .container
    .navbar-toggler
      .navbar-toggler-icon
    .collapse .navbar-collapse #mainNavbar
      .navbar-nav
        .nav-item
          .nav-link

Wow. What do all these mean? Let’s look at these class by class:

  • .navbar sets up the entire container
  • .fixed-top sticky navbar up top
  • .navbar-toggleable-md hides the .collapse container at medium width and shows the toggle
  • .container constrains the contents of the navbar to the container size
  • .navbar-toggler this is the button that toggles the collapse. The actual HTML features a couple of data-* attributes for JS purposes
  • .navbar-toggler-icon hamburger icon
  • .collapse makes the contents collapsible
  • .navbar-collapse navbar-specific collapsible styling
  • #mainNavbar an ID that the .navbar-toggler uses as a target

And the rest is self-explanatory. Here’s the final result so far:

See the Pen rjJBxR by Antonin Januska (@AntJanus) on CodePen.

Note that the original heading is gone because it’s covered by the sticky bar.

Jumbotron

The jumbotron used to be called the “hero” element, wasn’t it? I don’t remember but the jumbotron is basically a huge area with big text that calls out to you. In my original Bootstrap 3 theme, I used it to display a large image and the name of the site. Let’s go ahead and do that. Here’s what a typical jumbotron structure looks like:

.jumbotron // makes sense
  .display-3 // a heading size
  .lead // large text

There are a few other things you might want in your jumbotron like paragraphs, large buttons, whatever else. We’ll go ahead and modify our original header to match this structure:

.jumbotron .jumbotron-fluid
  .container
    .display-4 // a little smaller than .display-3
    .lead

This way, we can have a grid-constraint jumbotron that spans the entire width of the page (the .jumbotron-fluid class does that for us).

Before I move on, I’m going to go ahead and set a background image for this jumbotron in the custom CSS part of CodePen. Honestly, this is to eliminate that bland grey look.

Here’s what it looks like:

See the Pen OWZbom by Antonin Januska (@AntJanus) on CodePen.

We’re getting closer!

The various layouts

Before I go any further, it’d be worthwhile to discuss that I need three separate layouts. We’ve just created a “post” layout. We still need a “post listing” and a “home page” layout. A “page” layout will be identical.

Before we move onto “post listing”, here’s a preview of the page layout with live content (copy/pasted of course) from a post I recently wrote.

Not GREAT but not too bad! Let’s quickly tackle the post listing page and get to the home page which is going to be a lot more fun. For reference, you can find this here: http://codepen.io/AntJanus/pen/qRQWoX

Post Listing

This part of the Bootstrap 4 tutorial may be a little redundant but I thought I’d include it anyways since we’ll be using the List Group component.

Let’s back up a moment and check out what my post listing page looks like right now in my Bootstrap 3 theme:

I want to make the new iteration look a tad better using List Groups. Here’s the basic list group HTML structure:

.list-group
  a.list-group-item .list-group-item-action
   //content goes here

I wanted to quickly share how the content structure will look like within that group item:

div
  h5 //for title
  small // for date
  p // for summary

This is completely up to you. Here’s what it looks like:

And here’s the preview:

See the Pen BS4 Alpha post listing pt 1 by Antonin Januska (@AntJanus) on CodePen.

I’m not super happy about it especially because of that pesky border and some of the spacing. So let’s use a few utilities to tighten up that content and get rid of the border.

Utilities
Bootstrap 4 comes with a huge array of utilities to push and pull and move and resize and adjust elements to your liking without having to dig into the CSS. Let’s try a few out!

First, I want to get rid of the group listing border and only have it on the bottom of each element. To do that, we have to employ 2 separate classes on all of the .list-group-item elements and an extra class for the first and last one like so:

.list-group-item .list-group-item-action .border-0 //first item in the list
.list-group-item .list-group-item-action .border-left-0 .border-right-0 // middle items
.list-group-item .list-group-item-action .border-left-0 .border-right-0 .border-bottom-0 // last item on the list

Seem a little verbose? Totally is! But that’s why you have to invest time in customizing bootstrap and building on top of it. We’ll tighten all this up once we get to that part.

Next, let’s make that small element a little muted with .text-muted class. After that, we’ll apply the mb-1 class to the actual paragraphs. The mb-* classes set bottom margins.

There is a whole host of other spacing utilities you can check out in the docs. The contents section should look like this:

h5
small.text-muted
p.mb-1

Here’s what the final post listing page looks like:

And here’s the live preview:

See the Pen BS4 Alpha post listing pt 2 by Antonin Januska (@AntJanus) on CodePen.

Pagination
Before I call it a day, let’s quickly add some pagination! Yep, so Bootstrap 4, just like BS3, has a pagination component. The basic structure looks like this:

nav
  .pagination
    .page-item
      .page-link

Not too bad! With some Flexbox magic, we’ll just add justify-content-center to the .pagination item to get it to show up in the middle of the container.

Here’s what that looks like:

And here’s the embed:

See the Pen BS4 Alpha post listing pt 3 by Antonin Januska (@AntJanus) on CodePen.

So far

We’ve so far covered:

  1. Basics of the grid layout
  2. Navigation
  3. Jumbotron
  4. Group listing
  5. Pagination
  6. Utilities
    Home Page

On the home page, we’ll cover only one component: the card. The card component has a ton of options and I think it’s one of the funnest parts of Bootstrap 4. Let’s look at a simple layout:

.card-group // standard grouping of cards
  .card // an atomic element
    img.card-img-top // header image
    .card-block // this is where the content goes
      .card-title
      .card-text

Pretty simple. The .card-group class can be substitute with .card-deck and .card-columns classes for different effects. The .card-group class kind of smushes cards together where they’re touching one another, .card-deck spaces them out and .card-columns creates a masonry (Pinterest-like) effect.

The only issue I’ve found with the card groupings has been that if you have a single card on the page, it stretches to fill the container. If you have 2, they split. Only .card-columns set a reasonable max-width on the .card element. However, this means that you lose another VERY important feature of the other card grouping classes: equal height and distribution.

The .card-group and .card-deck classes ensure that the .card elements and their contents are scaled to be equal sized, even if the content doesn’t require them to do so. With that, you get a nice even look. Here’s an example:

You can see that the Read More button isn’t place in the same place but that can be easily resolved by using a .card-footer classes.

The other issue is that the header image doesn’t scale correctly so I had to apply a style="height: auto; max-width: 100%" onto the image manually (to be replaced with a class).

I took some other liberties with the layout: removing the sidebar, adding a margin to the pagination nav. Check out the embedded CodePen for more details. But here’s how the .card-deck setup looks like:

.card-deck
  .card
    .card-img-top // with custom style for height and width
    .card-block
      .card-title
      .card-text .m-0 // the date with no margin
      .card-text //summary
    .card-footer
      .btn btn-block // read more link

And that’s it! Here’s the screenshot:

And the embed:

See the Pen BS4 Alpha home page pt 1 by Antonin Januska (@AntJanus) on CodePen.

Learn Anything?

That’s it for the Bootstrap 4 tutorial. The layout is pretty good! There are some glaring issues that Bootstrap 4 couldn’t fix itself:

  1. the images on cards
  2. borders on a group listing
  3. white text background on jumbotron title

But that’s honestly minimal CSS in comparison to all the heavy lifting BS4 did for us.

I went ahead and did some of that on the Home layout so that we could see what a little CSS could do for us but next time, you’ll see a more comprehensive overview on customizing Bootstrap 4!

And after scrolling:

And here’s the embed:

See the Pen BS4 Alpha home page with liberties by Antonin Januska (@AntJanus) on CodePen.