Lesson 22 - Bootstrap - Utilities

In the previous lesson, Bootstrap - Tooltips, we finished Bootstrap components. We already know that the Bootstrap CSS framework also has, next to components, utilities and a grid system. Today's lesson is going to be about the utilities.

Utilities

Utilities are single-purpose CSS classes which will become your favorite helpers with everyday work. We've already explained some of the basic utilities when we're learning components. These were mainly color and text alignment utilities. Bootstrap provides the following utilities. The ones we've already talked about contain a link to the corresponding lesson.

• Borders
• Clearfix
• Close icon
• Text colors a pro Background colors
• Display
• Embed
• Flex
• Float
• Image replacement
• Position
• Screenreaders
• Sizing
• Spacing
• Text
• Vertical align
• Visibility

We'll leave flex utilities until next time because it's the only one which will take a longer time to discuss. We'll talk about the rest of the utilities today.

Display

Display utilities allows to change the value of the CSS display property quickly. That way we can simply e.g. change images to blocks, blocks to inline-blocks and such. An element can then be used in a place where an element of other type is expected.

We are provided with these classes:

• .d-none
• .d-inline
• .d-inline-block
• .d-block
• .d-table
• .d-table-cell
• .d-flex
• .d-inline-flex

We used one of the classes e.g. in the Carousels and Progress lesson, hiding the carousel caption using the .d-none class.

Responsive version

Using breakpoints we can set the given value of the display property not before achieving a specific screen size. That can be used, for example, for hiding content on mobile devices and showing it on larger ones. For each class mentioned above there are responsive classes available for every breakpoint. These are:

• .d-sm-none
• .d-sm-inline
• .d-sm-inline-block
• .d-sm-block
• .d-sm-table
• .d-sm-table-cell
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-none
• .d-md-inline
• .d-md-inline-block
• .d-md-block
• .d-md-table
• .d-md-table-cell
• .d-md-flex
• .d-md-inline-flex
• .d-lg-none
• .d-lg-inline
• .d-lg-inline-block
• .d-lg-block
• .d-lg-table
• .d-lg-table-cell
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-none
• .d-xl-inline
• .d-xl-inline-block
• .d-xl-block
• .d-xl-table
• .d-xl-table-cell
• .d-xl-flex
• .d-xl-inline-flex

If we used e.g. the .d-md-block class, the element would be rendered as block on medium sized devices and larger. On smaller devices, it'd be rendered in a default way.

Combining classes

We can combine the classes to achieve ideal responsive behavior. Thanks to that we can define any intervals in which elements should be visible or hidden. That way, we can elegantly avoid writing media queries manually or even creating multiple versions of the same website.

Let's give two examples for all. If we wanted an element to be hidden only on small devices, we'd use the following classes:

d-sm-none d-md-block

The element would be visible on the "xs" devices, hidden on the "sm" devices and visible again on the "md" devices". "xs" is the default breakpoint which we don't specify, the style then works for all the breakpoints. The second example displays the element only on large devices ("lg").

d-none d-lg-block d-xl-none

Embed

Did you ever try to embed a youtube video into your website? You probably found out that the video isn't responsive and if you write a responsive style for it, it's not easy to keep the same aspect ration of the element. Bootstrap comes with a solution for this problem with its Embed utilities.

The styles are applied on the elements <iframe>, <embed>, <video>, and <object> or on elements with the .embed-responsive-item class which Bootstrap recommends to use in all cases. The border around the frame is automatically disabled.

Example

To embed a responsive youtube video, we use the following code:

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YlUKcNNmywk" allowfullscreen></iframe>
</div>

Live demo:

Notice the wrapper with the .embed-responsive and .embed-responsive-16by9 classes. The second class defines the aspect ration, as can be noticed from its name. To specify the aspect ratio we can use the classes:

• .embed-responsive-21by9
• .embed-responsive-16by9
• .embed-responsive-4by3
• .embed-responsive-1by1

Image replacement

Image replacement is a micro-utility which allows to hide some text and replace it with an image. It's represented only by the .text-hide class which hides the text in a way it's still visible for search engines. That's important e.g. for headings <h1>, when we want the logo to be an image but at the same time we'd like the search engines to understand the heading as text.

<h1 class="text-hide" style="background-image: url('https://www.ict.social/images/1/css/bootstrap/bootstrap-stack.png'); width: 64px; height: 64px; background-size: 64px; background-repeat: no-repeat;">Twitter Bootstrap course</h1>

The result:

Position

To change the position of an element using the CSS position property, we can use the following predefined classes:

