Chapter 5. Working with Content

Content components in Bootstrap 4 are reserved for the most commonly used HTML elements such as images, tables, typography, and more. In this chapter, I'll teach you how to use all the building blocks of HTML that you'll need to build any type of website or web application. We'll start with a quick overview of each component and then we'll build it into our blog project. Bootstrap 4 comes with a brand new CSS reset called Reboot. It builds on top of Normalize.css to make your site look even better out of the box. Before we jump in, let's review some Reboot basics when dealing with content components in Bootstrap 4.

Reboot defaults and basics

Let's start this chapter by reviewing the basics of Reboot when using content components in Bootstrap. One of the main changes for content components in Bootstrap 4 is the switch from em to rem units of measure. rem is short for root em and is a little bit different from a regular em unit. em is a relative unit to the font-size of the parent element it is contained within. This can cause a compounding issue in your code that can be difficult to deal with when you have a highly nested set of selectors. The rem unit is not relative to its parent, it is relative to the root or HTML element. This makes it much easier to determine the actual size of text or other content components that will appear on the screen.

The box-sizing property is globally set to border-box on every element. This is good because it ensures that the declared width of an element doesn't exceed its size due to excess margins or padding.

The base font-size for Bootstrap 4 is 16px and it is declared...

Learning to use typography

In Bootstrap 4, there are no major changes with the core typographic HTML tags. Header tags and their supporting CSS classes still work as they always have. However, there are some new utility classes you can use with some type tags to provide further variations for things like headers and titles. Later on in the book we'll be using a number of type tags and styles in our blog project. A couple of quick examples would be header tags for page and post titles, and lists for a number of different components. Let's start by reviewing the new display heading classes in Bootstrap 4.

Using display headings

Regular header tags work great in the flow of a page and are key for setting up the hierarchy of an article. For a landing page or other display-type templates, you may require additional header styles. This is where you can use the new display heading classes to create slightly larger titles with some different styling. There are four different levels of display headings...

Customizing headings

You may want to add some additional context to your headers and you can easily do this with some included Bootstrap 4 utility classes. By using a contextual text class, you can tag on a description to a heading like this:

<h3> 
  This is the main title 
  <small class="text-muted">this is a description</small> 
</h3> 

As you can see, I've added a class of text-muted to a <small> tag that is nested within my header tag. This will style the descriptive part of the text a bit differently, which creates a nice looking effect:

Using the lead class

Another utility text class that has been added to Bootstrap 4 is the lead class. This class is used if you want to make a paragraph of text stand out. It will increase the font size by 25% and set the font-weight of the text to light or 300. It's easy to add, as the following code shows:

<p class="lead"> 
here's some text with the .lead class to make this paragraph look...

How to style images

Bootstrap allows you to do a few useful things with images through the use of CSS classes. These things include: making images responsive, converting images to shapes, and aligning images. In the next section, I'll show you how to apply all these techniques to your images.

Making images responsive

Bootstrap 4 comes with a new responsive image class that is super-handy when developing websites or web-based applications. When applying the class img-fluid to an <img> tag, it will automatically set the max-width of the image to 100% and the height to auto. The result will be an image that scales with the size of the device viewport. Here's what the code looks like:

<img src="myimage.jpg" class="fluid-image" alt="Responsive Image"> 

It's as easy as adding that class to the image to trigger the responsive controls. A word of advice: I would recommend making your images a little bit bigger than the maximum size you think you will need. That way, the image will...

Coding tables

Tables in Bootstrap 4 are largely unchanged from the previous version of the framework. However, there are a few new things, like inverse color table options and responsive tables. Let's start with the basics and we will build in the new features as we go.

Setting up the basic table

The basic table structure in Bootstrap takes advantage of almost all the available HTML table tags. The header is wrapped in <thead> and the body <tbody> tags. This will allow additional styling as we get into the inverse table layout. For now, let's see how we put together a basic table in Bootstrap:

<table class="table"> 
<thead> 
  <tr> 
    <th>first name</th> 
    <th>last name</th> 
    <th>twitter</th> 
  </tr> 
</thead> 
<tbody> 
  <tr> 
    <td>john</td> 
    <td>smtih</td> 
    <td>@jsmtih</td> 
  <...

Summary

With tables finished off, that brings this chapter to a close. I hope this has been a good introduction to content components in Bootstrap, as well as a good review of what's new for these types of components in Bootstrap 4. To review, we learned about: Reboot, typography, images, and tables. In the next chapter, we'll start to jump into some more complicated components and build them into our blog project.