Grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options.

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

• Rows must be placed within a .container (fixed-widt) or .container-fluid (full-width) for proper alignment and padding.
• Use rows to create horizontal groups of columns.
• Content should be placed within columns, and only columns may be immediate children of rows.
• Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts.
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin with elements with a class of .row.
• The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
• Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
• If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
• Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

Look to the examples for applying these principles to your code.

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that stars out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

<div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
     <div class="col-md-8">.col-md-8</div>
     <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
</div>

Example: Fluid container

Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid

<div class="container-fluid">
  <div class="row">
      ...
  </div>
</div>

Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
 <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
 <div class="col-xs-6">.col-xs-6</div>
 <div class="col-xs-6">.col-xs-6</div>
</div>

Example: Mobile, tablet, desktop

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Example: Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.

Offsetting columns

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

<div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

<div class="row">
 <div class="col-sm-9">
   Level 1: .col-sm-9
   <div class="row">
     <div class="col-xs-8 col-sm-6">
       Level 2: .col-xs-8 .col-sm-6
     </div>
     <div class="col-xs-4 col-sm-6">
       Level 2: .col-xs-4 .col-sm-6
     </div>
   </div>
 </div>
</div>

Column ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Spacing

Spacing utilities that apply to all breakpoints, from xs to lg, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, and lg.

Where property is one of:

• m - for classes that set margin
• p - for classes that set padding

Where sides is one of:

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• r - for classes that set margin-right or padding-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

• 0 - for classes that eliminate the margin or padding by setting it to 0
• min - (by default) for classes that set the margin or padding to .0625rem (~1px)
• 1 - (by default) for classes that set the margin or padding to .25rem (~4px)
• 2 - (by default) for classes that set the margin or padding to .5rem (~8px)
• 3 - (by default) for classes that set the margin or padding to 1rem (~16px)
• 4 - (by default) for classes that set the margin or padding to 1.5rem (~24px)
• 5 - (by default) for classes that set the margin or padding to 3rem (~48px)
• 6 - (by default) for classes that set the margin or padding to 4rem (~64px)
• 7 - (by default) for classes that set the margin or padding to 5rem (~80px)
• 8 - (by default) for classes that set the margin or padding to 6rem (~96px)
• 9 - (by default) for classes that set the margin or padding to 7rem (~112px)
• 10 - (by default) for classes that set the margin or padding to 8rem (~128px)
  NOTE: Size is set using the variable $spacer which by default is set to 1rem. All margin/padding sizes can be changed by editing this variable.

<h5 class="text-left">Margins</h5>
<div class="row">
  <div class="col-xs-12 my-2">This is a div with both top and bottom margins set to 16px</div>
</div>
<div class="row">
  <div class="col-xs-12 my-4">This is a div with both top and bottom margins set to 24px</div>
</div>
<div class="row">
  <div class="col-xs-12 my-8">This is a div with both top and bottom margins set to 96px</div>
</div>
<h5 class="text-left">Padding</h5>
<div class="row">
  <div class="col-xs-12 py-2">This is a div with both top and bottom padding set to 8px</div>
</div>
<div class="row">
  <div class="col-xs-12 py-4">This is a div with both top and bottom padding set to 24px</div>
</div>
<div class="row">
  <div class="col-xs-12 py-8">This is a div with both top and bottom padding set to 96px</div>
</div>

Usage

.mt-0 { 
  margin-top: 0 !important;
}
.ml-1 { 
  margin-left: 4px !important;
  margin-left: ($spacer * .25);
    }
.px-2 {
  padding-right: 8px !important;
  padding-right: ($spacer * .5) !important; 
  padding-left: 8px !important;
  padding-left: ($spacer * .5) !important; 
}
.p-3 {
  padding: 16px !important;
  padding: $spacer !important;
}

Horizontal Centering

UA-Bootstrap now includes Bootstrap 4's .mx-auto class for horizontally centering fixed-width block level content. That is, content that has display: block and a width set. It does this by setting the horizontal margins to auto

