Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to vertically align content and best practices with resets with Bootstrap 5.

Vertical Alignment

We can vertically align content with various classes.

To do that, we can apply one of the .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top classes.

Then we can write:

<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>

We can align items with all these classes.

align-baseline aligns them to the baseline, which is the middle.

align-top aligns content to the top.

align-middle aligns things to the middle.

align-bottom aligns content to the bottom.

align-text-top aligns text to the top.

align-text-bottom aligns text to the bottom.

These classes can also be used within table cells.

For example, we can write:

<table style="height: 100px;">  
  <tbody>  
    <tr>  
      <td class="align-baseline">baseline</td>  
      <td class="align-top">top</td>  
      <td class="align-middle">middle</td>  
      <td class="align-bottom">bottom</td>  
      <td class="align-text-top">text-top</td>  
      <td class="align-text-bottom">text-bottom</td>  
    </tr>  
  </tbody>  
</table>

Then we get different results.

align-baseline works the same as align-top .

And align-text-top and align-text-bottom work the same way.

Visibility

Bootstrap 5 provides classes for controlling the visibility of content without modifying the display of elements.

We can use the visible class to make things visible and invisible to make things invisible.

For example, we can write:

<div class="visible">...</div>  
<div class="invisible">...</div>

Then the first div is visible and the 2nd one isn’t.

Reboot

Reboot provides a set of baseline CSS we can build our styles upon.

It’s built upon Normalize, which gives us many HTML elements with opinionated styles using only element selectors.

Additional styling is done with only classes.

It changes some browser defaults to use rems instead of em s for scalable component spacing.

margin-top is avoided. Vertical margins can collapse making results unexpected.

Single direction for margin is simpler.

rem s are used instead of margin s for easier scaling.

It also keeps declaration of font- related properties to a minimum and use inherit whenever possible.

Page Defaults

box-sizing is globally set on every element.

This ensures that the declared width of an element is never exceeded because of padding or border,

No base font-size is declared for the html element.

However, 16px is assumed.

This can be overridden with the $font-size-root variable.

body also see a global font-family , font-wwight , line-height and color.

body has a background-color set to #fff .

Native Font Stack

Bootstrap 5 sets the fonts to a given style.

It’s set with the following code:

$font-family-sans-serif:  
  -apple-system,  
  BlinkMacSystemFont,  
  "Segoe UI",  
  Roboto,  
  "Helvetica Neue", Arial,  
  "Noto Sans",  
  sans-serif,  
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

We have fonts for all popular platforms like macOS and iOS, Windows, Android, Linux and emoji fonts.

Helvetica Neue and Arial are the default font if nothing else is available.

Headings and Paragraphs

Bootstrap 5 provides it own styles for headings and paragraphs.

They have margin-top removed and margin-bottom set to .5rem for headings and 1rem for paragraphs.

Lists

All lists have their margin-top removed and margin-bottom set to 1rem.

Nested lists have no margin-bottom . padding-left is reset for ul and ol elements.

dd have margin-left set to 0 and margin-bottom set to .5rem .

dt s are bolded.

Inline Code

If we wrap snippets of cod with code tags, then we need to escape HTML angle brackets.

Code Blocks

We can use pre s for multiple lines of code.

Bootstrap removes the margin-top for pre elements and use rem for margin-bottom .

Variables

If we use Bootstrap 5, then variables should be written inside var tags.

For example, we can write:

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

User Input

kbd indicates input that’s typically entered with a keyboard.

For example, we can write;

<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

to add keyboard keys instructions.

Conclusion

Bootstrap provides us with a CSS baseline that we can build on.

Content can be aligned with various classes.