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 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.
- Close icon
- Text colors a pro Background colors
- Image replacement
- Vertical align
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 utilities allows to change the value of the CSS
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:
We used one of the classes e.g. in the Carousels and
Progress lesson, hiding the carousel caption using the
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.
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.
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:
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
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
<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.
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>
Notice the wrapper with the
.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:
Image replacement is a micro-utility which allows to hide some text and
replace it with an image. It's represented only by the
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>
To change the position of an element using the CSS
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: stickyproperty 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.
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>
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
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
<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:
We can set
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
There's a lot of such classes and their names consist of these parts:
Eventually, we can specify the breakpoint from which should the given
padding will work as well:
The final class could be e.g.
m1-2 which sets the
- nothing for
paddingon all four sides of the element
We're very familiar with breakpoints already, they are:
We set the size as multiples of the
$spacer variable which is
1rem by default:
marginto 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
This utility is used for vertical centering. Don't open your champagne yet
though, this only sets the value of the
property. This property can center only inline elements, inline blocks or table
elements. We'll talk about the exciting vertical centering in the flexbox
<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 last utility classes we're going to introduce are
.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