• .position-static - The default position.
• .position-relative - Position moved relatively to the original position.
• .position-absolute - Position set relatively to the browser's window.
• .position-fixed - Position set regardless on the scrollbar position.
• .fixed-top - The element doesn't scroll with the page, instead stays on a fixed position on the top edge of the page. This functionality is used by relatively large amount of websites for navigation bars, enabling the user to use the navigation from anywhere on the website, needless to scroll up for it.
• .fixed-bottom - The element doesn't scroll with the page, instead stays on a fixed position the bottom edge of the page.
• .sticky-top - Works only in new browsers (the support for the CSS position: sticky property and value). The element doesn't behave any differently until we start scrolling, then it sticks as if its position was fixed. If we used this class on the navigation again, the benefit would be that we could place e.g. a large logo above the navigation which would scroll away with the rest of the page while the navigation sticks to the top edge of the screen. The logo wouldn't occupy any space this way and the navigation would be always close at hand.
• .position-sticky - A new property enabling the element to stick to the browser screen only if moved outside the page when scrolling. Otherwise it remains in its position.

Screen readers

Encouraging to optimize for screen readers as well has been with us during the whole course. We already know the .sr-only class which we assign typically to the <span> elements with an additional description for screen readers which wouldn't have to be obvious from the rest of the text. These elements aren't visible for regular browsers. We could use the class e.g. like this:

<span class="sr-only">A demand overview in 2018</span>

If we want to be able to select the element by keyboard, we assign the .sr-only-focusable class to it too. We do this usually for links which skips to the main content of the page, without forcing the user to wade through e.g. the navigation when using a screen reader:

<a class="sr-only sr-only-focusable" >Skip to the main content</a>

Sizing

Another micro-utility for defining the size of elements in percentage. We've already encountered it when working with progress bars.

For the width we can use the classes:

• .w-25 - 25% of the parent element width
• .w-50 - 50% of the parent element width
• .w-75 - 75% of the parent element width
• .w-100 - 100% of the parent element width
• .mw-100 - The maximum width is 100% of the parent element (the max-width property)

And for the height:

• .h-25 - 25% of the parent element height
• .h-50 - 50% of the parent element height
• .h-75 - 75% of the parent element height
• .h-100 - 100% of the parent element height
• .mh-100 - The maximum height is 100% of the parent element (the max-height property)

Example

<div class="w-25 bg-success">25%</div><br />
<div class="w-50 bg-success">50%</div><br />
<div class="w-75 bg-success">75%</div><br />
<div class="w-100 bg-success">100%</div><br />

<div style="height: 150px">
    <div class="h-25 d-inline-block bg-warning">25%</div>
    <div class="h-50 d-inline-block bg-warning">50%</div>
    <div class="h-75 d-inline-block bg-warning">75%</div>
    <div class="h-100 d-inline-block bg-warning">100%</div>
</div>

The result in the browser:

Spacing

We can set margin and padding to our elements simply using the following utilities. This is very useful because from time to time we need to make a gap and defining new styles all the time would be very frustrating.

There's a lot of such classes and their names consist of these parts:

{property}{side}-{size}

Eventually, we can specify the breakpoint from which should the given margin/padding will work as well:

{property}{side}-{breakpoint}-{size}

The final class could be e.g. m1-2 which sets the margin-left to 0.5rem.

Property

We enter:

• m for margin
• p for padding

Side

• t for margin-top or padding-top
• b for margin-bottom or padding-bottom
• l for margin-left or padding-left
• r for margin-right or padding-right
• x for margin-left or padding-left and margin-right or padding-right
• y for margin-top or padding-top and margin-bottom or padding-bottom
• nothing for margin or padding on all four sides of the element

Breakpoint

We're very familiar with breakpoints already, they are:

• sm
• md
• lg
• xl

Size

We set the size as multiples of the $spacer variable which is set to 1rem by default:

• 0 - sets margin or padding to 0
• 1 - sets margin or padding to 0.25rem
• 2- sets margin or padding to 0.5rem
• 3- sets margin or padding to 1rem
• 4- sets margin or padding to 1.5rem
• 5- sets margin or padding to 3rem
• auto - sets margin to auto, we use it e.g. to center block elements.

If you change the value of the $spacer variable in your custom Bootstrap build, the values above will change in the same ratio as well.

Vertical align

This utility is used for vertical centering. Don't open your champagne yet though, this only sets the value of the vertical-align CSS property. This property can center only inline elements, inline blocks or table elements. We'll talk about the exciting vertical centering in the flexbox lesson.

Example

<p>
    <span class="align-baseline">baseline</span>
    <span class="align-top">top</span>
    <span class="align-middle">middle</span>
    <span class="align-bottom">bottom</span>
    <span class="align-text-top">text-top</span>
    <span class="align-text-bottom">text-bottom</span>
</p>

The result:

Visibility

The last utility classes we're going to introduce are .visible and .invisible, internally changing the value of the visibility CSS property. The elements are hidden but still take space as if they were still there. The classes don't use the display CSS property in any way.

In the next lesson, Bootstrap - Flex utilities, we'll discuss Flex utilities which we use to simply align anything anywhere