<div class="row show-grid">
  <div class="mx-auto" style="width:200px;"><a class="btn btn-default btn-block">Centered Element</a></div>
</div>

Row buffer

In order to allow the typography to set the vertical rhythm, rows do not have any margins around them by default. These classes are intended to be used sparingly only when default vertical rhythm appears unnatural: .top-buffer-md-* or .bottom-buffer-md-* .

This adds a series of buffer classes, and buffer resets. The buffers follow the pattern of SIDE-buffer-SIZE-* The resets follow the pattern of SIDE-buffer-SIZE-reset(excluding xs)

SIDE referes to which side of the element you would like the buffer class to be applied to (top/bottom/left/right).

SIZE referes to the viewport(s) you would like the buffer classes applied to. The viewports use the (xs/sm/md/lg) naming scheme.

NOTE: Buffer classes will be applied to the viewport you specify, as well as any 'larger' viewports.

For example: If I want to apply a 5px top buffer to an element, but I want it applied on only xs and sm viewports I would use: top-buffer-xs-5 AND top-buffer-md-reset

That will apply a top buffer of 5px to my element at the xs viewport and up, but then reset the buffer of the element on md viewport and up.

<div class="row">
  <div class="col-xs-12">top-buffer-*-0 or top-buffer-*-reset, default buffer is
  zero. You can also just leave off if not removing margin.</div>
</div>
<div class="row top-buffer-xs-1">
  <div class="col-xs-12">top-buffer-*-1</div>
</div>
<div class="row top-buffer-xs-5">
  <div class="col-xs-12">top-buffer-*-5</div>
</div>
<div class="row top-buffer-xs-10">
  <div class="col-xs-12">top-buffer-*-10</div>
</div>
<div class="row top-buffer-xs-15">
  <div class="col-xs-12">top-buffer-*-15</div>
</div>
<div class="row top-buffer-xs-20">
  <div class="col-xs-12">top-buffer-*-20</div>
</div>
<div class="row top-buffer-xs-25">
  <div class="col-xs-12">top-buffer-*-25</div>
</div>
<div class="row top-buffer-xs-30">
  <div class="col-xs-12">top-buffer-*-30</div>
</div>
<div class="row top-buffer-xs-50">
  <div class="col-xs-12">top-buffer-*-50</div>
</div>

<div class="row">
  <div class="col-xs-12">bottom-buffer-*-0 or bottom-buffer-*-reset, default buffer is
  zero. You can also just leave off if not removing margin.</div>
</div>
<div class="row bottom-buffer-xs-1">
  <div class="col-xs-12">bottom-buffer-*-1</div>
</div>
<div class="row bottom-buffer-xs-5">
  <div class="col-xs-12">bottom-buffer-*-5</div>
</div>
<div class="row bottom-buffer-xs-10">
  <div class="col-xs-12">bottom-buffer-*-10</div>
</div>
<div class="row bottom-buffer-xs-15">
  <div class="col-xs-12">bottom-buffer-*-15</div>
</div>
<div class="row bottom-buffer-xs-20">
  <div class="col-xs-12">bottom-buffer-*-20</div>
</div>
<div class="row bottom-buffer-xs-25">
  <div class="col-xs-12">bottom-buffer-*-25</div>
</div>
<div class="row bottom-buffer-xs-30">
  <div class="col-xs-12">bottom-buffer-*-30</div>
</div>
<div class="row bottom-buffer-xs-50">
  <div class="col-xs-12">bottom-buffer-*-50</div>
</div>

Column buffer

This adds a series of buffer classes, and buffer resets. The buffers follow the pattern of SIDE-buffer-SIZE-* The resets follow the pattern of SIDE-buffer-SIZE-reset (excluding xs)

SIDE referes to which side of the element you would like the buffer class to be applied to (top/bottom/left/right).

SIZE referes to the viewport(s) you would like the buffer classes applied to. The viewports use the (xs/sm/md/lg) naming scheme.

NOTE: Buffer classes will be applied to the viewport you specify, as well as any 'larger' viewports.

