HTML <article> Tag
❮ PreviousComplete HTML ReferenceNext ❯
<p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
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
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.
The <article> tag also supports the Global Attributes in HTML.
The <article> tag also supports the Event Attributes in HTML.
HTML DOM reference: Article Object
Default CSS Settings
Most browsers will display the <article> element with the following default values:
❮ 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:
- 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:
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:
- 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 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: 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 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:
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.
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 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.
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:
See the Pen BS4 Alpha home page with liberties by Antonin Januska (@AntJanus) on CodePen.