• 12 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 9/3/20

Manage Your Components With Utility Classes

Log in or subscribe for free to enjoy all this course has to offer!

Bootstrap has a group of utility classes that you can apply to most components and elements in your page that allow you to control aspects such as the color, shape, positioning, or sizing. You’ve already come across some of them such as the .bg-* classes for controlling background color, the .w-* classes for controlling an element’s width, and the .d-* classes for controlling an element’s display property.

In this chapter, you’ll learn about some of the other utility classes that you can use to enhance the Space School site.

Space it Out

You might have noticed that some elements of the site’s pages are quite packed together. As a site for a Space School, it would be nice to have more space on the page.

Luckily, Bootstrap has some easy-to-use classes that give elements some extra margins and padding. These are aptly named spacing utility classes. The classes are named using the format  {property}{sides}-{size}  for xs, and  {property}{sides}-{breakpoint}-{size}  for sm, md, lg, and xl.

Property is one of:

  • m - for classes that set margin

  • p - for classes that set padding

Sides is one of:

  • t - for classes that set margin-top or padding-top

  • b - for classes that set margin-bottom or padding-bottom

  • l - for classes that set margin-left or padding-left

  • r - for classes that set margin-right or padding-right

  • x - for classes that set both *-left and *-right

  • y - for classes that set both *-top and *-bottom

  • blank - for classes that set a margin or padding on all 4 sides of the element

Size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0

  • 1 - (by default) for classes that set the margin or padding to 0.25 rem

  • 2 - (by default) for classes that set the margin or padding to 0.5 rem

  • 3 - (by default) for classes that set the margin or padding to 1 rem

  • 4 - (by default) for classes that set the margin or padding to 1.5 rem

  • 5 - (by default) for classes that set the margin or padding to 3 rem

  • auto - for classes that set the margin to auto

For example:

  • To set the top margin of an element to 1.5 rem, add the class  .mt-4  (m for margin, t for top, 4 for 1.5 rem.

  • To set the padding of all sides of an element to 1 rem, add the class  .p-3  (p for padding, 3 for 1 rem.

  • To set the top and bottom padding of an element to 0, add the class  .py-0  (p for padding, y for top and bottom—i.e. both sides in the y-direction, and 0 for… 0).

  • To set the left and right margin of an element to auto, add the class  .mx-auto  (m for margin, x for left and right—i.e. both sides in the x-direction, and auto for… auto).

You can add these spacing utility classes to any elements on the page such as rows, buttons, or cards. Whatever is appropriate to give the elements on the page the right amount of spacing.

Notice that the formula for the spacing utilities can include a breakpoint:  {property}{sides}-{breakpoint}-{size}.

This allows you to apply space when the viewport sizes are different. For example, when the cards are stacked above each other in screens that are below the large breakpoint, apply a vertical margin. This makes the cards slightly separate on the Space School’s Home and Lessons pages.

Now you can give the elements on the pages you’ve built some breathing space. Try out the different spacing utilities on the cards, form, headings or any other parts of the pages until it looks right to you. You can check out the part-4/chapter-3/spacing folder in the course’s Git repository for ideas and comparison.

Add Borders & Shadows

You can improve the cards in the Home and Lessons pages of the Space School site by making them stand out a bit more. That’s quite straightforward to do using Bootstrap’s border and shadow utility classes.

To add a border to an element, or change the default border, add a .border-{value} class to the element. 

To control the color of an element’s border, {value} can be any of the options you came across with the  .bg-*  and  .button-*  classes. Namely, primary, secondary, success, danger, warning, info, light, or dark. You also have the additional option of white for the value of the border’s color.

The following table shows the classes available for controlling the shadow of an element:

Class

Shadow effect

Default CSS values

.shadow-none

No shadow

box-shadow: none

.shadow-sm

Small shadow 

box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)

.shadow

Regular shadow

box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)

.shadow-lg

Large shadow

Box-shadow: 0 1rem 3rem rgba(0,0,0,.175) 

Try different options for card borders and shadows on the site's Home and Lessons pages. Choose ones that make the cards on these pages stand out. Then try them on different elements to see if you find an effect you’d like to add.

You can check out the part-4/chapter-3/borders-and-shadows folder in the course’s Git repository if you need some hints or inspiration.

Stretch the link

We’ll use another Bootstrap utility class to improve the cards on the Home and Lessons pages. This class was introduced in Bootstrap version 4.3, so if you want to use it in your projects, you’ll need to make sure that you’re using that version or higher.

The stretched link utility class automagically makes the containing block of a link clickable. For example, if you add the class .stretched-link to the link in a card component, it will make the whole card clickable:

<div class="card">
<img src="..." alt="..." class="card-img-top">
<div class="card-body">
...
<a href="..." class="btn btn-primary stretched-link">Go</a>
</div>
</div>

Add the  .stretched-link  class to the links in the cards on the Lessons page to see how much improvement this class can bring!

Let’s Recap!

  • Bootstrap has comprehensive spacing utility classes for setting the padding and margins of elements.

  • Use Bootstrap’s utility classes to add borders and shadows to components and elements.

  • Use the stretched-link class to enhance the usability of the card component.

Now that you can implement many of Bootstrap’s utility classes and components, you’re ready to start learning how to customize Bootstrap sites.

Example of certificate of achievement
Example of certificate of achievement