For example: If I want to apply a 5px top buffer to an element, but I want it applied on only xs and sm viewports I would use: top-buffer-xs-5 AND top-buffer-md-reset

That will apply a top buffer of 5px to my element at the xs viewport and up, but then reset the buffer of the element on md viewport and up.

With the .right-buffer-*-* or .left-buffer-*-* class, you can add buffer to the right and left of columns.

<div class="row bottom-buffer-xs-10">
  <div class="col-xs-6 right-buffer-xs-0">
    <a class="btn btn-default btn-block">right-buffer-*-0</a>
  </div>
  <div class="col-xs-6 left-buffer-xs-0">
    <a class="btn btn-default btn-block">left-buffer-*-0</a>
  </div>
</div>
<div class="row bottom-buffer-xs-10">
  <div class="col-xs-6 right-buffer-xs-1">
    <a class="btn btn-default btn-block">right-buffer-*-1</a>
  </div>
  <div class="col-xs-6 left-buffer-xs-1">
    <a class="btn btn-default btn-block">left-buffer-*-1</a>
  </div>
</div>
<div class="row bottom-buffer-xs-10">
  <div class="col-xs-6 right-buffer-xs-5">
    <a class="btn btn-default btn-block">right-buffer-*-5</a>
  </div>
  <div class="col-xs-6 left-buffer-xs-5">
    <a class="btn btn-default btn-block">left-buffer-*-5</a>
  </div>
</div>
<div class="row bottom-buffer-xs-10">
  <div class="col-xs-6 right-buffer-xs-10">
    <a class="btn btn-default btn-block">right-buffer-*-10</a>
  </div>
  <div class="col-xs-6 left-buffer-xs-10">
    <a class="btn btn-default btn-block">left-buffer-*-10</a>
  </div>
</div>
<div class="row bottom-buffer-xs-10">
  <div class="col-xs-6 right-buffer-xs-15">
    <a class="btn btn-default btn-block">right-buffer-*-15</a>
  </div>
  <div class="col-xs-6 left-buffer-xs-15">
    <a class="btn btn-default btn-block">left-buffer-*-15</a>
  </div>
</div>
<div class="row bottom-buffer-xs-10">
  <div class="col-xs-6 right-buffer-xs-20">
    <a class="btn btn-default btn-block">right-buffer-*-20</a>
  </div>
  <div class="col-xs-6 left-buffer-xs-20">
    <a class="btn btn-default btn-block">left-buffer-*-20</a>
  </div>
</div>
<div class="row bottom-buffer-xs-10">
  <div class="col-xs-6 right-buffer-xs-30">
    <a class="btn btn-default btn-block">right-buffer-*-30</a>
  </div>
  <div class="col-xs-6 left-buffer-xs-30">
    <a class="btn btn-default btn-block">left-buffer-*-30</a>
  </div>
</div>

Display

Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.

For more information see: Bootstrap 4 Display

How it works

Change the value of the display property with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.

Notation

Display utility classes that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

As such, the classes are named using the format:

.d-{value} for xs .d-{breakpoint}-{value} for sm, md, lg, and xl.

Where value is one of:

• none
• inline
• inline-block
• block
• table
• table-cell
• table-row
• flex
• inline-flex

The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on both lg and xl screens.

Hiding Elements

For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size.

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-*class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Examples

<div class="d-inline p-2 bg-red text-white">d-inline</div>
<div class="d-inline p-2 bg-blue text-white">d-inline</div>

<span class="d-block p-2 bg-red text-white">d-block</span>
<span class="d-block p-2 bg-blue text-white">d-block</span>

Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

For more information see Bootstrap 4 Flex

Additional information on how flex works can be found on CSS-Tricks' Complete Guide to Flexbox

Enable Flex Behaviors

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

<div class="d-flex p-2 bg-red text-white">I'm a flexbox container!</div>

<div class="d-inline-flex p-2 bg-red text-white">I'm an inline flexbox container!</div>

Responsive variations also exist for .d-flex and .d-inline-flex.

• .d-flex
• .d-inline-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex

Direction

Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).

Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.

