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:
- using Bootstrap 4 to create a layout
- using Bootstrap 4 components to add interactivity to the site
- 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:
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.
col turned into
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:
- create a sticky navbar with mostly right coloring
- make it mobile friendly
- 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:
.navbarsets up the entire container
.fixed-topsticky navbar up top
.collapsecontainer at medium width and shows the toggle
.containerconstrains the contents of the navbar to the container size
.navbar-togglerthis is the button that toggles the collapse. The actual HTML features a couple of
data-*attributes for JS purposes
.collapsemakes the contents collapsible
.navbar-collapsenavbar-specific collapsible styling
#mainNavbaran ID that the
.navbar-toggleruses as a target
And the rest is self-explanatory. Here’s the final result so far:
Note that the original heading is gone because it’s covered by the sticky bar.
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:
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
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:
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.
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:
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:
We’ve so far covered:
- Basics of the grid layout
- Group listing
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-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.
.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
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:
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:
- the images on cards
- borders on a group listing
- 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: