Bootstrap 2 Footer Example For An Essay

HTML <article> Tag

❮ PreviousComplete HTML ReferenceNext ❯


  <h1>Google Chrome</h1>
  <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>

Try it Yourself »

Definition and Usage

The <article> tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Potential sources for the <article> element:

  • Forum post
  • Blog post
  • News story
  • Comment

Browser Support

The numbers in the table specify the first browser version that fully supports the element.


Differences Between HTML 4.01 and HTML5

The <article> tag is new in HTML5.

Global Attributes

The <article> tag also supports the Global Attributes in HTML.

Event Attributes

The <article> tag also supports the Event Attributes in HTML.

Related Pages

HTML DOM reference: Article Object

Default CSS Settings

Most browsers will display the <article> element with the following default values:

article {
    display: block;

❮ PreviousComplete HTML ReferenceNext ❯

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. ),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 became and became .Every 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:

  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 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:

  • sets up the entire container
  • sticky navbar up top
  • hides the container at medium width and shows the toggle
  • constrains the contents of the navbar to the container size
  • this is the button that toggles the collapse. The actual HTML features a couple of attributes for JS purposes
  • hamburger icon
  • makes the contents collapsible
  • navbar-specific collapsible styling
  • an ID that the 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.


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 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 page and get to the which is going to be a lot more fun. For reference, you can find this here:

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

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 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 element a little muted with class. After that, we’ll apply the class to the actual paragraphs. The 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.

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 to the 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 class can be substitute with and classes for different effects. The class kind of smushes cards together where they’re touching one another, spaces them out and 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 set a reasonable max-width on the element. However, this means that you lose another VERY important feature of the other card grouping classes: equal height and distribution.

The and classes ensure that the 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 button isn’t place in the same place but that can be easily resolved by using a classes.

The other issue is that the header image doesn’t scale correctly so I had to apply a 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 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.



Leave a Reply

Your email address will not be published. Required fields are marked *