<div class="d-flex flex-row well">
    <div class="p-2 bg-red text-white">Flex item 1</div>
    <div class="p-2 bg-blue text-white">Flex item 2</div>
    <div class="p-2 bg-red text-white">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse well">
    <div class="p-2 bg-red text-white">Flex item 1</div>
    <div class="p-2 bg-blue text-white">Flex item 2</div>
    <div class="p-2 bg-red text-white">Flex item 3</div>
</div>

Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side.

<div class="d-flex flex-column">
    <div class="p-2 bg-red text-white">Flex item 1</div>
    <div class="p-2 bg-blue text-white">Flex item 2</div>
    <div class="p-2 bg-red text-white">Flex item 3</div>
</div>
<br>
<div class="d-flex flex-column-reverse">
    <div class="p-2 bg-red text-white">Flex item 1</div>
    <div class="p-2 bg-blue text-white">Flex item 2</div>
    <div class="p-2 bg-red text-white">Flex item 3</div>
</div>

Responsive variations also exist for flex-direction.

• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse
• .flex-sm-row
• .flex-sm-row-reverse
• .flex-sm-column
• .flex-sm-column-reverse
• .flex-md-row
• .flex-md-row-reverse
• .flex-md-column
• .flex-md-column-reverse
• .flex-lg-row
• .flex-lg-row-reverse
• .flex-lg-column
• .flex-lg-column-reverse
• .flex-xl-row
• .flex-xl-row-reverse
• .flex-xl-column
• .flex-xl-column-reverse

Justify Content

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Responsive variations also exist for justify-content.

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around

Align Items

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

<div class="d-flex align-items-start bg-cool-gray mb-3" style="height: 100px">...</div>
<div class="d-flex align-items-end bg-cool-gray mb-3" style="height: 100px">...</div>
<div class="d-flex align-items-center bg-cool-gray mb-3" style="height: 100px">...</div>
<div class="d-flex align-items-baseline bg-cool-gray mb-3" style="height: 100px">...</div>
<div class="d-flex align-items-stretch bg-cool-gray mb-3" style="height: 100px">...</div>

Responsive variations also exist for align-items.

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch
• .align-items-sm-start
• .align-items-sm-end
• .align-items-sm-center
• .align-items-sm-baseline
• .align-items-sm-stretch
• .align-items-md-start
• .align-items-md-end
• .align-items-md-center
• .align-items-md-baseline
• .align-items-md-stretch
• .align-items-lg-start
• .align-items-lg-end
• .align-items-lg-center
• .align-items-lg-baseline
• .align-items-lg-stretch
• .align-items-xl-start
• .align-items-xl-end
• .align-items-xl-center
• .align-items-xl-baseline
• .align-items-xl-stretch

Align Self

Use align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from the same options as align-items: start, end, center, baseline, or stretch (browser default).

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

Responsive variations also exist for align-self.

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch
• .align-self-sm-start
• .align-self-sm-end
• .align-self-sm-center
• .align-self-sm-baseline
• .align-self-sm-stretch
• .align-self-md-start
• .align-self-md-end
• .align-self-md-center
• .align-self-md-baseline
• .align-self-md-stretch
• .align-self-lg-start
• .align-self-lg-end
• .align-self-lg-center
• .align-self-lg-baseline
• .align-self-lg-stretch
• .align-self-xl-start
• .align-self-xl-end
• .align-self-xl-center
• .align-self-xl-baseline
• .align-self-xl-stretch

Auto Margins

Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (.mr-auto), and pushing two items to the left (.ml-auto).

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

With Align Items

Vertically move one flex item to the top or bottom of a container by mixing align-items, flex-direction: column, and margin-top: auto or margin-bottom: auto.

<div class="d-flex align-items-start flex-column" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

Wrap

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .flex-nowrap, wrapping with .flex-wrap, or reverse wrapping with .flex-wrap-reverse.

<div class="d-flex flex-nowrap">
  ...
</div>

<div class="d-flex flex-wrap">
  ...
</div>

<div class="d-flex flex-wrap-reverse">
  ...
</div>

Responsive variations also exist for flex-wrap.

• .flex-nowrap
• .flex-wrap
• .flex-wrap-reverse
• .flex-sm-nowrap
• .flex-sm-wrap
• .flex-sm-wrap-reverse
• .flex-md-nowrap
• .flex-md-wrap
• .flex-md-wrap-reverse
• .flex-lg-nowrap
• .flex-lg-wrap
• .flex-lg-wrap-reverse
• .flex-xl-nowrap
• .flex-xl-wrap
• .flex-xl-wrap-reverse

Align Content

Use align-content utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and increased the number of flex items.

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

<div class="d-flex align-content-end flex-wrap">...</div>

<div class="d-flex align-content-center flex-wrap">...</div>

<div class="d-flex align-content-between flex-wrap">...</div>

<div class="d-flex align-content-around flex-wrap">...</div>

<div class="d-flex align-content-stretch flex-wrap">...</div>

Responsive variations also exist for align-content.

• .align-content-start
• .align-content-end
• .align-content-center
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-around
• .align-content-xl-stretch

Flex Within the Grid

Apply display and flex utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

Note: When using display and flex utilities with columns, the xs column size must be set to work as intended on mobile.

<div class="row d-flex flex-wrap">
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="content height-100 pb-4">
            <div class="card card-block bg-blue text-white height-100">
                I'm a flexbox container!
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="content height-100 pb-4">
            <div class="card card-block height-100">
                I'm a flexbox container with a lot of text that makes me very long compared to the other flexbox containers in this grid to show you how all the heights are the same!
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="content height-100 pb-4">
            <div class="card card-block bg-blue text-white height-100 d-flex flex-column">
                I'm a flexbox container with a button aligned to the bottom!
                <a class="btn btn-hollow-reverse mt-auto" href="#flex-within-the-grid">Button</a>
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="content height-100 pb-4">
            <div class="card card-block height-100">
                <h3>Sample Text Heading</h3>
                <p>I'm a flexbox container with a lot of text that makes me very long compared to the other flexbox containers!</p>
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="content height-100 pb-4">
            <div class="card card-block bg-chili text-white height-100 d-flex flex-column">
                <span class="my-auto text-center">I'm a flexbox container with my text aligned to the middle!</span>
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="content height-100 pb-4">
            <div class="card card-block height-100 d-flex flex-column">
                <span class="mt-auto">I'm a flexbox container with my text aligned to the bottom!</span>
            </div>
        </div>
    </div>
</div>

Typography

Visit the fonts section for tips and best practices.

Text Colors

In order to change the color of your text to one of the Arizona's brand colors you can use one of the predefined .text-color classes. It is not advised to use text color classes without first checking their accessibility score. One handy way to see if a text color has enough contrast from the background color is our text color accessibility test.

 <p class="text-bloom">Bloom text example. As a text color, bloom has color contrast issues.</p>
 <p class="text-red">Arizona red text example.</p>
 <p class="text-chili">Chili text example.</p>
 <div class="bg-midnight card-block">
   <p class="text-sky">Sky text example.</p>
 </div>
 <div class="bg-midnight card-block">
   <p class="text-oasis">Oasis text example.</p>
 </div>
 <p class="text-azurite">Azurite text example.</p>
 <p class="text-blue">Arizona blue text example.</p>
 <p class="text-midnight">Midnight text example.</p>
 <div class="bg-midnight card-block">
   <p class="text-cool-gray">Cool gray text example.</p>
 </div>
 <div class="bg-midnight card-block">
   <p class="text-warm-gray">Warm gray text example.</p>
 </div>
 <div class="bg-midnight card-block">
   <p class="text-leaf">Leaf text example.</p>
 </div>
 <p class="text-river">River text example.</p>
 <div class="bg-midnight card-block">
   <p class="text-silver">Silver text example.</p>
 </div>
 <p class="text-ash">Ash text example.</p>
 <p class="text-sage">Sage text example.</p>
 <p class="text-mesa">Copper (mesa) text example.</p>
 <p class="text-silver-dark">Dark silver text example.</p>
 <div class="bg-red card-block">
   <p class="text-white">White text example.</p>
 </div>

