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 CSSposition: 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 (themax-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 (themax-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
formargin
p
forpadding
Side
t
formargin-top
orpadding-top
b
formargin-bottom
orpadding-bottom
l
formargin-left
orpadding-left
r
formargin-right
orpadding-right
x
formargin-left
orpadding-left
andmargin-right
orpadding-right
y
formargin-top
orpadding-top
andmargin-bottom
orpadding-bottom
- nothing for
margin
orpadding
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
- setsmargin
orpadding
to0
1
- setsmargin
orpadding
to0.25rem
2
- setsmargin
orpadding
to0.5rem
3
- setsmargin
orpadding
to1rem
4
- setsmargin
orpadding
to1.5rem
5
- setsmargin
orpadding
to3rem
auto
- setsmargin
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