Bootstrap 4 Utility Classes

Рубрики Bootstrap

Bootstrap 4 Utility Classes Main Tips

  • Bootstrap 4 offers a greate range of utility classes.
  • The classes we will describe in this tutorial make styling items easier and quicker without writing any new CSS.

Bootstrap 4 Utility Classes Borders

Using Bootstrap 4 utility classes you can apply or delete borders of an HTML element.

Here’s the list of them:

  • .border – adds a border to all sides of the element
  • .border border-0 – removes all borders
  • .border border-top-0 – adds border to all sides but the top
  • .border border-right-0 – adds border to all sides but the right
  • .border border-bottom-0 – adds border to all sides but the bottom
  • .border border-left-0 – adds border to all sides but the left

Try It


Border Color

You can color borders using contextual classes.

This is a list of contextual classes that work with borders:

  • .border-success 
  • .border-info 
  • .border-warning 
  • .border-danger 
  • .border-primary 
  • .border-secondary 
  • .border-light 
  • .border-dark

Try It


Border Radius

It is also possible to make corners of an element rounded by using .rounded classes.

Here’s a list of them:

  • .rounded – makes all corner rounded
  • .rounded-top – rounds the top side corners
  • .rounded-right – rounds the right side corners
  • .rounded-bottom – rounds the bottom side corners
  • .rounded-left – rounds the left side corners
  • .rounded-circle – makes the element a circle
  • .rounded-0 – removes any rounded corners present on the element

Try It


Bootstrap 4 Utility Classes Float

Utility classes of Bootstrap 4 also allow you to set the float attribute of elements.

To do this, you should create a <div> container with the .clearfix class to remove any floats that were defined before.

Inside it you can use the .float-left and .float-right classes to position your elements horizontally as you like.

  • .float-right – make element float to the right
  • .float-left – make element float to the left
  • .float-none – no float applied

Try It


Bootstrap 4 Utility Classes Responsive Float

Bootstrap 4 also offers classes that let you set floats responsively.

This is done using the following classes (the asterisk * represents either “left” or “right”):

  • .float-sm-right – apply float to screens bigger than 576px
  • .float-md-right – apply float to screens  bigger than 768px
  • .float-lg-right – apply float to screens bigger than 992px
  • .float-xl-right – apply float to screens bigger than 1200px
  • .float-none – no float applied

Try It


Bootstrap 4 Utility Classes Centering

You can center an element by using the .mx-auto class.

Try It


Bootstrap 4 Utility Classes Vertical Align

It is also possible to align elements using Bootstrap 4 utility classes.

The .align classes are used to position an element vertically inside its container.

These classes work with inline, inline-block, table cell and inline-table elements.

Here’s a list of them:

  • .align-baseline – aligns to the baseline of the container
  • .align-top – aligns to the top of the container
  • .align-middle – aligns to the middle of the container
  • .align-bottom – aligns to the bottom of the container
  • .align-text-top – aligns text to the top of the line
  • .align-text-bottom – aligns text to the bottom of the line

Try It


Bootstrap 4 Utility Classes Width And Height

Width and height percentage values can also be set using utility classes.

Width

Here’s a list of Bootstrap 4 width setting classes:

  • .w-25 – sets the element’s width to 25%
  • .w-50 – sets the element’s width to 50%
  • .w-75 – sets the element’s width to 75%
  • .w-100 – sets the element’s width 100%
  • .mw-100 – sets the element’s max width 100%

Try It

Height

Here’s a list of Bootstrap 4 height setting classes:

  • .h-25 – sets the element’s height to 25%
  • .h-50 – sets the element’s height to 50%
  • .h-75 – sets the element’s height to 75%
  • .h-100 – sets the element’s height 100%
  • .mh-100 – sets the element’s max height 100%

Try It


Bootstrap 4 Utility Classes Spacing

Bootstrap 4 utility classes let you set responsive margin and padding.

When it comes to spacing, these properties follow a flexible pattern :

{property}{sides} – {breakpoint} – {sides}

for xs and

{property}{sides} – {sides}

for sm, md, lg and xl. If you omit the breakpoint specification, the properties will work on all screens.

Property

The property may be either padding or margin.

To specify that it is padding – enter .p, and .m if margin.

Try It

Sides

The sides spot may be filled in with one of these classes, affecting the following CSS properties of an element :

  • t – used to set *-top
  • – used to set *-right
  • – used to set *-bottom
  • l – used to set *-left
  • x – used to set *-left and *-right
  • y – used to set *-top and *-bottom

Try It

Note: the asterisk should be filled in with either margin or padding

Breakpoint

The breakpoint refers to what screen sizes the properties assigned by a class apply.

Possible breakpoint names are as follows:

  • xs – (if you want to use this, the breakpoint spot should be left empty) for screens narrower than 576px
  • sm – for screens wider than 576px
  • md – for screens wider than 768px
  • lg – for screens wider than 992px
  • xl  -for screens wider than 1200px

Try It

Size