Headings

All HTML headings, h1 through h6, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline. Heading sizes change at different breakpoints.

For accessibility reasons, do not use headings to achieve visual results only.

 <h1>Heading one example</h1>
 <h2>Heading two example</h2>
 <h3>Heading three example</h3>
 <h4>Heading four example</h4>
 <h5>Heading five example</h5>
 <h6>Heading six example</h6>

Heading Options

Combine classes as needed. Headings h1 through h6 can use text color classes like .text-blue or .text-azurite. The .sans class provides a sanserif alternative for h1 and h2. Plus there's .text-uppercase.

 <h1 class="text-uppercase text-midnight sans">How to Apply</h1>
 <h2 class="text-uppercase text-blue sans">More than 100 Majors</h2>
 <h3 class="text-uppercase text-azurite">Freshmen</h3>
 <h4 class="text-uppercase text-ash">A complete application includes</h4>

The same heading options can be used with .h1 through .h6 classes to match the font styling of a heading while maintaining best practices for web accessibility.

 <p class="h1 text-uppercase text-midnight sans">Cost & Aid</p>
 <p class="h2 text-uppercase text-blue sans">More than 86% of Wildcats receive aid</p>
 <h2 class="h3 text-uppercase text-azurite">International</h2>
 <p class="h4 text-uppercase text-ash">Scholarship Universe</p>

Margin Vertical Align

Default vertical alignment for headings, h1 through h6, might not be set to what you need for your documents. You can change this by using .margin-align-*.

Alternately, you can use .margin-zero-* to override top or bottom margin to zero.

Note! The best results occur in block-level elements, and not inline-elements.

<p class="margin-align-top">Text align top example</p>
<p class="margin-align-middle">Text align middle example</p>
<p class="margin-align-bottom">Text align bottom example</p>
<p class="margin-zero-top">Text align with zero margin-top</p>
<p class="margin-zero-bottom">Text align with zero margin-bottom</p>

Font Size

Using HTML headings, h1 through h6, to size text can give you unwanted .margin-top and .margin-bottom. To avoid these margins but keep the font-size, you can instead use .text-size-h*. Like with headings, these classes' font-size values change at different breakpoints.

<p class="text-size-h1">Heading 1 Text Size</p>
<p class="text-size-h2">Heading 2 Text Size</p>
<p class="text-size-h3">Heading 3 Text Size</p>
<p class="text-size-h4">Heading 4 Text Size</p>
<p class="text-size-h5">Heading 5 Text Size</p>
<p class="text-size-h6">Heading 6 Text Size</p>

Body Copy

UA Bootstrap's global default font-size is 16px, with a line-height of 1.5. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of 16px by default.

<p>...</p>

Lead Body Copy

Make a paragraph stand out by adding .lead.

<p class="lead">...</p>

Inline Text Elements

Marked Text

For highlighting a run of text due to its relevance in another context, use the <mark> tag.

<mark>highlight</mark>

Deleted Text

For indicating blocks of text that have been deleted use the <del> tag.

<del>This line of text is meant to be treated as deleted text.</del>

Strikethrough Text

For indicating blocks of text that are no longer relevant use the <s> tag.

<s>This line of text is meant to be treated as no longer accurate.</s>

Inserted Text

For indicating additions to the document use the ins tag.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Underlined Text

To underline text use the u tag.

<u>This line of text will render as underlined.</u>

Small Text

For de-emphasizing inline or blocks of text, use the small tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

<small> This line of text is meant to be treated as fine print.</small>

Bold

For emphasizing a snippet of text with a heavier font-weight.

<strong>rendered as bold text</strong>

Italic

For emphasizing a snippet of text with italics.

<em>rendered as italicized</em>

Alignment Classes

Easily realign text to components with text alignment classes.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Responsive Alignment Classes

Changing alignment of text at different breakpoints allows for more design options.

