Bootstrap 4 was released as version (at last!) and brought many new cool features for us. One of them is a set of upgraded utility classes that we’ll focus on in this article.

Introducing Bootstrap

Bootstrap utility classes are meant to be applied to various elements on the page to quickly style them in some manner without the need to write custom CSS rules. In many cases, you just provide a class for your element and observe the result right away. If you’ve never employed utility classes before, fear not: in most cases they are quite simple, yet powerful. They are very convenient because you don’t need to reinvent the wheel and can concentrate on more complex tasks when a web application.

There are lots of Bootstrap utility classes available that set the element’s position, tweak its display and float properties, adjust margins and paddings, color the text and background, and more. A full list of these classes can be found on the getbootstrap.com official website, and in this article I’ll cover some interesting Bootstrap utility classes that may greatly simplify your life as a developer. So, shall we start?

Flex

Flex is a new and much-anticipated feature of Bootstrap 4. It allows us to easily manage an element’s layout and alignment with a bunch of classes. Note, however, that this feature relies on the display: flex property, which may not be supported by older browsers. Interestingly, Bootstrap’s grid system now also relies on flexbox.

Flex is quite a big topic on its own and we won’t discuss it thoroughly in this article. Let me just quickly show some results that you may achieve with this feature.

First, it’s possible to easily control the direction of your elements (that is, whether they’ll be displayed left to right or right to left). For instance:

<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

This will render three elements aligned to the right, with the first element located on the right-most position:

Bootstrap utility classes: flex-row-reverse

The order of the elements may be further controlled with the classes like order-N where N is the position’s number:

<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

Note that this feature supports responsiveness with the classes like order-sm-1.

The elements can be also aligned in a specific manner on the X or Y axis. For example:

<div class="d-flex align-items-center bd-highlight mb-3">
  <div>Flex item</div>
</div>

This will center the item on the Y axis:

Bootstrap utility classes: flex-align-items

Float

Float is a new utility that replaces good old “pulls”. In Bootstrap 3 you would write:

<div class="pull-left">Pull to the left!</div>

In Bootstrap 4:

<div class="float-left">Float to the left!</div>

A cool enhancement is that floats have become responsive too, meaning you don’t need to craft your own styles to take care of various breakpoints. For instance, the following element will float to the right only on medium (or larger) screens:

<div class="float-md-right"></div>

Display

The display property has also been fully reworked in Bootstrap 4. It now supports all display values (from none to flex) and is fully responsive. The corresponding classes look like .d-{breakpoint}-{value}:

  • breakpoint may have values of sm, md, lg, or xl. If this value is skipped, then xs is used by default, which effectively means the display will have the same value on all viewports.

  • The {value} is any of those supported by the display property.

This means that you may hide an element for chosen viewports like this:

<div class="d-lg-none">Hide on screens wider than lg</div>

What’s more, this utility works with print layouts too. For instance, an element may be hidden for printing:

<div class="d-print-none">Screen Only (Hide on print only)</div>

Sizing

With Bootstrap 4 you may also control the sizing of your elements with ease. Suppose we want to display a div that occupies 25% of the parent’s width:

<div class="w-25">Width 25%</div>

What about the height? That’s possible too:

<div class="h-25">Height 25%</div>

Want to provide max-height or max-width? Utilize either mh-100 or mw-100 classes. As you see, nothing complex!

Spacing

The Spacing feature presents a wide range of small but handy utilities that can be used to quickly set margins and paddings for any element. Lazy developers like me will surely love this addition!

The corresponding classes look like {property}{sides}-{size}:

  • {property} is either m (margin) or p (padding).
  • {sides} can have values like t (top) or l (left). If it has a blank value, the sizing will be applied to all four sides of the element.
  • {size} is an integer from 0 to 5, or auto. This integer specifies a multiplier passed to the formula that calculates the resulting sizing ($spacer * MULTIPLIER). The default value of $spacer is 1 rem. For example 1 corresponds to the 0.25 multiplier, 2 corresponds to the 0.5 multiplier, 3 to the value of $spacer alone, 4 corresponds to the 1.5 multiplier, and finally 5 corresponds to the 3 multiplier.

The following code means that the element will have left and right margins with the value of 1rem (x means “X axis”):

<div class="mx-3"></div>

Bootstrap utility classes: spacing

Text

Text utilities were available in Bootstrap 3, but in the new version they’ve become even more powerful and convenient.

Alignment

As before, you can specify the alignment of text and, for example, make it centered:

<p class="text-center">Text is centered!</p>

But, what’s more, these utility classes are also responsive now, which means we can make this text centered only on extra-large viewports:

<p class="text-xl-center">Text is centered only on very large screens!</p>

Transform

Transform is a new, small feature that may change the text to lowercase, uppercase or capitalize it. For instance:

<p class="text-capitalize">capiTaliZed</p>

This will display our text as “CapiTaliZed” (only the first “c” letter is uppercased):

Bootstrap utility classes: text-transform

Font Weights

Changing a font’s weight is now as simple as it can be:

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-light">Light weight text.</p>

Bootstrap utility classes: font-weight

Continue reading %A Beginner’s Guide to the Latest Bootstrap Utility Classes%



Source link
thanks you RSS link
( https://www.sitepoint.com/bootstrap-utility-classes/)

LEAVE A REPLY

Please enter your comment!
Please enter your name here