The possible values for the size are these:

  • 0 – set padding or margin to 0
  • 1 – set padding or margin to .25rem (4px when font-size is 16px)
  • 2 – set padding or margin to .5rem (8px when font-size is 16px)
  • 3 – set padding or margin to 1rem (16px when font-size is 16px)
  • 4 – set padding or margin to 1.5rem (24px when font-size is 16px)
  • 5 – set padding or margin to 3rem (48px when font-size is 16px)
  • auto – set padding to auto

Try It

By entering the values into where they belong and connecting them with dashes you can create classes for interactive spacing around and inside your elements.


Bootstrap 4 Utility Classes Shadows

Use the shadow-* classes to to add shadows to an element.

Example

  1. <div class=«shadow p-3 mb-4 bg-white»>This element has a shadow</div>

Try It


Bootstrap 4 Utility Classes Responsive Embeds

Create responsive video or slideshow embeds based on the width of the parent.

Add the .embed-responsive-item to any embed elements (like <iframe> or <video>) in a parent element with .embed-responsive and an aspect ratio of your choice:

Example

    1. <!— 21:9—>
    1. <div class=«embed-responsive embed-responsive-21by9»>
    1. <iframe class=«embed-responsive-item» src=«…»></iframe>
    1. v/div>
    1. <!— 16:9 —>
    1. <div class=«embed-responsive embed-responsive-16by9»>
    1. <iframe class=«embed-responsive-item» src=«…»></iframe>
    1. </div>
    1. <!— 4:3 —>
    1. <div class=«embed-responsive embed-responsive-4by3»>
    1. <iframe class=«embed-responsive-item» src=«…»></iframe>
    1. </div>
    1. <!— 1:1 —>
    1. <div class=«embed-responsive embed-responsive-1by1»>
    1. <iframe class=«embed-responsive-item» src=«…»></iframe>
  1. </div>

Try It


Bootstrap 4 Utility Classes Visibility

Use the .visible or .invisible classes to control the visibility of elements. Note: These classes do not change the CSS display value. They only add visibility:visible or visibility:hidden:

Example

    1. <div class=«visible»>Visible text</div>
  1. <div class=«invisible»>Invisible text</div>

Try It


Bootstrap 4 Utility Classes Position

Use the .fixed-top class to make any element fixed/stay at the top of the page:

Example

  1. <div class=«p-3 fixed-top bg-danger»>I am fixed to the top</div>

Try It

Use the .fixed-bottom class to make any element fixed/stay at the bottom of the page:

Example

  1. <div class=«p-3 fixed-bottom bg-danger»>I am fixed to the bottom</div>

Try It

Use the .sticky-top class to make any element fixed/stay at the top of the page when you scroll past it. Note: This class does not work in IE11 and earlier (will treat it as position:relative).

Example

  1. <div class=«p-3 sticky-top bg-danger»>I will stick to the top</div>

Try It


Bootstrap 4 Utility Classes Close Icon

Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the × symbol to create the actual icon (a better lookiong “x”). Also note that it floats right by default:

Example

  1. <button type=«button» class=«close»>×</button>

Try It

Bootstrap 4 Utility Classes Colors

As described in the Colors chapter, here is a list of all text and background color classes:

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:

Example

  1. <p class=«text-success»>Text</p>

Try It

Contextual text classes can also be used on links, which will add a darker hover color:

Example

  1. <a href=«#» class=«text-success»>Link</a>

Try It

You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

Example

  1. <p class=«text-black-50»>Text</p>

Try It


Bootstrap 4 Utility Classes Backgrounds

The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Note that background colors do not set the text color, so in some cases you’ll want to use them together with a .text-* class.

Example

  1. <a href=«#» class=«bg-success»>Text</a>

Try It


Bootstrap 4 Utility Classes Typography

As described in the Typography chapter, here is a list of all typography/text classes:

  • .display-* – display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are four classes to choose from: .display-1, .display-2, .display-3, .display-4
  • .font-weight-bold – bold text
  • .font-weight-normal – normal text
  • .font-weight-light – light weight text
  • .font-italic – italic text
  • .lead – makes a paragraph stand out
  • .small – indicates smaller text (set to 85% of the size of the parent)
  • .text-left – indicates left-aligned text
  • .text-center – indicates center-aligned text
  • .text-right – indicates right-aligned text
  • .text-justify – indicates justified text
  • .text-monospace – monospaced text
  • .text-nowrap – indicates no wrap text
  • .text-lowercase – indicates lowercased text
  • .text-uppercase – indicates uppercased text
  • .text-capitalize – indicates capitalized text
  • .initialism – displays the text inside an <abbr> element in a slightly smaller font size
  • .list-unstyled – removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well)
  • .list-inline – laces all list items on a single line (used together with .list-inline-item on each <li> elements)
  • .pre-scrollable – Makes a <pre> element scrollable

Bootstrap 4 Utility Classes Block Elements

To make an element into a block element, add the .d-block class. Use any of the d-*-block classes to control WHEN the element should be a block element on a specific screen width:

Example

    1. <span class=«d-block bg-danger»>Block element</span>
    1. <span class=«d-sm-block bg-danger»>Block element</span>
    1. <span class=«d-md-block bg-danger»>Block element</span>
    1. <span class=«d-lg-block bg-danger»>Block element</span>
  1. <span class=«d-xl-block bg-danger»>Block element</span>

Try It