Transformation Classes

Transform text in components with text capitalization classes.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Lists

Unordered

A list of items in which the order does not explicitly matter.

<ul>
    <li>...</li>
</ul>

Triangle

Same as unordered list but uses blue triangles as bullets.

<ul class="triangle">
    <li>...</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

<ol>
    <li>...</li>
</ol>

Utility Classes

General use Utility Classes.

<div class="row">
   <p>Here is an example</p>
   <p>of a few lines of text</p>
   <p>with the default line spacing</p>
</div>
<div class="row no-line-height">
   <p>Here is an example</p>
   <p>of a few lines of text</p>
   <p>without the default line spacing</p>
</div>

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

Style and content changes for simple variations on a standard <blockquote>.

Naming a source

Add a <footer> for identifying the source. Wrap the name of the source work in .

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alternate displays

Add .blockquote-reverse for a blockquote with right-aligned content.

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Tables

Basic

Use the standard table code to make tables. Add .table-striped for row separators.

<div class="table-responsive">
  <table class="table-striped">
      ...
  </table>
</div>

Add .table-dark for an alternate dark version.

<div class="table-responsive">
  <table class="table-dark table-striped">
      ...
  </table>
</div>

Hover Rows

Add the .table-hover class to table elements for a hover effect on table rows.

<div class="table-responsive">
  <table class="table-hover">
      ...
  </table>
</div>

<div class="table-responsive">
  <table class="table-dark table-hover">
      ...
  </table>
</div>

<div class="table-responsive">
  <table class="table-hover table-striped">
      ...
  </table>
</div>

<div class="table-responsive">
  <table class="table-dark table-hover table-striped">
      ...
  </table>
</div>

Responsive Tables

Create responsive tables by wrapping any <table> in .table-responsive to make them scroll horizontally on small devices (under 48em). When viewing on anything larger than 48em wide, you will not see any difference in these tables.

<div class="table-responsive">
  <table class="table-striped">
      ...
  </table>
</div>

Forms

Basic Example

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 50%; by default. Wrap labels and controls in .form-group for optimum spacing.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="input-group">
    <label> Checkboxes <span class="form-required" title="This field is required.">*</span> </label>
    <div class="checkbox">
        <label>
          <input type="checkbox"> Checkbox
        </label>
    </div>
  </div>
  <div class="input-group">
    <label>Radios <span class="form-required" title="This field is required.">*</span></label>
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option one is this and that&mdash;be sure to include why it's great
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
      </label>
    </div>
    <div class="radio disabled">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
        Option three is disabled
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-red">Submit</button>
</form>

Buttons

Button tags

Use the button classes on an <a>, <button>, or <input> element.

 <a class="btn btn-default" href="#" role="button">Link</a>
 <button class="btn btn-default" type="submit">Button</button>
 <input class="btn btn-default" type="button" value="Input">
 <input class="btn btn-default" type="submit" value="Submit">

Context-specific usage

While button classes can be used on <a> and <button> elements, only button elements are supported within our nav and navbar components.

Links acting as buttons

If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

Among other things, there's https://bugzilla.mozilla.org/show_bug.cgi?id=697451 that prevents us from setting the line-height of <input-based buttons, causing them to not exactly match the height of other buttons on Firefox.

Options

Use any of the available button classes to quickly create a styled button.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

<!-- reset the line-height of ua-brand-icon font in buttons -->
<button type="button" class="btn btn-success"><i class="btn-icon ua-brand-checkmark">&nbsp;</i></button>
<button type="button" class="btn btn-default"><i class="btn-icon ua-brand-x">&nbsp;</i></button>

Arrow Buttons

You can add arrows by including btn-arrow.

<!-- Large buttons -->
<a href="#" class="btn-arrow btn btn-default btn-lg">Large Button</a>
<a href="#" class="btn-arrow btn btn-primary btn-lg">Large Button</a>

<!-- Default buttons -->
<a href="#" class="btn-arrow btn btn-default">Default Button</a>
<a href="#" class="btn-arrow btn btn-primary">Default Button</a>

<!-- Small buttons -->
<a href="#" class="btn-arrow btn btn-default btn-sm">Small Button</a>
<a href="#" class="btn-arrow btn btn-primary btn-sm">Small Button</a>

Hollow Buttons

Change it up and drive action with btn-hollow-default and btn-hollow-primary.

<!-- Large buttons -->
<a href='#' class="btn btn-hollow-default btn-lg">Large Button</a>
 <a href='#' class="btn btn-hollow-primary btn-lg">Large Button</a>

<!-- Default buttons -->
<a href='#' class="btn btn-hollow-default">Default Button</a>
 <a href='#' class="btn btn-hollow-primary">Default Button</a>

<!-- Small buttons -->
<a href='#' class="btn btn-hollow-default btn-sm">Small Button</a>
 <a href='#' class="btn btn-hollow-primary btn-sm">Small Button</a>

Use btn-hollow-reverse on a dark background.

 <a href='#' class="btn btn-hollow-reverse btn-lg">Large Button</a>
 <a href='#' class="btn btn-hollow-reverse">Default Button</a>
 <a href='#' class="btn btn-hollow-reverse btn-sm">Small Button</a>

Mix and match!

 <div class="btn-group">
    <button type="button" class="btn btn-hollow-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Visit <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
 </div>
 <a href='#' class="btn btn-hollow-default btn-lg">REQUEST INFO</a>
 <a href='#' class="btn btn-default btn-lg">APPLY</a>

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.

Button element

No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.

Primary button Button

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Anchor element

Add the .active class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Disabled state

Make buttons look unclickable by fading them back with opacity.

Button element

Add the disabled attribute to <button> buttons.

Primary button Button

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

External Links

If you would like to style all external links on a webpage, we provide a simple solution. Add class='external-links ua-brand-icons' to the document <html> element. Then just make sure that all external links open up in a new tab using target='_blank'.

  <html class="external-links ua-brand-icons">
  ...
    <ul class="nav navbar-nav">
      <li><a href="https://www.uanews.arizona.edu" target="_blank"><span>External link</a></li>
      <li class="active"><a href="#">Link<span class="sr-only">(current)</span></a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="https://uanews.arizona.edu" target="_blank">External link</a></li>
        </ul>
      </li>
    </ul>
  ...
    <h2><a href="https://uadigital.arizona.edu/ua-bootstrap/" target="_blank">H2 Link</a> with text</h2>
    <ul class="triangle">
      <li><a href="https://uadigital.arizona.edu/ua-bootstrap/">Link</a></li>
      <li><a href="https://uanews.arizona.edu" target="_blank">UA News External Link</a></li>
    </ul>
    <div class="btn btn-default" target="_blank">External Link Button</div>
  ...
  </html>

  <html class="external-links">
  ...
  <a class="card card-landing-grid remove-external-link-icon" href="https://www.arizona.edu" target="_blank">
    <h2 class="h3 text-uppercase text-blue30w">Ipsum Corporate</h2>
    <p class="card-text">Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
    <p class="margin-align-bottom text-cactus pseudo-link"><strong><span>How to Apply</span></strong></p>
  </a>

External links icon within a linked area

  <a class="card card-landing-grid remove-external-link-icon" href="https://www.arizona.edu" target="_blank">
    <h2 class="h3 text-uppercase text-blue30w">Ipsum Corporate</h2>
    <p class="card-text">Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
    <p class="card-link margin-align-bottom pseudo-link"><span>Ipsum Corporate</span></p>
  </a>
  ...
  <a class="card card-landing-grid remove-external-link-icon" href="https://www.arizona.edu" target="_blank">
    <h2 class="h3 text-uppercase text-blue30w">Ipsum Corporate</h2>
    <p class="card-text">Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
    <p class="margin-align-bottom text-cactus pseudo-link"><strong><span>How to Apply</span></strong></p>
  </a>

    <a href="#" class="external">External link with the default icon.</a>
    <a href="#" class="external external-blue">External link with an alternate blue icon.</a>